ECharts折线图渲染json格式数据(json格式，为数组)
需要对数组进行循环取值，将取到的值分别赋值给x轴和y轴
json格式，data为数组
{ "msg": "查询成功", "code": 1, "data": [{ "statTime": "2021-03", "noPatrolNum": 21 }, { "statTime": "2021-04", "noPatrolNum": 15 }] }
demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" class="col-md-12 col-sm-12 col-xs-12" style="height: 400px;"></div> <script> // 折线图 var names = []; //类别数组(实际用来盛放X轴坐标值) var series = []; $.ajax({ url: "test.json", data: {}, type: 'GET', success: function(data) { //请求成功时执行该函数内容，data即为服务器返回的json对象 $.each(data.data, function(index, item) { names.push(item.statTime); //挨个取出类别并填入类别数组 series.push(item.noPatrolNum); }); hFun(names, series); }, }); // 心率 var hrChart = echarts.init(document.getElementById("main")); function hFun(x_data, y_data) { hrChart.setOption({ color: ['#1e63d8'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { data: ['漏检次数'] }, grid: { left: '3%', right: '20%', bottom: '20%', containLabel: true }, xAxis: { splitLine: { show: false }, /* 改变x轴颜色 */ axisLine: { lineStyle: { color: '#00a2e2', width: 1, // 这里是为了突出显示加上的 } }, type: 'category', data: x_data, }, yAxis: { // 纵轴标尺固定 splitLine: { show: false }, type: 'value', scale: true, name: '漏检次数', min: 0, // 就是这两个 最小值 max: 'dataMax', // 最大值 splitNumber: 10, /* 改变y轴颜色 */ axisLine: { lineStyle: { color: '#00a2e2', width: 1, // 这里是为了突出显示加上的 } }, boundaryGap: [0.2, 0.2] }, series: [{ name: '漏检次数', type: 'line', symbol: 'circle', // 折线点设置为实心点 symbolSize: 6, // 折线点的大小 itemStyle: { normal: { color: "#1bdaf8", // 折线点的颜色 lineStyle: { color: "#0d427e" // 折线的颜色 } } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#0e4b7a" // 0% 处的颜色 }, { offset: 0.6, color: "#0d3f70" // 60% 处的颜色 }, { offset: 1, color: "#0c3367" // 100% 处的颜色 }], false) } }, data: y_data }] }, true); } </script> </body> </html>
