Vue中EChatrs中两个图表联动(一个图表控制另一个图表的数据)

前言

这篇文章给小伙伴们带来的是EChatrs的操作，是通过点击一个图表来控制另一个图表的数据的操作，看着还是蛮有用的，因为大家在做管理系统的项目的时候，应该都是可以用的上的，也非常的简单，就是有的小伙伴可能刚接触EChatrs的时候可能不太熟悉其中的属性，因为它的属性功能太多、太强大了。

展示

一、原理

它的原理其实十分的简单，非常的简单，就是给一个图表绑定一个点击事件，当然这个操作在原生的js代码中还是很好实现的，就获取下DOM，然后操作操作就可以了。
但是这篇文章来主要给大家说的是在Vue中应该怎样操作，其实就是通过点击事件来判断点击这个扇形图的那个区域，然后对柱状图进行一个赋值

二、代码截图

然后第二个图表就通过第一个图表的选择来控制图表的内容

这就可以了已经，下面我把代码给小伙伴们提供出来，不用你们一个一个打了

三、代码

<template>
  <div class="test">
    <div id="myChart" :style="{width: '50%', height: '300px',float:'left'}"></div>
    <div id="myChart1" :style="{width: '50%', height: '300px',float:'left'}"></div>
  </div>
</template>

<script>
export default {
  name: "FuncFormsBase",
  data() {
    return {
      star: "5星",
      data: [2, 26, 32, 87],
    };
  },
  mounted() {
    this.drawLine();
    this.drawLine1();
  },
  methods: {
    drawLine() {
      let that = this;
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.on("click", function (params) {
        that.star = params.name;
        //我们通过点击事件获取圆形图的params中的name，再根据name的值来进行判断，从而修改data的内容  
        switch (that.star) {
          case "0星":
            that.data = [];
            break;
          case "1星":
            that.data = [];
            break;
          case "2星":
            that.data = [56, 22, 1, 32];
            break;
          case "3星":
            that.data = [78, 52, 41, 21];
            break;
          case "4星":
            that.data = [9, 52, 75, 45];
            break;
          case "5星":
            that.data = [2, 26, 32, 87];
            break;
        }
        that.drawLine1();
      });
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        color: [
          "#E7BCF3",
          "#FF9F7F",
          "#FFE074",
          "#9FE6B8",
          "#5FA4EB",
          "#8378EA",
        ],
        legend: {
          bottom: 0,
          left: "center",
          data: ["0星", "1星", "2星", "3星", "4星", "5星"],
        },
        series: [
          {
            radius: ["20%", "70%"],
            selectedMode: "single",
            name: "客户星级",
            type: "pie",
            center: ["50%", "50%"],
            data: [
              { value: 335, name: "0星" },
              { value: 310, name: "1星" },
              { value: 234, name: "2星" },
              { value: 135, name: "3星" },
              { value: 1548, name: "4星" },
              { value: 1548, name: "5星" },
            ],
          },
        ],
      });
    },
    drawLine1() {
      let that = this;
      let myChart = this.$echarts.init(document.getElementById("myChart1"));
      myChart.setOption({
        title: {
          text: "线索意向度" + that.star,
        },
        color: ["#5FA4EB"],
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: ["急需", "有兴趣", "考虑", "潜在"],
        },
        grid: {
          left: "3%",
          right: "6%",
          containLabel: true,
        },
        series: [
          {
            data: that.data,
            type: "bar",
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "right", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 16,
                  },
                },
              },
            },
          },
        ],
      });
    },
  },
};
</script>

结语

这篇文章可能说比较简单，但是还是有点实用的，希望对你有所帮助