实现拖动滑块让数据联动

视频详情

2

拖动滑块时同时改动左侧年份和图表

   // 初始化echarts图表
    initEcharts() {
      var myEcharts = echarts.init(document.getElementById("detailsEcharts"));
      myEcharts.setOption({
        // 鼠标悬浮显示x轴和y轴数据
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "none", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            return (
             `<div style="font-size:12px;">${ "年份：" +
              params[0].axisValue +
              "<br>" +
              "数据：" +
              params[0].data}</div>`
            );
          },
        },
        // 右上角工具栏
        toolbox: {
          show: true, //是否显示工具栏组件
          itemSize: 18, //工具栏icon的大小
          itemGap: 20, //item之间的间距
          left: 20, //toolbox的定位位置
          feature: {
            magicType: {
              //动态类型切换
              type: ["line", "bar"],
              title: {
                //工具栏 自定义标题名称
                line: "切换为折线图",
                bar: "切换为柱状图",
              },
            },
          },
          showTitle: true,
        },
        xAxis: {
          type: "category",
          data: this.echartsXShaftListData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.echartsYShaftListData,
            type: "bar",
            showBackground: false,
            barWidth: 30, //柱图宽度
            barGap: "0%",
            smooth: true, //平滑线条
            markPoint: {
              label: {
                show: true,
                position: "top",
                distance: 7,
                offset: [1, 1],
                formatter: "{b}: {c}",
              },
              symbolSize: 5,
              symbolOffset: [0, 0],
              data: [
                {
                  type: "max", //最大值
                  name: "MAX",
                },
              ],
            },
          },
        ],
        dataZoom: [
          {
            type: "slider",
            start: this.startYear,
            end: this.startYear.length - 1,
            show: true, //是否显示 组件
            brushSelect: false, //是否开启刷选功能
            showDetail: false, //是否显示detail，即拖拽时候显示详细数值信息。
            backgroundColor: "#fff", //组件的背景颜色。
            fillerColor: "#6CBEF0", //选中范围的填充颜色。
            width: 650, //滑动条型数据区域缩放组件 宽度
            height: 5,
            bottom: 25,
            right: 20, //滑动条型数据区域缩放组件 距离右侧容器的距离
            handleStyle: {
              color: "rgba(0, 0, 0, .5)",
              borderWidth: 15,
            },
          },
        ],
      });
      let that = this;
      // 当滑动条变化时触发
      myEcharts.on("datazoom", function () {
        that.$nextTick(() => {
          let startValue = myEcharts.getModel().option.dataZoom[0].startValue;
          let start = myEcharts.getModel().option.xAxis[0].data[startValue];
          let endValue = myEcharts.getModel().option.dataZoom[0].endValue;
          let end = myEcharts.getModel().option.xAxis[0].data[endValue];
          that.endYear = end;
          that.startYear = start;
          //that.startYear 开始年份
          //that.endYear 结束年份
        });
      });
    },