【围观】麒麟芯片遭打压成绝版，华为亿元投入又砸向了哪里？>>>
项目中的数据统计分析会采用图形图表来展示，这里就会用到 ECharts 了， ECharts 是一款由百度前端技术部开发的，基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。 最重要免费开源而且用起来简单易上手 ，对于我们来说是个不错的选择，下面我分享下 ECharts 的使用，希望对你有帮助。
我上一篇博客讲了 百度 UEditor 有兴趣可以看下 UEditor 富文本编辑器的使用
1、下载插件
官网地址： https://www.echartsjs.com/zh/index.html
下载地址： https://www.echartsjs.com/zh/download.html
2、引入插件
下载完成之后导入到项目中

通过标签方式直接引入构建好的 echarts 文件 <script th:src="@{/js/echarts/echarts.min.js}"></script>
3、使用 ECharts 简单实现图表
首先在页面准备一个 具备高宽的 DOM 容器 <!-- 图表插件 --> <div id="main" style="width: 100%; height: 500px;"></div>
然后使用 ajax 异步请求接口动态加载数据，可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的折线图，后端代码很简单，就不贴出来了，图表数据格式需要前后端提前定义好哦，直接上前端代码如下。 $.ajax({ url : '/test/getjson', type : 'POST', contentType : "application/json;charset-utf-8", dataType : 'json', data : {}, success : function(result) { if (result.code != 200) { console.log("图表请求数据失败", result); } else { var dataX = []; // 放X轴坐标值 var dataY1 = []; // 放Y坐标值 var dataY2 = []; // 放Y坐标值 if (result.data.length == 3) { var res0 = result.data[0] var res1 = result.data[1] var res2 = result.data[2] for (var i = 0; i < res0.length; i++) { // 取出x轴--时间 dataX.push(res0[i]); } for (var j = 0; j < res1.length; j++) { // 取出y轴--数据 dataY1.push(res1[j]); } for (var k = 0; k < res2.length; k++) { // 取出y轴--数据 dataY2.push(res2[k]); } } else { var res0 = result.data[0] for (var i = 0; i < res0.length; i++) { // 取出x轴--时间 dataX.push(res0[i]); } } // 调用制表函数，并把获取到的值传递过去 getChart(dataX, dataY1, dataY2); } }, error : function(errorMsg) { // 请求失败时执行该函数 console.log("图表请求数据失败!"); } }); function getChart(dataX, dataY1, dataY2) { //通过 echarts.init 方法初始化一个 echarts 实例 var myChart = echarts.init(document.getElementById('main')); myChart.showLoading(); // 数据加载完之前先显示一段简单的loading动画 var option = { grid : { bottom : 70, left : 60, right : 60 }, tooltip : { trigger : 'axis' }, dataZoom : [ { type : 'slider', show : true, realtime : true, start : 0, end : 100 }, { type : 'inside', show : true, realtime : true, start : 0, end : 100 } ], // 图例组件 legend : { padding : [ 0, 0, 20, 0 ], data : [ '洗车量', '实收' ], itemGap : 30, itemWidth : 70, itemHeight : 12, right : 12, top : 'top ', }, xAxis : { data : dataX, axisLine : { lineStyle : { color : '#E9E9E9' } }, axisTick : { lineStyle : { color : '#E9E9E9' } }, axisLabel : { color : '#555658' } }, yAxis : [ { name : '订单量\n单位：笔', nameTextStyle : { color : '#555658', fontSize : 12, align : 'left' }, axisLabel : { color : '#555658', fontSize : 12 }, axisLine : { show : false }, axisTick : { length : 0 }, splitLine : { lineStyle : { type : 'dashed' } } }, { name : '实收\n单位：元', nameTextStyle : { color : '#666666', fontWeight : 'blod', fontSize : 12, align : 'left' }, axisLabel : { color : '#555658', fontSize : 12 }, axisLine : { show : false }, axisTick : { length : 0 }, splitLine : { lineStyle : { type : 'dashed' } } } ], series : [ { name : '订单量', type : 'line', data : dataY1, yAxisIndex : 0, symbol : 'circle', symbolSize : 9, // 拐点标志样式 itemStyle : { normal : { color : '#52C41A', lineStyle : { color : '#52C41A', width : '3' }, areaStyle : { type : 'default' } } }, // 渐变橙白 areaStyle : { normal : { color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset : 0, color : 'rgba(82,196,26,0.2)' }, { offset : 0.8, color : 'rgba(255,255,255,0.2)' } ]) } } }, { name : '实收', type : 'line', data : dataY2, yAxisIndex : 1, symbol : 'circle', symbolSize : 9, // 拐点标志样式 itemStyle : { normal : { color : '#2B9BF8', lineStyle : { color : '#2B9BF8', width : '3' }, areaStyle : { type : 'default' } } }, // 渐变蓝白 areaStyle : { normal : { color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset : 0, color : 'rgba(189,221,248,1)' }, { offset : 0.8, color : 'rgba(255,255,255,0.2)' } ]) } } } ] }; // 隐藏加载动画 myChart.hideLoading(); // 清除上一次数据缓存 myChart.clear(); // 开始制图 myChart.setOption(option); }
4、效果图如下

实现起来很简单，具体的需要根据自己的需求开发了，希望对你有帮助。
参照官网 demo 地址： https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts