Echarts学习笔记
1.Ecahrts使用首先需要引用js文件 Echarts.js
然后定义一个带id的容器（div就可以）
然后就可以初始化echarts了
↓这是柱形图
<h2 class="content-tit">本校各年级教材费用</h2>
<div class="chart-box clearfix">
<div class="zhu-img-1" id="Bar_BookFee_RXNJ"></div>
</div>
var BookFeeRXNJChart;
function ShowBookFee_RXNJ_Bar() {
// 基于准备好的dom，初始化echarts实例
BookFeeRXNJChart = echarts.init(document.getElementById("Bar_BookFee_RXNJ"),
{
width: document.getElementById("Bar_BookFee_RXNJ").width
});
var RXNJ = [];
var BookFee = [];
$.ajax({
type: "post",
async: true,
url: "ashx/BookFeeAnal.ashx?m=BookFeeRXNJ",
dataType: "json", //返回数据形式为json
success: function(result) {
var list = $.makeArray(result.BookFee_RXNJ);
console.log(list);
if (result) {
for (var i = ; i < list.length; i++) {
RXNJ.push(list[i].RXNJ);
BookFee.push(list[i].NJCost);
}
// 指定图表的配置项和数据
var option = {
title: {
text: ""
},
tooltip: {},
legend: {
data: ["教材订购费用"]
}, xAxis: [
{
axisLabel: {
interval: ,
rotate: ,
margin:
},
data: RXNJ,
name:"年级"
}
],
grid: {
bottom:
},
yAxis: {name:"教材费用/元"},
series: [
{
name: "教材订购费用",
type: "bar",
data: BookFee,
itemStyle: {
normal: {
//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
color: function(params) {
// build a color map as your need.
var colorList = [
"#5ed4a3", "#5ed4a3", "#5ed4a3", "#5ed4a3", "#5ed4a3",
"#5ed4a3", "#5ed4a3", "#5ed4a3", "#5ed4a3", "#5ed4a3"
];
return colorList[params.dataIndex];
},
//以下为是否显示，显示位置和显示格式的设置了
label: {
show: false,
position: "top",
// formatter: '{c}'
formatter: "{b}\n{c}"
}
}
}
}
] };
BookFeeRXNJChart.setOption(option);
}
},
error: function(errorMsg) { layer_msg_error("图表数据加载失败！", "");
}
}); }
js
↓这是环形图
<h2 class="content-tit">本校各年级教材费用占比</h2>
<div class="chart-box clearfix">
<div class="bing-img" id="Pie_BookFeeProp_RXNJ"></div>
</div>
aspx
function ShowBookFeeProp() {
// 基于准备好的dom，初始化echarts实例
var BookFeeProp_RXNJ = echarts.init(document.getElementById("Pie_BookFeeProp_RXNJ"));
window.onresize = function() {
BookFeeProp_RXNJ.resize();
};
var option = {
title: {},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: "vertical",
x: "left",
data: []
},
series: [
{
name: "教材费用",
type: "pie",
radius: ["50%", "70%"],
avoidLabelOverlap: true,
label: {
normal: {
show: false,
position: "center"
},
emphasis: {
show: true,
textStyle: {
fontSize: "",
fontWeight: "bold"
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [],
itemStyle: {
normal: {
//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
color: function(params) {
// build a color map as your need.
var colorList = [
"#fd9bc4", "#fa98e6", "#e19af5", "#a8a8f8", "#a1d6f7",
"#8deff0", "#8df7d5", "#9bfaa8", "#d1fd68", "#f5c683",
"#fbb096", "#fc9292", "#f78ab3", "#f594e1", "#d992ed",
"#a8a8f8", "#a1d6f7", "#8deff0", "#8df7d5", "#fa9b9b"
];
return colorList[params.dataIndex];
}
}
}
}
]
};
BookFeeProp_RXNJ.setOption(option);
$.ajax({
type: "post",
async: true,
url: "ashx/BookFeeAnal.ashx?m=BookFeePropRXNJ",
dataType: "json", //返回数据形式为json
success: function(result) {
var list = $.makeArray(result.BookFee_RXNJ);
if (result) {
console.log(list[].length);
var RXNJ = [];
var array = [];
for (var i = ; i < list.length; i++) {
if (list[i].NJCost>) {
RXNJ.push(list[i].RXNJ);
}
var map = {};
map.name = list[i].RXNJ;
map.value = list[i].NJCost;
array[i] = map;
}
console.log(array);
BookFeeProp_RXNJ.setOption(
{
legend: {
data: RXNJ
},
series: [
{
// 根据名字对应到相应的系列
name: "教材费用分析",
type: "pie",
data: array
}
]
});
}
},
error: function(errorMsg) {
layer_msg_error("图表数据加载失败！", "");
}
});
}
js
↓这是饼状图
<div class="bing-img" id="Pie_GoodBookProp"></div>
aspx
function ShowGoodBookProp_Pie() {
// 基于准备好的dom，初始化echarts实例
var GoodBookPropChart = echarts.init(document.getElementById("Pie_GoodBookProp"));
var option = {
title: {},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
left: "left",
data: ["优秀教材", "普通教材"]
},
series: [
{
name: "GoodBookProp",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [],
itemStyle: {
emphasis: {
shadowBlur: ,
shadowOffsetX: ,
shadowColor: "rgba(0, 0, 0, 0.5)"
},
normal: {
//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
color: function (params) {
// build a color map as your need.
var colorList = [
"#57c0ea", "#94e5ff"
];
return colorList[params.dataIndex];
}
}
}
}
]
};
GoodBookPropChart.setOption(option);
$.ajax({
type: "post",
async: true,
url: "ashx/BookCountAnal.ashx?m=GoodBookProp",
dataType: "json", //返回数据形式为json
success: function (result) {
var list = $.makeArray(result.GoodBookProp);
if (result) {
//console.log(list[0].length);
var array = [];
var i = ;
for (var key in list[]) {
var map = {};
map.name = key;
map.value = list[][key];
array[i] = map;
i++;
}
//console.log(array);
GoodBookPropChart.setOption(
{
legend: {
data: ["优秀教材", "普通教材"]
},
series: [
{
// 根据名字对应到相应的系列
name: "优秀教材订购数量分析",
type: "pie",
data: array,
animation: false
}
]
});
window.onresize = function () {
GoodBookPropChart.resize();
};
var picInfo1 = GoodBookPropChart.getDataURL();
var imgobj1 = document.getElementById("Pie_GoodBookProp_Print");
//console.log(picInfo1);
//console.log(imgobj1);
if (imgobj1) {
imgobj1.src = picInfo1;
}
}
},
error: function (errorMsg) {
layer_msg_error("图表数据加载失败！", "");
}
});
}
js
或者是饼状图的半径随着数据的不同而不同的
function ShowBookScoreTop10_Pie() {
var BookScoreTop10Chart = echarts.init(document.getElementById("Pie_BookScore_top10"));
window.onresize = function () {
BookScoreTop10Chart.resize();
};
var option = {
title: {},
tooltip: {},
visualMap: {},
series: []
};
BookScoreTop10Chart.setOption(option);
$.ajax({
type: "post",
async: true,
url: "ashx/BookEvaluateAnal.ashx?m=BookScoreTop10",
dataType: "json", //返回数据形式为json
success: function (result) {
var list = $.makeArray(result.BookScore_Top10);
console.log(list);
if (result) {
console.log(list[].length);
var array = [];
var BookName = [];
for (var i = ; i < list.length; i++) {
BookName.push(list[i].BookName);
var map = {};
map.name = list[i].BookName;
map.value = list[i].PJScore;
array[i] = map;
}
console.log(array);
BookScoreTop10Chart.setOption(
{
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "horizontal",
left: "left",
data: BookName,
width:
},
visualMap: {
show: false,
min: ,
max: ,
inRange: {
colorLightness: [, ]
}
},
series: [
{
name: "教材综合得分",
type: "pie",
radius: "55%",
center: ["80%", "50%"],
data: array.sort(function (a, b) { return a.value - b.value }),
roseType: "angle",
label: {
normal: {
textStyle: {
color: "rgba(255, 255, 255, 0.3)"
}
}
},
labelLine: {
normal: {
lineStyle: {
color: "rgba(255, 255, 255, 0.3)"
},
smooth: 0.2,
length: ,
length2:
}
},
itemStyle: {
normal: {
//color: "#c23531",
color: function (params) {
// build a color map as your need.
var colorList = [
"#fd9bc4", "#fa98e6", "#e19af5", "#a8a8f8", "#a1d6f7",
"#8deff0", "#8df7d5", "#9bfaa8", "#d1fd68", "#f5c683",
"#fbb096", "#fc9292", "#f78ab3", "#f594e1", "#d992ed",
"#a8a8f8", "#a1d6f7", "#8deff0", "#8df7d5", "#fa9b9b"
];
return colorList[params.dataIndex];
}
}
},
animation: false,
animationType: "scale",
animationEasing: "elasticOut",
animationDelay: function (idx) {
return Math.random() * ;
}
}
]
});
var picInfo1 = BookScoreTop10Chart.getDataURL();
var imgobj1 = document.getElementById("Pie_BookScore_top10_Print");
if (imgobj1) {
imgobj1.src = picInfo1;
}
}
},
error: function (errorMsg) {
layer_msg_error("图表数据加载失败！", "");
}
});
}
js
↓这是折线图
<div class="zx-img" id="bar_BaoYouLv"></div>
aspx
function bar_BaoYouLv() {
barBaoYouLv = echarts.init(document.getElementById("bar_BaoYouLv"),
{
width: document.getElementById("bar_BaoYouLv").width
});
$.ajax({
type: "post",
async: true,
url: "ashx/BaoYouLvAnal.ashx?m=BaoYouLv_School",
dataType: "json", //返回数据形式为json
success: function(result) {
if (result) {
//console.log(result.BaoYouLvList);
//console.log(result.BaoYouLvList.xAxisData);
// 指定图表的配置项和数据
var option = {
title: {
text: ""
},
tooltip: {
trigger: "axis"
},
legend: {
data: ["教材订购数量"]
},
xAxis: {
type: "category",
boundaryGap: false,
axisLabel: {
interval: ,
rotate: ,
margin: ,
textStyle: {
fontSize:
}
},
data: result.BaoYouLvList.xAxisData
},
grid: {
bottom:
},
yAxis: [
{
type: "value",
axisLabel: {
show: true,
interval: "auto",
formatter: "{value} %"
},
show: true
}
],
series: [
{
name: "教材订购数量",
type: "line",
data: result.BaoYouLvList.seriesData,
markPoint: {
data: [
{ type: "max", name: "最大值" },
{ type: "min", name: "最小值" }
]
},
markLine: {
data: [
{ type: "average", name: "平均值" }
]
},
itemStyle: {
normal: {
color:'#57c0ea' ,
lineStyle:{
color:'#57c0ea'
}
,
//以下为是否显示，显示位置和显示格式的设置了
label: {
show: false,
position: "top",
// formatter: '{c}'
//formatter: '{b}\n{c}'
formatter: "{c} %" //百分比
}
}
}
}
]
};
barBaoYouLv.setOption(option);
var picInfo = barBaoYouLv.getDataURL();
var imgobj = document.getElementById("bar_BaoYouLv_Print");
if (imgobj) {
imgobj.src = picInfo;
}
}
},
error: function(errorMsg) {
layer_msg_error("图表数据加载失败！", "");
}
});
}
js
↓这是点阵图
<div class="zhu-img-4" id="Point_BKTime"></div>
aspx
var BKTimeChart;
function ShowBKTime_Point() {
BKTimeChart = echarts.init(document.getElementById('Point_BKTime'));
var option = {
grid: {
bottom:
},
tooltip: {
formatter: '{a}: ({c})'
},
xAxis: [
{ gridIndex: , min: , max: , name: '备课时长/天' } ],
yAxis: [
{ gridIndex: , min: , max: , name: '学生人数/人' }
],
series: []
};
BKTimeChart.setOption(option);
$.ajax({
type: "post",
async: true,
url: "ashx/BKTime.ashx?m=BKTime",
dataType: "json", //返回数据形式为json
success: function (result) {
var list = $.makeArray(result.BKTime);
console.log(list);
if (result) {
var array = [];
for (var i = ; i < list.length; i++) {
array[i] = [list[i].BKDays, list[i].ClassCount];
}
console.log(array);
BKTimeChart.setOption(
{
series: [
{
name: '学生人数和备课时长分析',
type: 'scatter',
xAxisIndex: ,
yAxisIndex: ,
data: array
}]
});
}
},
error: function (errorMsg) {
layer_msg_error("图表数据加载失败！", "");
}
});
}
js
Echarts学习笔记的更多相关文章
- echarts学习笔记(一)
echarts学习笔记(一) echarts开发步骤 创建一个新的html文件 在html文件head头部信息中导入echarts 声明一个容器(可以理解为画布),用于存放echarts 实例化ech ...
- Echarts学习笔记之饼图
注:ECHarts的相关文件请到ECharts官网下载,下载地址:http://echarts.baidu.com/download.html 1.前台 <div style="ali ...
- echarts学习笔记（部分angular及ant-design）
1.在项目中修改ng-zorro组件默认样式的一些方法: 类名等 前加::ng-deep: 类名等 前加:root: 类名等 前加:host /deep/: 2.echarts横轴自定义时间粒度 两种 ...
- vue中添加Echarts图表的使用，Echarts的学习笔记
项目中需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts(关于heightCharts请看我的另一篇 http://www.cnblogs.com/jasonwang2y60/ ...
- Webpack4 学习笔记四 暴露全局变量、externals
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 暴露全局变量 通过 expose-loader 内联配置 在 webpack中配置 每个模块通过注入的方式 通过CD ...
- amazeui学习笔记一（开始使用5）--藏品collections
amazeui学习笔记一(开始使用5)--藏品collections 一.总结 1.藏品collections:一些 Amaze UI 中没有的功能.amazeui认为好的解决方案.像图表绘制里面的百 ...
- Qlik Sense学习笔记之插件开发
date: 2019-05-06 13:18:45 updated: 2019-08-09 15:18:45 Qlik Sense学习笔记之插件开发 1.开发前的基础工作 1.1 新建插件 dev-h ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
随机推荐
- NSNull空值
1.前言 作为占据空间的一个空值,如用在数组或字典中占据一个没有任何值的空间. 1.1 NULL & nil 的区别: nil 是 OC 的,空对象,地址指向空的对象,指针地址指向的是 NUL ...
- History命令用法15例
以下内容为转载: 如果你经常使用 Linux 命令行,那么使用 history(历史)命令可以有效地提升你的效率.本文将通过实例的方式向你介绍 history 命令的 15 个用法. 使用 HISTT ...
- POI2011 Tree Rotations
POI2011 Tree Rotations 给定一个n<=2e5个叶子的二叉树,可以交换每个点的左右子树.要求前序遍历叶子的逆序对最少. 由于对于当前结点x,交换左右子树,对于范围之外的逆序对 ...
- 【RMQ】【Sparse_Table算法】
摘自网友,具体哪个忘记了,抱歉~ 定义: RMQ(Range Minimum/Maximum Query),即区间最值查询,是指这样一个问题: 对于长度为n的数列A,回答若干询问RMQ(A,i,j) ...
- ADX3000 三层网络 纠错
基于三层网络设计要点: 1 组网配置,两端LAN口,IP地址不同网段,设置主IP地址,当做网段内部的网关使用 2 接口域添加trust接口 3 静态IP,有且仅能有一条,目的IP 0.0.0.0 子网 ...
- C#静态类 转载:（原文：http://www.cnblogs.com/chenlulouis/ ）
静态类是不能实例化的,我们直接使用它的属性与方法,静态类最大的特点就是共享. 探究 public static class StaticTestClass{ public static int ...
- P1080 国王游戏
题意: 让n 位大臣排成一排,国王站在队伍的最前面. 排好队后,所有的大臣都会获得国王奖赏的若干金币, 每位大臣获得的金币数分别是:排在该大臣前面的所有人的左手上的数的乘积除以他自己右手上的数,然后向 ...
- Qt 学习之路 2（5）：自定义信号槽
Home / Qt 学习之路 2 / Qt 学习之路 2(5):自定义信号槽 Qt 学习之路 2(5):自定义信号槽 豆子 2012年8月24日 Qt 学习之路 2 131条评论 上一节我们详 ...
- django 访问静态资源
urlpatterns = patterns('', url(r'^$', views.show, name='index'), url(r'^static/(?P<path>.*)', ...
- 【笔记】MySQL的基础学习
[笔记]MySQL的基础学习 老男孩 MySQL 一 安装与配置 1 下载安装 官网:http://dev.mysql.com/downloads/mysql/ 下载相应版本的压缩包 解压压缩包至任 ...