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. 整体架构图 ...
随机推荐
- （Delphi）第一个Windows 32 API的窗口程序
program Project1; uses Winapi.Windows, Winapi.messages; {$R *.res} const className = 'MyDelphiWindow ...
- 计算机上配置 IP地址，子网掩码，默认网关
The Internet Assigned Numbers Authority (IANA) has reserved the following three blocks of the IP add ...
- es数据增删改查
设置最大查询条数 curl -XPUT 'http://10.121.8.5:9200/zdl_mx_shzt_ztdf/_settings' -d'{"index":{" ...
- Hyper-V 配置虚拟机内网及外网环境
一.为Hyper-V虚拟机准备内外网环境 1.内网环境——虚拟机与虚拟机及主机可以互通
- 《图解HTTP》阅读笔记--第六章--HTTP首部
第六章.HTTP首部 <非常重要且恐怖的一章了> HTTP报文=报文首部+(CR+LF)+报文实体 首部字段:HTTP报文首部字段=(首部字段名:字段值)们---类型*4: 通用首部字段( ...
- VUE使用微信JDK（附踩坑记录）
VUE使用微信分享SDK(附踩坑记录) 微信分享官方文档 安装JS-SDK npm i -S weixin-jsapi 引入包 ES5 写法 const wx = require('weixin-js ...
- zabbix监控nginx进程
确认nginx有没有安装模块 然后在主站点下添加(二级站点) location /NginxStatus { stub_status on; access_log off; allow 127.0.0 ...
- html 一些坑。。。
margin-left 和 margin-right 才能够使用 auto top 和 bottom 不可以 在网页设计中...通常给img 父容器 一个 宽度...同时 ,指定 img width= ...
- 1047 邮票面值设计 （DFS+DP)
题目描述 Description 给定一个信封,最多只允许粘贴N张邮票,计算在给定K(N+K≤40)种邮票的情况下(假定所有的邮票数量都足够),如何设计邮票的面值,能得到最大值MAX,使在1-MAX之 ...
- STL之set（唯一且有顺序）
set作为一个容器也是用来存储同一数据类型的数据类型,并且能从一个数据集合中取出数据, 在set中每个元素的值都唯一,而且系统能根据元素的值自动进行排序.应该注意的是set中数元素的值不能直接被改变. ...