Echarts学习笔记
Posted Vila_521
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 = 0; i < list.length; i++) { RXNJ.push(list[i].RXNJ); BookFee.push(list[i].NJCost); } // 指定图表的配置项和数据 var option = { title: { text: "" }, tooltip: {}, legend: { data: ["教材订购费用"] }, xAxis: [ { axisLabel: { interval: 0, rotate: 30, margin: 8 }, data: RXNJ, name:"年级" } ], grid: { bottom:80 }, 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("图表数据加载失败！", ""); } }); }
↓这是环形图
<h2 class="content-tit">本校各年级教材费用占比</h2> <div class="chart-box clearfix"> <div class="bing-img" id="Pie_BookFeeProp_RXNJ"></div> </div>
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: "20", 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[0].length); var RXNJ = []; var array = []; for (var i = 0; i < list.length; i++) { if (list[i].NJCost>0) { 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("图表数据加载失败！", ""); } }); }
↓这是饼状图
<div class="bing-img" id="Pie_GoodBookProp"></div>
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: 10, shadowOffsetX: 0, 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 = 0; for (var key in list[0]) { var map = {}; map.name = key; map.value = list[0][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("图表数据加载失败！", ""); } }); }
或者是饼状图的半径随着数据的不同而不同的
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[0].length); var array = []; var BookName = []; for (var i = 0; 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:40 }, visualMap: { show: false, min: 80, max: 600, inRange: { colorLightness: [0, 1] } }, 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: 10, length2: 20 } }, 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() * 200; } } ] }); var picInfo1 = BookScoreTop10Chart.getDataURL(); var imgobj1 = document.getElementById("Pie_BookScore_top10_Print"); if (imgobj1) { imgobj1.src = picInfo1; } } }, error: function (errorMsg) { layer_msg_error("图表数据加载失败！", ""); } }); }
↓这是折线图
<div class="zx-img" id="bar_BaoYouLv"></div>
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: 0, rotate: 30, margin: 8, textStyle: { fontSize: 12 } }, data: result.BaoYouLvList.xAxisData }, grid: { bottom: 80 }, 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("图表数据加载失败！", ""); } }); }
↓这是点阵图
<div class="zhu-img-4" id="Point_BKTime"></div>
var BKTimeChart; function ShowBKTime_Point() { BKTimeChart = echarts.init(document.getElementById(‘Point_BKTime‘)); var option = { grid: { bottom:80 }, tooltip: { formatter: ‘{a}: ({c})‘ }, xAxis: [ { gridIndex: 0, min: 0, max: 200, name: ‘备课时长/天‘ } ], yAxis: [ { gridIndex: 0, min: 0, max: 200, 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 = 0; i < list.length; i++) { array[i] = [list[i].BKDays, list[i].ClassCount]; } console.log(array); BKTimeChart.setOption( { series: [ { name: ‘学生人数和备课时长分析‘, type: ‘scatter‘, xAxisIndex: 0, yAxisIndex: 0, data: array }] }); } }, error: function (errorMsg) { layer_msg_error("图表数据加载失败！", ""); } }); }
以上是关于Echarts学习笔记的主要内容，如果未能解决你的问题，请参考以下文章