echarts 折线图基本使用

基本用法

// 图表配置项
option = {
  tooltip: {
    trigger: 'axis',
    // axisPointer: { type: 'cross' }
  },
  legend: {},
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      data: []
    }
  ],
  yAxis: [{
      type: 'value',
      name: '温度',
      axisLabel: {
        formatter: '{value} °C'
      }
    }],
  series: [
    {
      name: '数量一',
      type: 'line',
      // yAxisIndex: 0,
      areaStyle: {
        // 设置背景色
        color: 'pink',
        opacity: 0.5
      },
      data: [5, 20, 36, 10, 10, 20]
    },
    {
      name: '数量二',
      type: 'line',
      data: [5, 10, 16, 10, 10, 10]
    }
  ]
};

option.xAxis[0].data = ['五月', '六月', '七月', '八月', '九月', '十月']
myChart.setOption(option);

图表数据更新后不能渲染的问题

// 由于容器上已经有  `_echarts_instance_` ，还是上次的，
// 所以Echarts是不会重新初始化的，
// 需要手动将DOM上的 `_echarts_instance_`  属性移除， 再次进行初始化， 然后setOption
$('#main').removeAttr('_echarts_instance_');
myChart.setOption(option);