vue中使用echarts

引入echarts

npm install echarts --save
或是
yarn add echarts --save
而後在須要的組件中引入
import echarts from "echarts"
複製代碼

使用

html
<div class="envy-pie">
    <div id="envyPie" style="width:90%; height:350px;"></div>
</div>
js
<script>
import echarts from "echarts";
  export default {
    name: 'envyPie',
    props: {
      voltage: Array
    },
    methods: {
      drawPieChart() {
        const this_ = this;
        this.chartPie = echarts.init(document.getElementById("envyPie"));
        this.chartPie.setOption({
          color: ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0', '#3436C7', '#223273'],
          title: {
              text: '裝機容量分佈狀況',
              x: 'center'
          },
          tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient: 'vertical',
              left: 'left',
          },
          series: [{
              name: '裝機容量分佈狀況',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: this_.voltage,
              itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          }]
        });
      },
      drawCharts() {
        this.drawPieChart();
      }
    },
    mounted: function() {
      this.drawCharts();
    }

  }
</script>
複製代碼

產生的問題

問題：父子組件傳值，容易形成點開子組件後，echarts圖不出現

緣由：所以在另外一個父組件進行應用的時候，他是首屏就加載，數據不變更。可是當數據變更以後，沒法自動的更新圖表。因爲 mounted 只會在掛載的時候執行一次，所以沒法後續進行更新。

解決辦法：給父組件加上一個v-if，使子組件從新渲染

html
<envy-pie :voltage="voltage" v-if="flag">
js
data () {
      return {
        voltage: [],
        flag: false
      }
    },
    components: {
      envyPie
    },
    methods: {
      getEnvyContent () {
        axios.get('../../../static/mock/envy.json').then(this.getEnvyContentSucc)
      },
      getEnvyContentSucc (res) {
        if (res) {
          const data = res.data
          this.voltage = res.data.capacity_by_voltage
          this.flag = true
        }
      }
    },
    mounted() {
      this.getEnvyContent()
    }
複製代碼

這樣解決了。