Vue 中按钮组中多个按钮状态控制-同个按钮二次点击取消选中效果- echarts案例分享

 

 

<template>
  <div class="main">
    <div class="leftcharts">
      <div class="chartCotegory">
        <el-button @click="checkLine(item, index, typeList)" v-for="(item, index) in typeList" :key="item.val"
          :class="item.ischeck == true ? 'active' : ''">{{ item.name }}</el-button>
      </div>
      <div class="proCharts" ref="charts" v-if="!ischeck"></div>
    </div>
    <div class="proCharts" ref="charts" v-if="ischeck"></div>
    <!-- <div class="proCharts" ref="charts"></div> -->
  </div>
</template>

<script>
// import echarts from "echarts"; //npm install echarts@4.9.0
import * as echarts from "echarts";
export default {
  data() {
    return {
      lastYear: [10, 20, 30, 50, 50, 10, 50, 60, 10, 50, 10, 30],
      currentYear: [20, 20, 30, 50, 50, 10, 50, 20, 30, 50, 50, 30],
      newYear: [40, 20, 30, 60, 50, 80, 50, 20, 50, 50, 50, 100],
      finnayYear: [60, 20, 60, 50, 80, 10, 50, 100, 30, 90, 50, 70],
      test: [80, 20, 30, 60, 50, 80, 100, 20, 50, 80, 50, 100],
      test1: [80, 90, 60, 50, 80, 80, 50, 60, 30, 90, 60, 90],
      ischeck: false,
      typeList: [
        {
          val: 1,
          ischeck: false,
          name: "折线图",
        },
        {
          val: 2,
          ischeck: false,
          name: "柱状图",
        },
        {
          val: 3,
          ischeck: false,
          name: "饼图",
        },
      ],
      color: ["rgb(8,252,7)", "rgb(255,168,0)", "rgb(255,108,20)", "rgb(208,198,31)", "rgb(200,10,10)", "rgb(108,108,31)"],
      optWkBtn: "",
    };
  },
  created() { },
  mounted() {
    if (this.ischeck == false) {
      this.my();
    }
  },
  methods: {
    my() {
      let myChart = echarts.init(this.$refs.charts, "macarons");
      let option = {
        color: this.color,
        title: {
          text: "学生统计表",
          top: "0%",
          left: "center",
          textStyle: {
            //文字颜色
            color: '#fff',
            //字体风格,'normal','italic','oblique'
            fontStyle: 'normal',
            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
            fontWeight: 'bold',
            //字体系列
            fontFamily: 'sans-serif',
            //字体大小
            fontSize: 18
          },
          //4.副标题
          subtext: '副标题',
        },
        tooltip: {
          //提示框
          trigger: "axis",
        },
        legend: {
          //图例的类型
          top: "8%",
          icon: "roundRect", //图例icon图标
          data: [
            {
              name: "上年",
              textStyle: {
                color: "#fff",
              },
            },
            {
              name: "本年",
              textStyle: {
                color: "#fff",
              },
            },
            {
              name: "明年",
              textStyle: {
                color: "#fff",
              },
            },
            {
              name: "后年",
              textStyle: {
                color: "#fff",
              },
            },
            {
              name: "test",
              textStyle: {
                color: "#fff",
              },
            },
            {
              name: "test1",
              textStyle: {
                color: "#fff",
              },
            },
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "17%",
          containLabel: true, //grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          type: "category", //坐标轴类型。
          boundaryGap: false, //坐标轴两边留白策略
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisLabel: {
            //坐标轴刻度标签的相关设置
            interval: 0,
            textStyle: {
              color: "#fff",
              fontSize: 10,
            },
          },
          axisLine: {
            //坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: "rgb(2,121,253)",
            },
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            //x轴的坐标文字
            show: true,
            textStyle: {
              color: "#fff", //文字的颜色
            },
          },
          max: 100, //最大值100
          axisLine: {
            //坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: "rgb(2,121,253)",
            },
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
          splitLine: {
            //坐标在grid区域的分割线
            lineStyle: {
              //设置分割线的样式(图表横线颜色)
              color: ["#153a8a"],
            },
          },
        },
        series: [
          {
            name: "上年",
            type: "line",
            data: this.lastYear,
            lineStyle: {
              color: "rgb(8,252,7)", //线的颜色
            },
          },
          {
            name: "本年",
            type: "line",
            data: this.currentYear,
            lineStyle: {
              color: "rgb(255,168,0)", //线的颜色
            },
          },
          {
            name: "明年",
            type: "line",
            data: this.newYear,
            lineStyle: {
              color: "rgb(255,108,20)", //线的颜色
            },
          },
          {
            name: "后年",
            type: "line",
            data: this.finnayYear,
            lineStyle: {
              color: "rgb(208,198,31)", //线的颜色
            },
          },
          {
            name: "test",
            type: "line",
            data: this.test,
            lineStyle: {
              color: "rgb(200,10,10)", //线的颜色
            },
          },
          {
            name: "test1",
            type: "line",
            data: this.test1,
            lineStyle: {
              color: "rgb(108,108,31)", //线的颜色
            },
          },
        ],
      }
      myChart.setOption(option);
      //图表自适应
      window.addEventListener("resize", function () {
        myChart.resize(); // myChart 是实例对象
      });
    },
    mycharts() {
      let myChart = echarts.init(this.$refs.charts, "macarons");
      this.lastYear = [10, 20, 30, 50, 50, 10, 50, 60, 10, 50, 10, 30]
      this.currentYear = [20, 20, 30, 50, 50, 10, 50, 20, 30, 50, 50, 30]
      let option = {
        color: ["rgb(8,252,7)", "rgb(255,168,0)", "rgb(255,108,20)", "rgb(208,198,31)"],
        title: {
          text: "",
        },
        tooltip: {
          //提示框
          trigger: "axis",
        },
        legend: {
          //图例的类型
          icon: "roundRect", //图例icon图标
          data: [
            {
              name: "上年",
              textStyle: {
                color: "#fff",
              },
            },
            {
              name: "本年",
              textStyle: {
                color: "#fff",
              },
            },
            {
              name: "明年",
              textStyle: {
                color: "#fff",
              },
            },
            {
              name: "后年",
              textStyle: {
                color: "#fff",
              },
            },
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "17%",
          containLabel: true, //grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          type: "category", //坐标轴类型。
          boundaryGap: false, //坐标轴两边留白策略
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisLabel: {
            //坐标轴刻度标签的相关设置
            interval: 0,
            textStyle: {
              color: "#fff",
              fontSize: 10,
            },
          },
          axisLine: {
            //坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: "rgb(2,121,253)",
            },
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            //x轴的坐标文字
            show: true,
            textStyle: {
              color: "#fff", //文字的颜色
            },
          },
          max: 100, //最大值100
          axisLine: {
            //坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: "rgb(2,121,253)",
            },
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
          splitLine: {
            //坐标在grid区域的分割线
            lineStyle: {
              //设置分割线的样式(图表横线颜色)
              color: ["#153a8a"],
            },
          },
        },
        series: [
          {
            name: "上年",
            type: "line",
            data: this.lastYear,
            lineStyle: {
              color: "rgb(8,252,7)", //线的颜色
            },
          },
          {
            name: "本年",
            type: "line",
            data: this.currentYear,
            lineStyle: {
              color: "rgb(255,168,0)", //线的颜色
            },
          },
        ],
      }
      myChart.setOption(option);
      //图表自适应
      window.addEventListener("resize", function () {
        myChart.resize(); // myChart 是实例对象
      });
    },
    mychart() {
      let myChart = echarts.init(this.$refs.charts, "macarons");
      this.newYear = [40, 20, 30, 60, 50, 80, 50, 20, 50, 50, 50, 100]
      this.finnayYear = [60, 20, 60, 50, 80, 10, 50, 100, 30, 90, 50, 70]
      let option = {
        color: ["rgb(8,252,7)", "rgb(255,168,0)", "rgb(255,108,20)", "rgb(208,198,31)"],
        title: {
          text: "",
        },
        tooltip: {
          //提示框
          trigger: "axis",
        },
        legend: {
          //图例的类型
          icon: "roundRect", //图例icon图标
          data: [
            {
              name: "上年",
              textStyle: {
                color: "#fff",
              },
            },
            {
              name: "本年",
              textStyle: {
                color: "#fff",
              },
            },
            {
              name: "明年",
              textStyle: {
                color: "#fff",
              },
            },
            {
              name: "后年",
              textStyle: {
                color: "#fff",
              },
            },
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "17%",
          containLabel: true, //grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          type: "category", //坐标轴类型。
          boundaryGap: false, //坐标轴两边留白策略
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisLabel: {
            //坐标轴刻度标签的相关设置
            interval: 0,
            textStyle: {
              color: "#fff",
              fontSize: 10,
            },
          },
          axisLine: {
            //坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: "rgb(2,121,253)",
            },
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            //x轴的坐标文字
            show: true,
            textStyle: {
              color: "#fff", //文字的颜色
            },
          },
          max: 100, //最大值100
          axisLine: {
            //坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: "rgb(2,121,253)",
            },
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
          splitLine: {
            //坐标在grid区域的分割线
            lineStyle: {
              //设置分割线的样式(图表横线颜色)
              color: ["#153a8a"],
            },
          },
        },
        series: [
          {
            name: "明年",
            type: "line",
            data: this.newYear,
            lineStyle: {
              color: "rgb(255,108,20)", //线的颜色
            },
          },
          {
            name: "后年",
            type: "line",
            data: this.finnayYear,
            lineStyle: {
              color: "rgb(208,198,31)", //线的颜色
            },
          },
        ],
      }
      myChart.setOption(option);
      //图表自适应
      window.addEventListener("resize", function () {
        myChart.resize(); // myChart 是实例对象
      });
    },
    chart() {
      let myChart = echarts.init(this.$refs.charts, "macarons");
      this.newYear = [80, 20, 30, 60, 50, 80, 100, 20, 50, 80, 50, 100]
      this.finnayYear = [80, 90, 60, 50, 80, 80, 50, 60, 30, 90, 60, 90]
      let option = {
        color: ["rgb(8,252,7)", "rgb(255,168,0)", "rgb(255,108,20)", "rgb(208,198,31)"],
        title: {
          text: "",
        },
        tooltip: {
          //提示框
          trigger: "axis",
        },
        legend: {
          //图例的类型
          icon: "roundRect", //图例icon图标
          data: [
            {
              name: "上年",
              textStyle: {
                color: "#fff",
              },
            },
            {
              name: "本年",
              textStyle: {
                color: "#fff",
              },
            },
            {
              name: "明年",
              textStyle: {
                color: "#fff",
              },
            },
            {
              name: "后年",
              textStyle: {
                color: "#fff",
              },
            },
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "17%",
          containLabel: true, //grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          type: "category", //坐标轴类型。
          boundaryGap: false, //坐标轴两边留白策略
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisLabel: {
            //坐标轴刻度标签的相关设置
            interval: 0,
            textStyle: {
              color: "#fff",
              fontSize: 10,
            },
          },
          axisLine: {
            //坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: "rgb(2,121,253)",
            },
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            //x轴的坐标文字
            show: true,
            textStyle: {
              color: "#fff", //文字的颜色
            },
          },
          max: 100, //最大值100
          axisLine: {
            //坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: "rgb(2,121,253)",
            },
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
          splitLine: {
            //坐标在grid区域的分割线
            lineStyle: {
              //设置分割线的样式(图表横线颜色)
              color: ["#153a8a"],
            },
          },
        },
        series: [
          {
            name: "明年",
            type: "line",
            data: this.newYear,
            lineStyle: {
              color: "rgb(255,108,20)", //线的颜色
            },
          },
          {
            name: "后年",
            type: "line",
            data: this.finnayYear,
            lineStyle: {
              color: "rgb(208,198,31)", //线的颜色
            },
          },
        ],
      }
      myChart.setOption(option);
      //图表自适应
      window.addEventListener("resize", function () {
        myChart.resize(); // myChart 是实例对象
      });
    },
    last() {
      console.log("hello");
    },
    checkLine(value, index, arr) {
      console.log(value, index, arr, 'value, index, arr');
      this.typeList.forEach((item, i) => {
        item.ischeck = false;
        if (index == i) {
          if (value.val == this.optWkBtn) {
            // 第二次点击
            this.optWkBtn = '';
            value.ischeck = false;
            this.ischeck = false
            this.$nextTick(() => {
              this.my();
            })
          } else {
            // 第一次点击
            this.optWkBtn = value.val;
            value.ischeck = !value.ischeck;
            console.log(this.optWkBtn, 'this.optWkBtn');
            console.log("第一次点击");
            this.last()
            if (this.optWkBtn == 1 && value.ischeck == true) {
              this.ischeck = value.ischeck
              this.$nextTick(() => {
                this.mychart();
              })
            }
            else if (this.optWkBtn == 2 && value.ischeck == true) {
              this.ischeck = value.ischeck
              this.$nextTick(() => {
                this.mycharts();
              })
            }
            else if (this.optWkBtn == 3 && value.ischeck == true) {
              this.ischeck = value.ischeck
              this.$nextTick(() => {
                this.chart();
              })
            }
          }
        }
      });
    },
  },
};
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
}

.proCharts {
  width: 100%;
  height: 600px;
  background: rgb(14, 51, 129);
  margin: 0 auto;
  color: #fff;
}

.active {
  background: rgb(91, 193, 245);
}

.activeitem {}
</style>
    

 直接复制可用！！