vue-echarts移動端踩坑記錄

最近手頭一個項目須要作兩個圖，一個是折線圖，一個餅圖。因爲是基於Vue的項目，第一時間就想到用vue-echarts來實現。vue-echarts本質上也是使用了echarts.js,只是包裝成vue組件。

一、安裝vue-echarts包

npm install vue-echarts

二、折線圖代碼

template:
<echarts :options="trendChart" ref="trendEchart"></echarts>

js:

import ECharts from 'vue-echarts/components/ECharts.vue'; //引用vue-echarts
import "echarts/lib/component/tooltip"; //按需加載相關的包
import "echarts/lib/chart/pie";
import "echarts/lib/chart/line";

export default {
  trendChart: {
    grid: {
      left: '10%',
      top: 52,
    },
    tooltip: {
        trigger: 'axis',
        showContent: true,
        position:function(p){   
          return [p[0] + 10000000000, 0]; //不須要顯示彈層信息
        },
        formatter: (parmes)=>{  //選擇折線圖上的座標能夠得到相關值
          let value1 = parmes[0];
          let value2 = parmes[1];
          //拿到值後,須要在哪顯示能夠在這操做
  
        }
    },
    textStyle: {
      color: "#999",
    },
    label:{
      fontSize: 44,
    },
    xAxis: {
        type: 'category', //類目的行式，原樣展現
        boundaryGap: false, //兩邊留白策略
        offset: 3, 
        axisLine:{
          show:false, //是否顯示座標軸軸線，默認顯示
        },
        axisTick:{
          show: false, //是否顯示座標軸刻度
        },
        axisLabel: {
          interval: 10000,   //默認1,表示【隔一個標籤顯示一個標籤】
          showMinLabel: true, //x軸只須要展現最小的和最大的值
          showMaxLabel: true,
          fontSize: 20,
          //padding: [10, 0, 0, 0], 這裏能夠設置座標軸的標籤的padding值
        },
        data: [], 
    },
    yAxis: {
        type: 'value',
        boundaryGap: false,
        axisLine:{
          show:false,
        },
        axisLabel:{
          fontSize: 22,
          formatter: '{value}%'  //格式化標籤值
        },
        axisTick:{
          show: false,
        },
       lineStyle: {
        //網絡線設置（只做用於非類目鈾）
        show: true,
        color: "#f5f5f5",
        width: 1,
        type: "solid"
      },
      splitNumber: 5, //Y軸分格爲幾段
      min: value => {
        return value.min - 1; //最小顯示的值
      },
      max: null, //最大顯示的值
      interval: 2 //間隔
    },
    series: [{
        name: '本組合',
        type: 'line',
        silent: false,
        showSymbol: false, //不顯示折線上的數據點，只在hover的時候顯示
        smooth: false, //0-1之間,true時爲曲線，flase爲折線，線彎曲度
        color: '#e2b256',
        lineStyle:{
          width: 3, //線條寬度
        },
        data: []
    },{
      name: '上證指數',
      type: 'line',
      silent: false,
      showSymbol: false, //不顯示折線上的數據點，只在hover的時候顯示
      smooth: false, //0-1之間,true時爲曲線，flase爲折線，線彎曲度
      color: '#5eb8e2',
      data: []
    }]
  },
},
methods: {
    //計算Y鈾min,max,interval三個值，保證Y鈾可以均等
    computeYaxis(data) {
      let allValues = [];

      for (let k of data) {
        for (let v of Object.values(k)) {
          if (Number(v)) {
            allValues.push(v);
          }
        }
      }
      //拿到數據當中的最小值
      const min = Number.parseFloat(Math.min(...new Set(allValues))).toFixed(2);
      //讓顯示在座標上的最小值<數據當中的最小值
      const newMin = min - 1;
      //拿到數據當中的最大值
      const max = Number.parseFloat(Math.max(...new Set(allValues))).toFixed(2);
      
      let interval = Math.abs(
         //移動端interval必須取整數才生效
        Math.ceil(Number.parseFloat((max - min) / 5).toFixed(2)) 
      );
      let newMax = Number.parseFloat(newMin + interval * 5).toFixed(2);
      //存在算出來的newMax值可能小於數據當中的max值
      if (newMax < max) {
        interval++; 
        newMax = Number.parseFloat(newMin + interval * 5).toFixed(2);
      }
      this.trendChart.yAxis.max = newMax;
      this.trendChart.yAxis.interval = interval;
    },
},
components: {
  echarts: ECharts,
}

三、折線圖效果

初始狀態

mouseover狀態

移動端還須要考慮當touchmove到非echarts的地方，須要重置到初始狀態，併到選中的當前座標去掉等問題。

四、餅圖代碼

template:
<echarts :options="overViewOption"></echarts>
js:
export defalut {

//pie圖   
pieColor: ["#edce91", "#deab6a", "#ffe2ac", "#fcefd6","#77623b"],               
overViewOption: {
    lineStyle: {
      color: "#e0bf80"
    },
    textStyle: {
      color: "#333",
      fontSize: 26
    },
    hoverOffset: 0,
    series: [
      {
        type: "pie",
        color: ["#edce91", "#deab6a", "#ffe2ac", "#fcefd6","#77623b"], 
        //每一塊對應的色值
        hoverAnimation: false,
        // label:{
        //   normal:{
        //     show:false
        //   }
        // },
        radius: ["40%", "80%"],
        data: [],
      }
    ]   
 },

}

//從後端獲取的數據
 let mainModelOverview = data.mainModelOverview.map((item,index) => {               
     return {
        value: Number.parseFloat(item.fundPercent),
        name: item.fundType + item.fundPercent +'%',
        emphasis:{
          itemStyle:{
            color: this.pieColor[index]   
            //鼠標放在pie圖上對應區域高亮顏色，防止高亮變色（這是個坑）
          }
        },   
    }; 
  }); 
  this.$set(this.overViewOption.series[0], "data", mainModelOverview);

五、拼圖效果

六、總結坑點

官網給的示例都是基於pc端，並無移動端的示例。有些配置項的示例是用的echarts3，因此在使用的時候，同一個配置元素放在示例上編輯是沒有問題的，但一旦放在項目當中就不生效（本項目是基於echarts4）。

• 事件支持：mouseover,click等pc端的事件。在移動端，touchmove事件須要取消選中狀態須要本身加事件了。
• interval: 官方給的建議是不推薦使用。示例給的interval能夠爲小數。但在移動端interval加小數卻無論用，若是想均等每一列，並可以正確展現數據，那麼須要本身去計算了。
• api太多了，眼花...頭疼...

不過，不得不佩服echarts的強大，可以支持幾乎全部的定製化需求，具體怎麼去實現你的需求，須要不斷的嘗試。在此須要這篇記錄可以幫助到你們的工做，也但願你們可以給予支持