vue echart的使用

獲取ECharts

你可以通過以下幾種方式獲取 ECharts。

• 從 Apache ECharts (incubating) 官網下載界面 獲取官方源碼包後構建。
• 在 ECharts 的 GitHub 獲取。
• 通過 npm 獲取 echarts，npm install echarts --save，詳見“在 webpack 中使用echarts
• 通過 jsDelivr 等 CDN 引入

引入ECharts

import echarts from "echarts";

繪製一個簡單的圖表

在繪圖前我們需要爲 ECharts 準備一個具備高寬的 DOM 容器。

<template>
  <div id="app">
    <div id="main" style="width:600;height:400px"></div>
  </div>
</template>

然後就可以通過 echarts.init 方法初始化一個 echarts 實例並通過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼。

<script>
import echarts from "echarts";
export default {
  name: "App",
  data() {
    return {
      option: {
        title: {
          text: "ECharts 入門示例"
        },
        tooltip: {},
        legend: {
          data: ["銷量"]
        },
        xAxis: {
          data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
        },
        yAxis: {},
        series: [
          {
            name: "銷量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
    };
  },
  methods: {
    drawPid(id) {
      // 基於準備好的dom，初始化echarts實例
      var myChart = echarts.init(document.getElementById("main"));
      // 使用剛指定的配置項和數據顯示圖表。
      myChart.setOption(this.option);
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.drawPid("main");
    });
  }
};
</script>

這樣你的第一個圖表就誕生了！