效果圖

代碼如下：

<template>
  <div
    id="main-eChartsProduct"
    ref="chart"
    :style="{ width: '100%', height: '450px' }"
  ></div>
</template>



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>


<script>
// import navMenu from "@/components/navMenu.vue";
export default {
  name: "eChartsProduct",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于準(zhǔn)備好的dom，初始化echarts實例
      // let myChart = this.$echarts.init(document.getElementById("myChart"));
      let myChart = this.$echarts.init(this.$refs.chart);

      // 繪制折線圖及旁邊的title定義
      let option = {
        legend: {
          top: "5%",
          // itemWidth: 30, //圖旁邊小title圖案的寬度
          // itemHeight: 40, //圖旁邊小title圖案的高度
          textStyle: {
            //圖旁邊小title文字的樣式
            color: "#fff",
            fontSize: 14
          }
        },
        tooltip: {
          trigger: "axis",
          showContent: false
        },
        dataset: {
          source: [
            [
              "product",
              "2020/01",
              "2020/02",
              "2020/03",
              "2020/04",
              "2020/05",
              "2020/06",
              "2020/07",
              "2020/08",
              "2020/09",
              "2020/10",
              "2020/11",
              "2020/12"
            ],
            ["已處理", 10, 10, 10, 10, 10, 10, 30, 20, 0, 50, 10, 3],
            ["處理中", 20, 20, 20, 20, 20, 20, 7, 8, 9, 1, 11, 15],
            ["掛起", 30, 30, 40, 20, 30, 30, 14, 15, 17, 18, 19, 8],
            ["外部處理", 5.2, 7.1, 9.2, 7.4, 5.9, 39.1, 11.1, 8, 4, 5, 9, 10]
          ]
        },
        xAxis: { type: "category" },
        yAxis: { gridIndex: 0 },
        grid: { top: "60%" },
        textStyle: { fontWeight: "normal", color: "#fff" }, //修改X、Y、及坐標(biāo)軸字體顏色
        series: [
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            areaStyle: { type: "default", color: "#d5f0fd" }, //定義曲線內(nèi)顏色
            lineStyle: { color: "#2db7f5" }  //定義曲線顏色
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            areaStyle: { type: "default", color: "#fff5e6" },
            lineStyle: { color: "#ff6600" }
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            areaStyle: { type: "default", color: "#dcdfee" },
            lineStyle: { color: "#808bc6" }
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            areaStyle: { type: "default", color: "#ffffff" },
            lineStyle: { color: "#fff" }
          },
          {
            type: "pie",
            id: "pie",
            radius: "30%",
            center: ["50%", "25%"],
            label: {
              formatter: ": {@2012} (u0z1t8os%)"
            },
            encode: {
              itemName: "product",
              value: "2012",
              tooltip: "2012"
            }
          }
        ]
      };

      // 餅狀圖
      myChart.on("updateAxisPointer", function(event) {
        var xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          var dimension = xAxisInfo.value + 1;
          myChart.setOption({
            // visualMap 組件可通過數(shù)值的大小映射到扇形的明暗度。
            visualMap: {
                // 不顯示 visualMap 組件，只用于明暗度的映射
                show: false,
                // 映射的最小值為 1
                min: 1,
                // 映射的最大值為 50
                max: 50,
                inRange: {
                  // 明暗度的范圍是 0 到 1
                  colorLightness: [0, 1]
                }
              },
            series: {
              id: "pie",
              center: ["50%", "35%"], //修改餅狀圖位置,50%就是居中顯示
              label: {
                formatter: ": {@[" + dimension + "]} (u0z1t8os%)"
              },
              encode: {
                value: dimension,
                tooltip: dimension
              },
              // 餅狀圖樣式，陰影 和 顏色

              itemStyle: {
                // emphasis: {
                //   shadowBlur: 10,
                //   shadowOffsetX: 0,
                //   shadowColor: "rgba(0, 0, 0, 0.5)"
                // },
                // normal: {
                // color: function(params) {
                //   // 這里也可以單獨自定義每個扇形的顏色。如果同一個顏色，只有敏感度的變化可以通過visualMap組件設(shè)置
                //   var colorList = [
                //     "#00FFFF",
                //     "#00FF00",
                //     "#FFFF00",
                //     "#FF8C00",
                //     "#FF0000",
                //     "#FE8463"
                //   ];
                //   return colorList[params.dataIndex];
                // }
                // color: '#c23531'
                // }
                // 設(shè)置扇形的顏色，配合visualMap組件使用。如果需要單獨設(shè)置每個扇形顏色，上面的代碼即可。下面三行不需要
                color: "#c23531",
                shadowBlur: 200,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          });
        }
      });

      myChart.setOption(option);
    }
  }
};
</script>