码迷,mamicode.com
首页 > 其他好文 > 详细

echarts使用

时间:2019-01-24 16:37:59      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:als   api   官方   element   echarts   toolbox   bsp   series   gen   

看官方文档时看配置项比api更直观

html:

<div id="main"></div>

 

js:

var myChart = echarts.init(document.getElementById(‘main‘));
option = {
  tooltip: {
    trigger: ‘axis‘
  },
  legend: {
    data: [‘进口总量(kg)‘, ‘进口总额(美元)‘, ‘出口总量(kg)‘, ‘出口总额(美元)‘]
  },
  grid: {
    left: ‘30‘,
    right: ‘60‘,
    bottom: ‘60‘,
    containLabel: true
  },
  toolbox: {
    show: true,
    feature: {
    dataZoom: {
      yAxisIndex: false
    },
    saveAsImage: {
      show: true,
    }
  },
  right: 30
},
  calculable: true,
  dataZoom: {
    show: true,
    realtime: true,
    start: 0,
    end: 100,
  },
  xAxis: {
    type: ‘category‘,
    boundaryGap: false,
    data: [‘2017-6‘, ‘2017-7‘, ‘2017-8‘, ‘2017-9‘, ‘2017-10‘, ‘2017-11‘, ‘2017-12‘]
  },
  yAxis: {
    type: ‘value‘
  },
  series: [{
    name: ‘进口总量(kg)‘,
    type: ‘line‘,
    color: [‘#ff7f50‘],
    data: [120, 132, 101, 134, 90, 230, 210]
  },
  {
    name: ‘进口总额(美元)‘,
    type: ‘line‘,
    color: [‘#87cefa‘],
    data: [220, 182, 191, 234, 290, 330, 310]
  },
  {
    name: ‘出口总量(kg)‘,
    type: ‘line‘,
    color: [‘#da70d6‘],
    data: [150, 232, 201, 154, 190, 330, 410]
  },
  {
    name: ‘出口总额(美元)‘,
    type: ‘line‘,
    color: [‘#32cd32‘],
    data: [320, 332, 301, 334, 390, 330, 320]
  },
]
};
myChart.setOption(option);

echarts使用

标签:als   api   官方   element   echarts   toolbox   bsp   series   gen   

原文地址:https://www.cnblogs.com/wszxx/p/10314888.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!