echarts同数据的矩形折线扇形的展示

  <div
    ref="echarts"
    id="echarts"
    style="width: 350px; height: 300px; margin: auto"
  ></div>

import * as echarts from "echarts";
export default {
  mounted() {
    this.funEchart();
  },
  methods: {
    funEchart() {
      let chartDom = this.$refs.echarts;
      let myChart = echarts.init(chartDom);
      const dataset = {
        dimensions: ["name", "score"],
        source: [
          ["一", 314],
          ["二", 351],
          ["三", 287],
          ["四", 219],
          ["五", 253],
          ["六", 165],
          ["七", 318],
          ["八", 366],
        ],
      };
      const pieOption = {
        dataset: [dataset],
        legend: {
          top: "bottom",
          show: true,
        },
        series: [
          {
            type: "pie",
            // 通过 id 关联需要过渡动画的系列
            id: "Score",
            radius: [0, "50%"],
            universalTransition: true,
            animationDurationUpdate: 1000,
            label: {
              position: "outer",
              alignTo: "labelLine",
              bleedMargin: 5,
            },
          },
        ],
        title: [
          {
            subtext: 'alignTo: "饼图"',
            left: "50%",
            textAlign: "center",
          },
        ],
        xAxis: {
          show: false,
        },
      };
      const barOption = {
        dataset: [dataset],
        legend: {
          show: false,
        },
        xAxis: {
          type: "category",
          show: true,
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            // 通过 id 关联需要过渡动画的系列
            id: "Score",
            // 每个数据都是用不同的颜色
            colorBy: "data",
            encode: { x: "name", y: "score" },
            universalTransition: true,
            animationDurationUpdate: 1000,
          },
        ],
        title: [
          {
            subtext: 'alignTo: "矩形图"',
            left: "50%",
            textAlign: "center",
          },
        ],
      };
      const lineOption = {
        dataset: [dataset],
        legend: {
          show: false,
        },
        xAxis: {
          type: "category",
          show: true,
          splitLine: {
            show: true,
            lineStyle: {
              //   color:'pink',
              width: 1,
              type: "solid",
            },
          },
        },
        yAxis: {},
        series: [
          {
            type: "line",
            // 通过 id 关联需要过渡动画的系列
            id: "Score",
            // 每个数据都是用不同的颜色
            colorBy: "data",
            encode: { x: "name", y: "score" },
            // data: [120, 200, 150, 80, 70, 110, 130],
            universalTransition: true,
            animationDurationUpdate: 1000,
          },
        ],
        title: [
          {
            subtext: '标题 : "折线图"',
            left: "50%",
            textAlign: "center",
            backgroundColor: "purple", //1
            borderColor: "#ff3040",
            textStyle: {
              color: "red",
            },
            subtextStyle: {
              color: "#fff", //1
              fontStyle: "bold",
              fontSize: 14,
            },
          },
        ],
      };
      let option = lineOption;
      let i = 0;
      myChart.setOption(option);
      var timer = setInterval(() => {
        if (i % 3 == 0) {
          option = barOption; //矩状
        } else if (i % 3 == 1) {
          option = pieOption; //扇形
        } else if (i % 3 == 2) {
          option = lineOption; //折线
        }
        myChart.setOption(option);
        i++;
        myChart.on("click", function (params) {
          clearInterval(timer);
          console.log(params.name);
          console.log("停止定时器");
        });
      }, 3000);
			//echarts 交互事件（点击元素，点击元素外的空白处）
      myChart.getZr().on("click", function (event) {
        // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
        if (!event.target) {
          // 点击在了空白处，做些什么。
          console.log("点击空白处，打开定时器");
					clearInterval(timer);
					timer= setInterval(() => {
					if (i % 3 == 0) {
						option = barOption; //矩状
					} else if (i % 3 == 1) {
						option = pieOption; //扇形
					} else if (i % 3 == 2) {
						option = lineOption; //折线
					}
					myChart.setOption(option);
					i++;
					myChart.on("click", function (params) {
						//点击了元素
						clearInterval(timer);
						console.log(params.name);
						console.log("停止定时器");
					});
				}, 3000);
        }
      });
    },
  },
};
</script>