vue2.0 绘制图表

** 插件：ECharts ^3.0 **

• npm 安装 ECharts
  你可以使用如下命令通过npm 安装 ECharts
  ** npm install echarts --save **

---

• 创建图表
  在HTML页面中创建图表的容器，** 图表必须指定宽高 ，不能用百分比**

<div class="chart" ref="charts"></div>
<style lang="css">
  .chart {width: 300px; height: 300px;}
</style>

---

• 引入 ECharts

import echarts from 'echarts'
export default {
    data () {
      return {
        Charts: '',
        xData: '',
        yData: ''
      }
    },
    methods: {
      drawChart () {
        // echarts实例化
        this.Charts = echarts.init(this.$refs.charts)
        // 初始化实例
        var option = {
          // 图表所需配置项(可参考http://echarts.baidu.com/option.html#title)
          tooltip: {...},
          grid: {...},
          xAxis: [
              {
                  type: 'category',
                  data: [],
                  axisTick: {
                      alignWithLabel: true
                  }
              }
          ],
          yAxis: [
              {
                  name: '(Kcal)',
                  type: 'value'
              }
          ],
          series: [
              {
                  name: '总能量',
                  type: 'bar',
                  barWidth: '60%',
                  data: []
              }
          ]
        }
        this.Charts.setOption(option)
      },
      // 渲染数据，在**接口调用完调用该函数**
      loadChart () {
        this.chart.setOption({
        xAxis: [{
          data: this.xData // xData 从接口获取的横轴数据
        }],
        series: [{
          // 根据名字对应到相应的系列
          data: this.yData // yData 从接口获取的纵轴数据
        }]
      })
      }
    },
    mounted () {
      this.drawChart()
    }
}