eCharts 饼状图和折线图的实例

代码如下：

<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() {
      // 基于准备好的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、及坐标轴字体颜色
        series: [
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            areaStyle: { type: "default", color: "#d5f0fd" }, //定义曲线内颜色
            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: "{b}: {@2012} ({d}%)"
            },
            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 组件可通过数值的大小映射到扇形的明暗度。
            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: "{b}: {@[" + dimension + "]} ({d}%)"
              },
              encode: {
                value: dimension,
                tooltip: dimension
              },
              // 饼状图样式，阴影 和 颜色

              itemStyle: {
                // emphasis: {
                //   shadowBlur: 10,
                //   shadowOffsetX: 0,
                //   shadowColor: "rgba(0, 0, 0, 0.5)"
                // },
                // normal: {
                // color: function(params) {
                //   // 这里也可以单独自定义每个扇形的颜色。如果同一个颜色，只有敏感度的变化可以通过visualMap组件设置
                //   var colorList = [
                //     "#00FFFF",
                //     "#00FF00",
                //     "#FFFF00",
                //     "#FF8C00",
                //     "#FF0000",
                //     "#FE8463"
                //   ];
                //   return colorList[params.dataIndex];
                // }
                // color: '#c23531'
                // }
                // 设置扇形的颜色，配合visualMap组件使用。如果需要单独设置每个扇形颜色，上面的代码即可。下面三行不需要
                color: "#c23531",
                shadowBlur: 200,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          });
        }
      });

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