echarts系列-----4 (legend单选和动态切换X轴数据)

本篇讲解legend单选和动态切换X轴数据，具体见代码，并标注注释（例子 文档事例都是有的，传送门?

• 默认选中 和 不选中 传送门?
• 只能单选（目前是2个，可以是2个以上）传送门?
• legendselectchanged event事件，实时监听，动态改变X轴的数据传送门?
• this.myChart.setOption(options, true); 重新渲染canvas传送门?
  

<template>
  <div>
    <div id="main" style="width:1200px;height:600px;"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "echartsmorey",
  data() {
    return {
      list: [
        {
          x: "01:00",
          y: 1,
          z: 9,
          x2: "1.1"
        },
        {
          x: "03:00",
          y: 2,
          z: 70,
          x2: "2.1"
        },
        {
          x: "05:00",
          y: 3,
          z: 1,
          x2: "3.1"
        },
        {
          x: "07:00",
          y: 1,
          z: 20,
          x2: "4.1"
        },
        {
          x: "09:00",
          y: 0,
          z: 18,
          x2: "5.1"
        },
        {
          x: "11:00",
          y: 10,
          z: 12,
          x2: "6.1"
        },
        {
          x: "13:00",
          y: 10,
          z: 12,
          k: 11
        },
        {
          x: "15:00",
          y: 10,
          z: 12,
          x2: "7.1"
        },
        {
          x: "17:00",
          y: 10,
          z: 12,
          x2: "8.1"
        }
      ],
      dayX: [], // 当天的 X轴
      monthX: [], // 当月的 X轴
      dataY: [] // Y 轴
    };
  },
  methods: {
    init(dataX, dataY) {
      this.myChart = echarts.init(document.getElementById("main"));
      let option = {
        legend: {
          icon: "stack",
          data: ["当天", "当月"],
          selectedMode: "single", // 单选
          selected: {
            当天: true,
            当月: false
          }
        },
        tooltip: {
          trigger: "none",
          axisPointer: {
            type: "cross"
          }
        },
        // 工具栏
        toolbox: {
          x: 1100,
          y: 0,
          feature: {
            saveAsImage: {
              name: `test`
            }
          }
        },
        grid: {
          left: "5%", //组件距离容器左边的距离
          right: "20%",
          top: "15%"
        },
        // X轴 滑块 可缩放
        dataZoom: [
          {
            type: "slider",
            show: true,
            start: 0, // 开始百分数
            end: 100 // 结束百分数
          }
        ],
        xAxis: {
          type: "category",
          splitLine: {
            // X 轴分隔线样式
            show: true,
            lineStyle: {
              color: ["#f3f0f0"],
              width: 2,
              type: "solid"
            }
          },
          data: dataX
        },
        yAxis: [
          {
            name: "Y轴单位写的位置",
            type: "value",
            position: "left",
            splitNumber: 10, // Y 轴分隔格数
            splitLine: {
              // Y 轴分隔线样式
              show: true,
              lineStyle: {
                color: ["#f3f0f0"],
                width: 2,
                type: "solid"
              }
            }
          }
        ],
        series: dataY
      };

      this.myChart.on("legendselectchanged", obj => {
        var options = this.myChart.getOption();
        options.xAxis[0].data = obj.name == "当月" ? this.monthX : this.dayX;
        this.myChart.setOption(options, true);
      });

      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.monthX = this.list.map(item => item.x2);
      this.dayX = this.list.map(item => item.x);

      this.dataY.push({
        name: "当月",
        type: "line", // 直线ss
        data: this.list.map(item => item.y)
      });

      this.dataY.push({
        name: "当天",
        type: "line",
        data: this.list.map(item => item.z)
      });

      this.init(this.dayX, this.dataY);
    });
  }
};
</script>

<style scoped>
</style>

补充：
当legend数据很多，想要换行，有个简单的办法，插入一条的空数据即可换行
比如: legend:[1,2,3,4,5,6,7,’’,3,4,5,6,7,8]