zoukankan      html  css  js  c++  java
  • 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',
                     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' },
                    ]),
                  },
                },
              },
            ],
          }
  • 相关阅读:
    OpenWrt VTun Client
    LibreSpeed install on centos
    信号频道带宽、符号率、速率对应关系
    DVB相关标准
    Cisco Switch STP
    TROUBLESHOOTING MULTICAST ROUTING
    企业ERP核心模型与云计算生态
    Istio介绍(1)
    ServiceMesh案例
    Jenkins流水线发布实现CICD到Kubernetes
  • 原文地址:https://www.cnblogs.com/luckybaby519/p/15683862.html
Copyright © 2011-2022 走看看