vue echarts 從后台獲取數據形成餅圖，柱狀圖，折線圖

一、vue代碼

<template>
  <div class="main">
   <div v-for="(item,index) in itemCategory" :key="index" :class="[index%2 === 0 ? 'wupina':' wupinb']">
              <div v-if="index%2 != 0" class="wupinphoto">
                <img width="50" height="50" :src="getImgUrl(item,index)" alt="">
              </div>
              <div class="wupintext001">{{ item.itemTypeName }}</div>
              <div class="wupintext002">{{ item.itemNum }}件</div>
              <div v-if="index%2 === 0" class="wupinphoto">
                <img width="50" height="50" :src="getImgUrl(item,index)" alt="">
              </div>
            </div>
 <div class="zhixing003"> <div id="task_bar" style="width:600px;height:250px;" /></div>
 <div class="titlebg2"><div id="item_line" class="qushi" /></div>
 <div id="duration_pie" :style="{height:height,width:width}" />
 </div>
</template>

<script>
/* eslint-disable */
import Config from '@/settings'
import {getInitInfo} from '@/api/show'
import echarts from 'echarts'
export default {
  name: "show",
    props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '170px'
    }
  },
  data() {
    return {
      chart: null,
      involvedItemNUmbers: "",
      customersNumbers:"",
      nationalEmblemFirst: Config.nationalEmblemFirst,
      nationalEmblemSecond: Config.nationalEmblemSecond,
      nationalEmblemThird: Config.nationalEmblemThird,
      nationalEmblemForth: Config.nationalEmblemForth,
      nationalEmblemFifth: Config.nationalEmblemFifth,
      area: Config.area,
      person: Config.person,
      capital: Config.capital,
      vehicle: Config.vehicle,
      monitoringEquipment: Config.monitoringEquipment,
      auxiliaryEquipment: Config.auxiliaryEquipment,
      videoFirst: Config.videoFirst,
      videoSecond: Config.videoSecond,
      videoThird: Config.videoThird,
      videoForth: Config.videoForth,
      durationList:[],
      itemCategory:[],
      messageList:[],
      itemList:[],
      taskList:[],
      color: '#000',
    };
  },
  mounted(){
    // 界面數據從后台獲取
    this.init();
  },
  methods: {
    // 調用后台獲取數據
    init(){
      getInitInfo().then(res =>{
        if(res.code == 200){
            let result =JSON.parse(res.result);
            // 物品總數
            this.involvedItemNUmbers =result.itemTotal;
            // 服務客戶總數
            this.customersNumbers = result.customers;
            // 存放時長
            this.durationList= result.durationList;
            let data = []
            if(this.durationList !=null && this.durationList.length >0){
              for(let i = 0; i < this.durationList.length; i++){
                let a = { value: this.durationList[i].itemAmount, name: this.durationList[i].durationName }
                data.push(a)
              }
              // 展示餅圖數據
              this.initChart(data);
            }
            // 物品類別
            this.itemCategory= result.itemCategory;
            // 實時預警
            this.messageList= result.mesList;
            // 任務列表
            this.taskList= result.taskList;
            if(this.taskList !=null && this.taskList.length >0){
              // 任務類型
              let arrY=[];
              // 具體數值
              let arrX=[];
              for(let i = 0; i < this.taskList.length; i++){
                // Y軸顯示類型
                arrY.push(this.taskList[i].taskTypeName);
                // 具體類型數據
                arrX.push(this.taskList[i].itemCount);
              }
              // 展示柱狀圖
              this.initBarChart(arrX,arrY);
            }
            // 年度入庫物品數
            this.itemList = result.itemList;
            if(this.itemList !=null && this.itemList.length >0){
                // 任務類型
                let number=[];
                for(let i = 0; i < this.itemList.length; i++){
                  // 每個月的物品數據
                  number.push(this.itemList[i].itemNum);
                }
                // 展示折線圖
                this.initLineChart(number);
            }
        }else{
           this.$publicjs.showMessage(res.message, this.$publicjs.ErrorType);
        }
      }).catch(e =>{
         this.$publicjs.showMessage(e, this.$publicjs.ErrorType);
      })
    },
    getImgUrl(item,index){
      if(item.itemTypeName == "貴重物品"){
        return require("@/assets/show_images/wupin002.png");
      } else if(item.itemTypeName == "普通物品"){
        return require("@/assets/show_images/wupin003.png");
      }else if(item.itemTypeName == "電子設備"){
        return require("@/assets/show_images/wupin001.png");
      }else if(item.itemTypeName == "低溫冷藏物品"){
        return require("@/assets/show_images/wupin005.png");
      }else if(item.itemTypeName == "危險品"){
        return require("@/assets/show_images/wupin004.png");
      }else{
         return require("@/assets/show_images/wupin001.png");
      }
      
    },
    // 存放時長餅圖初始化
    initChart(data) {
      this.chart = echarts.init(document.getElementById('duration_pie'));
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} ({d}%)',
        },
        // 全局調色盤。
        color: ['#1FAFF1','#E49E2F','#EE6261', '#3AF1B6', '#AA449B'],
        legend: {
          orient: 'vertical',
          left: '5%',
          textStyle: {
            // 圖例文字顏色
            color: '#E49E2F'         
          }
        },
        series: [
          {
            name: '存放時長',
            type: 'pie',
            radius: '85%',
            data: data
          }
        ]
      })
    },
    // 執行任務柱狀圖展示
    initBarChart(arrX,arrY) {
      this.chart = echarts.init(document.getElementById('task_bar'));
      this.chart.setOption({
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              }
          },
          // 全局調色盤。
          color: ['#1EAFF1'],
          grid: {
              left: '10%',
              top:'15%',
              bottom:'10%',
              containLabel: true
          },
          xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01],
              axisLabel: {
                  show: true,
              }
          },
          yAxis: {
              type: 'category',
              data: arrY,
              axisLabel: {
                  show: true,
                  textStyle: {
                      color: '#fff'
                  },
              }
          },
          series: [
              {
                  name: '2021年',
                  type: 'bar',
                  data: arrX
              }
          ]
      })
    },
    // 年度入庫物品數
    initLineChart(arrY){
      this.chart = echarts.init(document.getElementById('item_line'));
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            show: true,
            textStyle: {
                color: '#fff'
            },
          },
          data: ['01月', '02月', '03月', '04月', '05月', '06月', '07月','08月','09月','10月','11月','12月']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
                color: '#fff'
            }
          },
        },
        grid: {
          top:'10%',
          bottom:'20%'
        },
        series: [{
            data: arrY,
            type: 'line',
            itemStyle : { 
              normal : { 
                color:'#E49E2F', //改變折線點的顏色
                lineStyle:{ 
                  color:'#E37246' //改變折線顏色
                } 
              } 
            },
        }],
        
      })
    }
  }
};
</script>

二 最終樣式 echarts相關例子（https://echarts.apache.org/examples/zh/index.html）

問題一：echarts中出現tooltip時頁面相對定位布局出現抖動

1、分析原因：

在echarts圖表中出現tooltip時，畫布的父標簽（即：echarts.init()的標簽）的有時寬高都會發生變化，導致相對布局的div可能大小發生變化（畫布大小卻不變），導致頁面閃動。

2、解決辦法：

在該畫布的父標簽（即：echarts.init()的標簽）外層套一個div，設置overflow:hidden；然后，設置tooltip的confine：true;(設置tooltip不超出圖表)。