ECharts折线图-BeijingAQI.rar资源-CSDN文库

共4个文件

js：2个

json：1个

html：1个

统计分析

需积分: 5 25 浏览量 2024-09-15 06:51:24 上传评论收藏 881KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

ECharts折线图-Beijing AQI.rar （4个子文件）

图表

lib

5.5.0

echarts.js 3.21MB

echarts.min.js 1005KB

index.html 4KB

images

json

aqi-beijing.json 112KB

<!doctype html> <html> <head> <meta charset="utf-8"> <style> #chart-panel { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 1000px; height: 750px; } </style> <script src="./lib/5.5.0/echarts.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <div id="chart-panel"></div> <script type="text/javascript"> //初始化图表对象。 var myChart = echarts.init(document.getElementById('chart-panel')); //图表配置。 $.get('./json/aqi-beijing.json', function (data) { let option = { title: { text: 'Beijing AQI', left: '1%' }, tooltip: { trigger: 'axis' }, grid: { left: '5%', right: '15%', bottom: '10%' }, xAxis: { data: data.map(function (item) { return item[0]; }) }, yAxis: {}, toolbox: { right: 10, feature: { restore: {}, saveAsImage: {} } }, dataZoom: [ { startValue: '2014-06-01' }, { type: 'inside' } ], visualMap: { top: 50, right: 10, pieces: [ { gt: 0, lte: 50, color: '#93CE07' }, { gt: 50, lte: 100, color: '#FBDB0F' }, { gt: 100, lte: 150, color: '#FC7D02' }, { gt: 150, lte: 200, color: '#FD0100' }, { gt: 200, lte: 300, color: '#AA069F' }, { gt: 300, color: '#AC3B2A' } ], outOfRange: { color: '#999' } }, series: { name: 'Beijing AQI', type: 'line', data: data.map(function (item) { return item[1]; }), markLine: { silent: true, lineStyle: { color: '#333' }, data: [ { yAxis: 50 }, { yAxis: 100 }, { yAxis: 150 }, { yAxis: 200 }, { yAxis: 300 } ] } } } //将图表对象和图表配置进行关联。 myChart.setOption(option); }); </script> </body> </html>

评论收藏

内容反馈