echarts 圖表縮放 X軸Y軸數據縮放

鼠標滾動縮放

 

 Y軸與X軸數據縮放，在dataZoom中設置即可

     var Xdata = ['63.27','27.90','33.52','17.98','42.25','24.54','33.96','11.73','72.58','45.36',];
      var Ydata = ['西安市','銅川市','咸陽市','漢中市','商洛市','安康市','渭南市','寶雞市','延安市','榆林市',];
  option = {
        title: {
          text: '',
          textStyle: {
            fontSize: 12,
            color: '#11DEF6', //標題顏色
          },
          subtext: '',
          subtextStyle: {
            fontSize: 12,
            color: '#E4765D', //副標題標題顏色
          },
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐標軸指示器，坐標軸觸發有效
            type: 'shadow', // 默認為直線，可選為：'line' | 'shadow'
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          //坐標軸類型(類目軸)
          name: '',
          type: 'value',
          axisLabel: {
            show: false,
          },

          //是否顯示坐標軸刻度
          axisTick: { show: false },
          //坐標軸線線的顏色
          axisLine: {
            show: false,
          },

          //是否顯示網格線
          splitLine: {
            show: false,
          },
        },

        yAxis: [
          {
            type: 'category',
            inverse: true, //是否是反向坐標軸
            data: Ydata,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff',
              },
            },
            offset: 10,
            nameTextStyle: {
              fontSize: 15,
            },
            splitLine: { show: false },
            axisTick: { show: false },
            //坐標軸線線的顏色
            axisLine: {
              show: true,
              lineStyle: {
                color: '#0E3B57',
                type: 'solid',
                width: 1,
              },
            },
          },
        ],
        dataZoom: [
          {
            type: 'inside', //無滑動條內置縮放   type: 'slider', //縮放滑動條
            show: true, //開啟
            yAxisIndex: [0], //Y軸滑動
            //  xAxisIndex: [0],//X軸滑動
            start: 1, //初始化時，滑動條寬度開始標度
            end: 50, //初始化時，滑動條寬度結束標度
          },
        ],
        series: [
          {
            name: '用水量',
            type: 'bar',
            barMaxWidth: 10,
            // barWidth: "60%",
            data: Xdata,
            barWidth: 8,
            barGap: 10,
            smooth: true,
            label: {
              normal: {
                show: false,
                position: 'right',
                offset: [5, -2],
                textStyle: {
                  color: '#11DEF6',
                  fontSize: 13,
                },
              },
            },
            itemStyle: {
              emphasis: {
                barBorderRadius: 7,
              },
              //顏色漸變
              normal: {
                barBorderRadius: 7,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: '#040F3A' },
                  { offset: 0.5, color: '#02527C' },
                  { offset: 1, color: '#11DEF6' },
                ]),
              },
            },
          },
        ],
      }