前言：在vue2.0中使用百度echarts有三種解決方案。

一、原始方法直接使用

這樣每次都要獲取圖表dom元素 然後通過setOption渲染資料，最後在mounted中初始化。很麻煩。

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

<script>
import echarts from "echarts";

export default {
  methods: {
    typeChart() {
      // 基於準備好的dom，初始化echarts例項
      let typeChart = echarts.init(document.getElementById("typeChart"));
      // 指定圖表的配置項和資料
      let option = {
        color: ["red"],
        title: {
          text: "型別統計"
        },
        tooltip: {},
        legend: {
          data: ["檢測車輛"]
        },
        xAxis: {
          data: ["中原區", "二七區", "金水區", "上街區", "中牟縣", "經開區","高新區"]
        },
        yAxis: {},
        series: [
          {
            name: "檢測車輛",
            type: "bar",
            barWidth: 20,
            data: [50, 100, 200, 300, 400, 500, 600],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#67B6FF" }, //柱圖漸變色
                  { offset: 0.5, color: "#44C0C1" }, //柱圖漸變色
                  { offset: 1, color: "#06B5D7" } //柱圖漸變色
                ])
              }
            }
          }
        ]
      };
      // 使用剛指定的配置項和資料顯示圖表。
      typeChart.setOption(option);
    },
    brandChart() {
      // 基於準備好的dom，初始化echarts例項
      let brandChart = echarts.init(document.getElementById("brandChart"));
      // 指定圖表的配置項和資料
      let option = {
        color: ["red"],
        title: {
          text: "品牌資訊"
        },
        tooltip: {},
        legend: {
          data: ["檢測車輛"]
        },
        xAxis: {
          data: ["中原區", "二七區", "金水區", "上街區", "中牟縣", "經開區","高新區"]
        },
        yAxis: {},
        series: [
          {
            name: "檢測車輛",
            type: "bar",
            barWidth: 20,
            data: [50, 140, 200, 300, 400, 500, 400],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#67B6FF" }, //柱圖漸變色
                  { offset: 0.5, color: "#44C0C1" }, //柱圖漸變色
                  { offset: 1, color: "#06B5D7" } //柱圖漸變色
                ])
              }
            }
          }
        ]
      };
      // 使用剛指定的配置項和資料顯示圖表。
      brandChart.setOption(option);
    }
  },
  mounted() {
    this.typeChart();
    this.brandChart();
  }
};
</script>
 

二、使用vue-echarts

vue-echarts是ECharts 的 Vue.js 元件，基於 ECharts v4.1.0+ 開發，依賴 Vue.js v2.2.6+，意思就是可以直接把echarts例項當中vue中的元件來使用，不用每次都獲取dom、掛在dom，輕鬆使用echarts的所用功能。。。

npm（安裝）

$ npm install echarts vue-echart

main.js中引入

import ECharts from 'vue-echarts'
// 註冊全域性的元件
Vue.component('vChart', ECharts)

使用

<template>
  <div class="page">
    <el-card>
      <!-- 柱狀圖+折線圖 -->
      <vChart class="chart3" :options="barOptions" />
      <!-- 餅狀圖 -->
      <el-row class="chart4" type="flex" justify="space-between">
        <el-col :span="8" class="chart">
          <vChart class="chart4_1" :options="piesOptions" />
        </el-col>
        <el-col :span="8" class="chart">
          <vChart class="chart4_1" :options="piesOptions" />
        </el-col>
        <el-col :span="8" class="chart">
          <vChart class="chart4_1" :options="piesOptions" />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      barOptions: {
        color: ["#5094FF", "#64DAAC", "#FAC84A"],
        grid: {
          top: "15%",
          bottom: "20%",
          right: "5%",
          left: "5%"
        },
        tooltip: {},
        legend: {
          data: ["合格數", "超標數", "合格率", "超標率"],
          top: "0"
        },
        xAxis: {
          type: "category",
          data: ["04-13", "04-14", "04-15", "04-16", "04-17", "04-18", "04-19"]
        },
        yAxis: {
          // name: '合格率(%)',
          // nameLocation: 'middle',
          type: "value"
          // nameTextStyle: {
          //   fontSize: '0.072917rem',
          //   color: '#999999'
          // }
        },
        series: [
          {
            name: "合格數",
            type: "bar",
            barWidth: "15%",
            barGap: "5%",
            data: [20, 232, 441, 654, 770, 530, 410]
          },
          {
            name: "超標數",
            type: "bar",
            barWidth: "15%",
            data: [120, 482, 791, 834, 590, 930, 710]
          },
          {
            name: "合格率",
            type: "line",
            data: [420, 332, 291, 654, 590, 330, 810]
          },
          {
            name: "超標率",
            type: "line",
            data: [120, 232, 391, 854, 590, 730, 410]
          }
        ]
      },
      piesOptions: {
        color: ["#5094FF", "#64DAAC", "#FAC84A"],
        title: {
          text: "汽油柴油分佈",
          top: "5%",
          left: "5%",
          textStyle: {
            fontSize: "0.072917rem",
            color: "#333333",
            fontStyle: "normal"
          }
        },
        grid: {
          top: "15%",
          bottom: "15%",
          right: "15%",
          left: "15%"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
          {
            name: "氣體值",
            type: "pie",
            radius: "80%",
            center: ["50%", "50%"],
            data: [
              { value: 50, name: "NOx超標" },
              { value: 30, name: "PM2.5超標" },
              { value: 20, name: "超標汙染物" }
            ],
            label: {
              position: "inside",
              formatter: "{b} \n {c}({d}%)"
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    };
  
 
}
};
</script>

三、使用v-charts

v-charts 是基於vue2二次封裝的圖表元件庫，功能沒有echarts多 但也夠用了，官網很詳細，這裡用一個官網例子說明問題。

<template>
  <ve-histogram :data="chartData" :settings="chartSettings"></ve-histogram>
</template>

<script>
  export default {
    data () {
      this.chartSettings = {
        showLine: ['下單使用者']
      }
      return {
        chartData: {
          columns: ['日期', '訪問使用者', '下單使用者', '下單率'],
          rows: [
            { '日期': '1/1', '訪問使用者': 1393, '下單使用者': 1093, '下單率': 0.32 },
            { '日期': '1/2', '訪問使用者': 3530, '下單使用者': 3230, '下單率': 0.26 },
            { '日期': '1/3', '訪問使用者': 2923, '下單使用者': 2623, '下單率': 0.76 },
            { '日期': '1/4', '訪問使用者': 1723, '下單使用者': 1423, '下單率': 0.49 },
            { '日期': '1/5', '訪問使用者': 3792, '下單使用者': 3492, '下單率': 0.323 },
            { '日期': '1/6', '訪問使用者': 4593, '下單使用者': 4293, '下單率': 0.78 }
          ]
        }
      }
    }
  }
</script>
 

以上，可跟據需求選用，如果需求簡單可直接用v-charts