npm install vue-echarts

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

import ECharts from 'vue-echarts/components/ECharts.vue'; //引用vue-echarts
import "echarts/lib/component/tooltip"; //按需加載相關(guān)的包
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)=>{  //選擇折線圖上的坐標(biāo)可以獲得相關(guān)值
          let value1 = parmes[0];
          let value2 = parmes[1];
          //拿到值后,需要在哪顯示可以在這操作
        }
    },
    textStyle: {
      color: "#999",
    },
    label:{
      fontSize: 44,
    },
    xAxis: {
        type: 'category', //類目的行式，原樣展示
        boundaryGap: false, //兩邊留白策略
        offset: 3, 
        axisLine:{
          show:false, //是否顯示坐標(biāo)軸軸線，默認(rèn)顯示
        },
        axisTick:{
          show: false, //是否顯示坐標(biāo)軸刻度
        },
        axisLabel: {
          interval: 10000,   //默認(rèn)1,表示【隔一個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽】
          showMinLabel: true, //x軸只需要展示最小的和最大的值
          showMaxLabel: true,
          fontSize: 20,
          //padding: [10, 0, 0, 0], 這里可以設(shè)置坐標(biāo)軸的標(biāo)簽的padding值
        },
        data: [], 
    },
    yAxis: {
        type: 'value',
        boundaryGap: false,
        axisLine:{
          show:false,
        },
        axisLabel:{
          fontSize: 22,
          formatter: '{value}%'  //格式化標(biāo)簽值
        },
        axisTick:{
          show: false,
        },
       lineStyle: {
        //網(wǎng)絡(luò)線設(shè)置（只作用于非類目鈾）
        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, //不顯示折線上的數(shù)據(jù)點(diǎn)，只在hover的時(shí)候顯示
        smooth: false, //0-1之間,true時(shí)為曲線，flase為折線，線彎曲度
        color: '#e2b256',
        lineStyle:{
          width: 3, //線條寬度
        },
        data: []
    },{
      name: '上證指數(shù)',
      type: 'line',
      silent: false,
      showSymbol: false, //不顯示折線上的數(shù)據(jù)點(diǎn)，只在hover的時(shí)候顯示
      smooth: false, //0-1之間,true時(shí)為曲線，flase為折線，線彎曲度
      color: '#5eb8e2',
      data: []
    }]
  },
},
methods: {
    //計(jì)算Y鈾min,max,interval三個(gè)值，保證Y鈾能夠均等
    computeYaxis(data) {
      let allValues = [];
      for (let k of data) {
        for (let v of Object.values(k)) {
          if (Number(v)) {
            allValues.push(v);
          }
        }
      }
      //拿到數(shù)據(jù)當(dāng)中的最小值
      const min = Number.parseFloat(Math.min(...new Set(allValues))).toFixed(2);
      //讓顯示在坐標(biāo)上的最小值<數(shù)據(jù)當(dāng)中的最小值
      const newMin = min - 1;
      //拿到數(shù)據(jù)當(dāng)中的最大值
      const max = Number.parseFloat(Math.max(...new Set(allValues))).toFixed(2);
      let interval = Math.abs(
         //移動(dòng)端interval必須取整數(shù)才生效
        Math.ceil(Number.parseFloat((max - min) / 5).toFixed(2)) 
      );
      let newMax = Number.parseFloat(newMin + interval * 5).toFixed(2);
      //存在算出來(lái)的newMax值可能小于數(shù)據(jù)當(dāng)中的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,
}

<echarts :options="overViewOption"></echarts>

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"], 
        //每一塊對(duì)應(yīng)的色值
        hoverAnimation: false,
        // label:{
        //   normal:{
        //     show:false
        //   }
        // },
        radius: ["40%", "80%"],
        data: [],
      }
    ]   
 },
 //從后端獲取的數(shù)據(jù)
 let mainModelOverview = data.mainModelOverview.map((item,index) => {               
     return {
        value: Number.parseFloat(item.fundPercent),
        name: item.fundType + item.fundPercent +'%',
        emphasis:{
          itemStyle:{
            color: this.pieColor[index]   
            //鼠標(biāo)放在pie圖上對(duì)應(yīng)區(qū)域高亮顏色，防止高亮變色（這是個(gè)坑）
          }
        },   
    }; 
  }); 
  this.$set(this.overViewOption.series[0], "data", mainModelOverview);