本文共 1518 字，大约阅读时间需要 5 分钟。
应用场景：可视化报表统计
1、引入echart.js(可以去官方下载)
2、js代码写入
category 代表分类（日期）以数组的形式传入
price 代表价格 以数组的形式传入
num 代表单量 数组的形式传入
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | // 基于准备好的dom，初始化echarts图表 function chart(category,price,num){ var myChart = echarts.init(document.getElementById( 'main' )); var option = { title : { text: '交易数据' , }, tooltip : { trigger: 'axis' , }, legend: { data:[ '价格' , '单量' ] }, toolbox: { show : true , feature : { magicType : {show: true , type: [ 'line' , 'bar' ]}, dataView : {show: true , readOnly: false }, restore : {show: true }, saveAsImage : {show: true }, } }, calculable : false , xAxis : [ { type : 'category' , data : category, splitLine:{show: false } } ], yAxis : [ { type : 'value' } ], series : [ { name: '价格' , type: 'bar' , itemStyle: { normal: { color: '#b294d2' , barBorderRadius:[5, 5, 0, 0] } }, data:price, }, { name: '单量' , type: 'bar' , itemStyle: { normal: { color: '#7ac9ea' , barBorderRadius:[5, 5, 0, 0] } }, data:num, } ] }; myChart.setOption(option); } |
3、如果分类的数据比较多的话建议加横向滚动条
| 1 2 3 4 5 6 7 8 9 10 | dataZoom: { orient: "horizontal" , //水平显示 show: true , //显示滚动条 start:0, //起始值为0% end:100 , //结束值为40% height:30, backgroundColor: 'rgba(188,188,188,0.3)' , dataBackgroundColor: 'rgba(0,138,205,0.5)' , fillerColor: 'rgba(94,135,176,0.5)' , }, |
4、效果展示：