在Vue中使用Echarts之實現簡單柱狀圖

所需工具: Vue + Vue CLI + Echarts

第一步，初始化Vue項目&引入Echarts

1.使用Vue CLi構建Vue項目，並引入Echarts，引入方式見官網
在這裏用npm的方式引入:

npm install echarts --save

第二步，如果上述步驟沒出啥意外，就可以在Vue項目中愉快的使用Echarts了;-)

現在開始嘗試實現官網給出的柱狀圖示例。

1.在script裏引入echarts

import echarts from 'echarts'

2.在data初始化一個Echarts示例並配置option

data() {
      return {
        chart: null,
        option:  {
            title: {
                text: 'Biu~簡單柱狀圖示例'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }],
            color: ['#66FF99']
        }
      }

關於option的配置項說明:

• title: 標題組件，包含主標題和副標題。
• tooltip: 提示框組件
• legend: 圖例組件
• xAxis: 直角座標系 grid 中的 x 軸
• yAxis: 直角座標系 grid 中的 y 軸
• series: 系列列表,具體設置圖標項的樣式，圖形展示類型等。

3.接下來就是模板裏的內容了，寫一個極簡的例子,創建一個div,並綁定ref

 <div ref="echarts">
  </div>

4.如何將模板和寫好的option實例綁定起來呢，這時候就需要用到Echarts提供的API啦
（1）調用init()API,創建一個 ECharts 實例
（2）調用setOption()API,設置圖表實例的配置項以及數據

methods: {
      getPage() {
        this.chart = echarts.init(this.$refs.echarts);
        // 使用剛指定的配置項和數據顯示圖表。
        this.chart.setOption(this.option);
      }
    }

5.到此，一個簡單的Echarts柱狀圖就完成啦~

​

未完待續;-)

需要查看源碼請移步我的github: Echarts-Demos