echarts结合element ui实现点击按钮显示不同的图表

1.业务介绍

​
通过点击不同的按钮显示不同的图表

最后整体效果是这样的：

​

2.实现思路

(1)两个按钮进行切换

​

  <div class="callBtn">
        <el-row>
          <el-button @click="changeOutColor" :type="outColor"
            >呼出</el-button
          >
          <el-button @click="changeInColor" :type="inColor">呼入</el-button>
        </el-row>
      </div>

      

 data() {
    return {

      outColor: "danger",
      inColor: "",
    };
  },
methods:{
 changeOutColor() {
      if (this.outColor == "") {
        this.outColor = "danger";
        this.inColor = "";
      }
    },
    changeInColor() {
      if (this.inColor == "") {
        this.inColor = "danger";
        this.outColor = "";
      }
    },
}


//样式
  .el-button--danger:hover,
    .el-button--danger:focus {
      background: #ff6d6d;
      border-color: #ff6d6d;
      color: #ffffff;
    }

.el-button:hover,
.el-button:focus {
  color: black;
  border-color: #dcdfe6;
  background-color: #fff;
}

这样就可以两个按钮间相互切换了的，样式都可以根据自己的需求进行修改的

​

(2)将按钮和图表关联起来

​
这里我们选的是v-show指令实现

   <div class="callBtn">
        <el-row>
          <el-button @click="changeOutColor(1)" :type="outColor"
            >呼出</el-button
          >
          <el-button @click="changeInColor(2)" :type="inColor">呼入</el-button>
        </el-row>
      </div>


<div class="callChartAaea">
        <div
          id="callOutChart"
          v-show="showChart == 1"
          :style="{
            height: '400px',
            width: '400px',
            boxShadow:
              '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
          }"
        ></div>
        <div
          id="callInChart"
          v-show="showChart == 2"
          :style="{
            height: '400px',
            width: '400px',
            boxShadow:
              '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
          }"
        ></div>
      </div>


  mounted() {
    this.drawLine();
  },
  data() {
    return {
      outColor: "danger",
      inColor: "",
      showChart: 1,
    };
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
 
      let callOutChart = this.$echarts.init(
        document.getElementById("callOutChart")
      );
      let callInChart = this.$echarts.init(
        document.getElementById("callInChart")
      );
   
      // 绘制图表
      callOutChart.setOption({
        //标题
        title: {
          text: "测试案例",
          left: "left",
        },
        //背景色
        backgroundColor: "#fff",
        //提示框组件
        tooltip: {
          trigger: "item",
          formatter: "{b}:  ({d}%)",
          backgroundColor: "#fff",
          textStyle: {
            color: "black",
          },
          // extraCssText: "box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);",
        },
        //数据集
        dataset: {
          source: [
            // ["product","正常状态","无法接通","号码错误","拒绝接听","无人接听","家属接听","患方不合作","其他"]
            ["随访", 548],
            ["复诊", 35],
          ],
        },
        //图例组件
        legend: {
          bottom: 1,
          left: "center",
          itemWidth: 10,
          itemHeight: 10,
          itemStyle: {
            borderCap: "round",
          },
          icon: "circle",
        },
        //系列
        series: [
          {
            type: "pie",
            radius: ["40%", "60%"],
            label: {
              formatter: "{b}:  ({d}%)",
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            color: ["#3AA1FF", "#36CBCB"],
          },
        ],
      });

       callInChart.setOption({
        //标题
        title: {
          text: "测试案例",
          left: "left",
        },
        //背景色
        backgroundColor: "#fff",
        //提示框组件
        tooltip: {
          trigger: "item",
          formatter: "{b}:  ({d}%)",
          backgroundColor: "#fff",
          textStyle: {
            color: "black",
          },
          // extraCssText: "box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);",
        },
        //数据集
        dataset: {
          source: [
            ["业务分类A", 548],
            ["业务分类B", 37],
            ["业务分类C",44]
          ],
        },
        //图例组件
        legend: {
          bottom: 1,
          left: "center",
          itemWidth: 10,
          itemHeight: 10,
          itemStyle: {
            borderCap: "round",
          },
          icon: "circle",
        },
        //系列
        series: [
          {
            type: "pie",
            radius: ["40%", "60%"],
            label: {
              formatter: "{b}:  ({d}%)",
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            color: ["#3AA1FF", "#36CBCB","#4ECB73"],
          },
        ],
      });


    changeOutColor(val) {
      this.showChart = val;
      if (this.outColor == "") {
        this.outColor = "danger";
        this.inColor = "";
      }
    },
    changeInColor(val) {
      this.showChart = val;
      if (this.inColor == "") {
        this.inColor = "danger";
        this.outColor = "";
      }
    },
  },

我们在点击方法时传个参判断就可以将按钮和图表联系起来，搞完收工。仅提供参考思路，有见解的可以提出来

​