admin 插件资讯 2022-12-11

前端图表插件ECharts入门教程

引起我使用ECharts的起因，最近一个老项目的图表功能不可使用了，发现是客户的电脑中没有安装flash插件，导致原有的图表控件功能无法加载动画展示数据图表。于此，决定改造该项目的图表插件，而选择ECharts的原因是它是一款开源的，兼容多种浏览器的，底层只依赖轻量级矢量图形库的图表插件。

ECharts的特性

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

丰富的可视化类型

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

多种数据格式无需转换直接使用千万数据的前端展现移动端优化多渲染方案，跨平台使用深度的交互式数据探索多维数据的支持以及丰富的视觉编码手段动态数据，可在时间状态上选择合适动画

。。。。。。

ECharts的下载

官网:Apache ECharts(PS:ECharts 目前正在 Apache 软件基金会孵化,所以之前的域名已经不再使用了)

学习推荐大家下载源代码，源代码里面包含了所有图表组件以及常见的警告和错误。若在项目中使用则可以根据需求选择合适的个性化定制。

ECharts的快速使用

这里我们可以查看帮助文档:快速上手 – Handbook – Apache ECharts

下面通过一个小demo来带大家快速上手一个例子，成功实现一个demo可以帮助大家积极学习。

第一步、先引入js支持 echarts.js

下载地址:JavawebJavaScriptEChartecharts.js图表插件-Javascript文档类资源-CSDN下载

第二步、建一个前端页面(这里我用jsp做演示，ajax请求的数据，当然也可以在页面中定义变量将第三步的报文赋值给变量即可。)

Tips：图表里面的数据也是可以自定义的，若想通过ajax请求过来的数据渲染，直接在ajax的回调函数里面直接给option赋值或者修改也可以。

var myChart; function initComplete(){ myChart = echarts.init(document.getElementById(‘div_chart_bar’)); myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画 getChartData(); } function makeBarChart(x, y) { myChart = echarts.init(document.getElementById(‘div_chart_bar’)); //3.初始化，默认显示标题，图例和xy空坐标轴 var option = { tooltip: { trigger: ‘axis’,// 背板顶线 axisPointer: { type: ‘shadow’// 背板线改背板条 } }, legend: {}, // 图表边框样式(四周padding) grid: { left: ‘3%’, right: ‘4%’, bottom: ‘3%’, containLabel: true }, // 工具栏 toolbox: { show : false,// 是否展示 feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: [‘line’, ‘bar’]}, restore : {show: true}, saveAsImage : {show: true} } }, // x轴 xAxis: x, // y轴 yAxis: [ { type: ‘value’ } ], // 数据集 series: y }; myChart.setOption(option);// 加载样式 } // 获取数据 function getChartData() { var names = []; //用来展示于x轴 var nums = []; //用来展示于y轴series数据 $.ajax({ url: ‘/charts/findBarChartData.do’, // 替换自己的url路径 type: ‘POST’, async: true, data: {}, dataType: ‘json’, success: function(results){ if (results.res) { if (results.eChart && results.eChart.xAxis) { names.push({ type: results.eChart.xAxis[‘type’], data: results.eChart.xAxis[‘data’] }); } else { top.Dialog.alert(“图表数据异常”); } if (results.eChart && results.eChart.EChartSeriesList) { for (var i = 0; i < results.eChart.EChartSeriesList.length; i++) { nums.push({ name: results.eChart.EChartSeriesList[i].name, type: results.eChart.EChartSeriesList[i].type, stack: results.eChart.EChartSeriesList[i].stack, emphasis: results.eChart.EChartSeriesList[i].emphasis, data: results.eChart.EChartSeriesList[i].data }); } } else { top.Dialog.alert("图表数据异常"); } var x = names; var y = nums; makeBarChart(x, y);// 装载图表 } myChart.hideLoading();// 隐藏加载动画 }, error: function(){ } }); } 柱状图

第三步、后端报文(下面是模拟的数据报文)

{ “eChart”: { “EChartSeriesList”: [ {“data”:[“75″,”155″,”165″,”45″,”125″,”95″,”15″,”55″,”45″,”105″],”emphasis”:{“focus”:”series”},”type”:”bar”,”name”:”客户1″,”stack”:””}, {“data”:[“95″,”195″,”125″,”35″,”165″,”155″,”65″,”25″,”35″,”15″],”emphasis”:{“focus”:”series”},”type”:”bar”,”name”:”客户2″,”stack”:””}, {“data”:[“25″,”115″,”95″,”25″,”135″,”25″,”95″,”25″,”155″,”165″],”emphasis”:{“focus”:”series”},”type”:”bar”,”name”:”客户3″,”stack”:””} ], “xAxis”: { “data”:[“2022-11-10″,”2022-11-11″,”2022-11-12″,”2022-11-13″,”2022-11-14″,”2022-11-15″,”2022-11-16″,”2022-11-17″,”2022-11-18″,”2022-11-19”], “type”:”category” }, “yAxis”:null }, “res”:true, “message”:”获取数据成功”}

第四步、运行前端页面，这时，图表就可以展示了，怎么样，是不是很有成就感