ECharts折线图-阶梯折线图.rar

共3个文件

js：2个

html：1个

统计分析

数据可视化

大屏可视化

需积分: 5 0 下载量 30 浏览量 2024-09-15 06:51:27 上传评论收藏 863KB RAR 举报

温馨提示

图表效果及代码实现讲解链接：https://blog.csdn.net/zhangjiujiu/article/details/142155157

资源推荐

资源详情

资源评论

收起资源包目录

ECharts折线图-阶梯折线图.rar （3个子文件）

图表

lib

5.5.0

echarts.js 3.21MB

echarts.min.js 1005KB

index.html 2KB

images

json

共 3 条

<!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> </head> <body> <div id="chart-panel"></div> <script type="text/javascript"> //初始化图表对象。 var myChart = echarts.init(document.getElementById('chart-panel')); //图表配置。 let option = { title: { text: 'Step Line' }, tooltip: { trigger: 'axis' }, legend: { data: ['Step Start', 'Step Middle', 'Step End'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { name: 'Step Start', type: 'line', step: 'start', data: [120, 132, 101, 134, 90, 230, 210] }, { name: 'Step Middle', type: 'line', step: 'middle', data: [220, 282, 201, 234, 290, 430, 410] }, { name: 'Step End', type: 'line', step: 'end', data: [450, 432, 401, 454, 590, 530, 510] } ] }; //将图表对象和图表配置进行关联。 myChart.setOption(option); </script> </body> </html>

评论收藏

内容反馈