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. 整体架构图 ...
随机推荐
- HBase - 安装过程中的问题
问题1:启动时start-hbase.sh 报 权限不够 原因:在移动文件时,使用root用户在/usr/local下创建的hbase,所以hbase文件夹的使用者为root,其他人没权限 解决方案: ...
- [C++11]shared_ptr循环引用导致内存泄露
1 /* 2 * shared_ptr循环引用导致内存泄露 3 */ 4 5 struct A 6 { 7 shared_ptr<A> ptr; // 改为weak_ptr<A> ...
- CAT部署集成文档
1. 下载编译 1.1 下载源码 首先,到项目的git网页下载整个项目: https://github.com/dianping/cat 1.2 打包安装 接着就是进入这个项目的目录,运行打包安装命 ...
- SysPeek打不开解决方法
SysPeek 是Linux平台下一款简洁小巧的系统状态指示软件,可实时显示 CPU.Memory.Swap.硬盘和网络使用情况.然而最近却使用不了,打不开.无论点击图标或者是终端打开,都不显示.看错 ...
- atcoder 2643 切比雪夫最小生成树
There are N towns on a plane. The i-th town is located at the coordinates (xi,yi). There may be more ...
- CF1101A Minimum Integer 模拟
题意翻译 题意简述 给出qqq组询问,每组询问给出l,r,dl,r,dl,r,d,求一个最小的正整数xxx满足d∣x d | x\ d∣x 且x̸∈[l,r] x \not\in [l,r]x̸∈[l ...
- 使用windows服务修改CPU型号（重启依然有效）
此项目基于.net framework 4.0 效果如下: 服务运行前: 服务运行后: 思路大概是这样: 通过修改注册表可以修改CPU型号,把服务设置成本地服务,并且开机自动启动,来实现开机自动修改处 ...
- Django 07 Django模型基础2 （常用查询和多表关联）
Django 07 Django模型基础2 (常用查询和多表关联) 一.常用查询 #查找数据 def search_user(request): #获取 rs = User.objects.first ...
- P3613 睡觉困难综合征（码力）
Luogu3613 实现细节较多,详见代码 #include<cstdio> #include<iostream> #include<cstring> #inclu ...
- Experimental Educational Round: VolBIT Formulas Blitz N
Description The Department of economic development of IT City created a model of city development ti ...