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. 整体架构图 ...
随机推荐
- OC 语言新特性
前言 相对于 Java,OC 语言是一门古老的语言了,而它又是一门不断发展完善的语言.一些新的编译特性,为 OC 语言带来了许多新的活力. 在 Xcode7 中,iOS9 的 SDK 已经全面兼容了 ...
- luogu p4174 最大获利（最大权闭合子图）
luogu p4174 最大获利(最大权闭合子图) 给定n个点,m条边,每条边有一个贡献,每个点有一个代价.选择一条边,会付出边所连两个点的代价,问最大代价. 我们换个建图方式:把图G中的边\(e_i ...
- Python——用os模块寻找指定目录(包括子目录)下所有图片文件
import os # 导入os模块 def search_file(start_dir): img_list = [] extend_name = ['.jpg', '.png', '.gif'] ...
- vue.js路由学习笔记
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- python 字符串 操作
去空格及特殊符号 s.strip().lstrip().rstrip(',') 复制字符串 #strcpy(sStr1,sStr2) sStr1 = 'strcpy' sStr2 = sStr1 sS ...
- IT网址大全
图像处理 [素材] 在线作图 [素材] 思缘设计论坛 [素材] ps联盟 [素材] ps学习网 [素材] ps教程论坛 [素材] ps爱好者 [素材] 46ps [素材] ...
- jq方法（end）
.end()方法: 使得结果集可以后退一步 $('div') .find('h3') .eq() .html('hello') .end()//退回到选中所有的h3元素的那一步 .eq()//选中第一 ...
- 爬虫初识和request使用
一.什么是爬虫 爬虫的概念: 通过编写程序,模拟浏览器上网,让其去互联网上爬取数据的过程. 爬虫的工作流程: 模拟浏览器发送请求->下载网页代码->只提取有用的数据->存放于数据库或 ...
- AnnotationConfigApplicationContext
package com.test; import java.io.IOException; import java.io.InputStream; import java.net.URL; impor ...
- Sqlite和mysql的区别及优缺点
小型嵌入式,跟mysql差不多,但更小,功能也少,属于本地数据库多用于读多写少,100W以下的数据压力不大,不支持分布式. 真正开源的小型嵌入式数据库,支持事务.触发器器 性能至少优于mysql ...