Echart数据报表

应用场景：可视化报表统计

        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、效果展示：

    

本文转自 xinsir999 51CTO博客，原文链接：http://blog.51cto.com/xinsir/1930581，如需转载请自行联系原作者