有滑块拖动x轴的echarts图表

最新推荐文章于 2024-04-25 22:52:53 发布

小小小菜鸟1997

最新推荐文章于 2024-04-25 22:52:53 发布

阅读量901

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/HuLuWa1997/article/details/117114661

本文介绍了如何使用Echarts库创建一个带有滑块拖动功能的X轴图表。通过滑块，用户可以方便地查看图表数据的不同部分，增强了数据交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

option= {
    // backgroundColor: '#232f62',
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          x: '9%',
          y: '15%',
          x2: '3%',
          y2: '25%'
        },
        legend: {
          show: true,
          right: '5%',
          top: '8%',
          icon: 'rect'
        },
        calculable: true,
        xAxis: [{
          type: 'category',
          data: ['一级', '二级', '三级', '四级', '五级', '普调'],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#979797',
              width: 1
            }
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: '#3a70c3',
              width: 2
            }
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: '#000',
              fontSize: 12
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#E6E6E6'
            }
          }
        }],
        yAxis: [
          {
            type: 'value',
            position: 'left',
            min: 0,
            max: 100,
            interval: 20,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#979797',
                width: 1
              }
            },
            axisLabel: {
              show: true,
              // margin: 15,
              // formatter: '{value}件',
              textStyle: {
                color: '#000',
                fontSize: 12
              }
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#979797',
                width: 1
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#1c2a60',
                type: 'solid'
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['#fff','#F5F6FA']
              }
            }
          }
        ],
        dataZoom: [
        //   {
        //   "show": true,
        //   "height": 10,
        //   "xAxisIndex": [
        //     0
        //   ],
        //   bottom:'8%',
        //   "start": 50,
        //   "end": 90,
        //   // handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        //   // handleSize: '10%',
        //   // handleStyle:{
        //   //   color:"#d3dee5",
        //   // },
        //   textStyle:{
        //     color:"#333"},
        //   borderColor:"#1890ff"
        // },
        {
          type: 'slider',
          backgroundColor: '#C4E1FF',
          borderColor: '#C4E1FF',
          bottom:'8%',
          "xAxisIndex": [
            0
          ],
          "start": 50,
          "end": 90,
          "height": 10,
          handleIcon: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAYBAMAAAAIZcBFAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAJ1BMVEX///8ylvsylvkylvky
lvsxlvoxlfoxmPsylfsxlflrs/ro8/7///8fKazUAAAACXRSTlMAPbLmev79Pnv0jrGrAAAAAWJL
R0QAiAUdSAAAAAd0SU1FB+UFEgEhI5eXPlMAAABWSURBVBjTY2BAAozKM4HASADIdJ0JBikMDOyh
EGaYAAPTTChQYGCGMQ0YOGeuPgMEu2ZOADL3gJin0ZlICqCAKCbx5iI5B8mRjKlwpzO0wT2E7E04
AACGLHPkoj75gAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMS0wNS0xN1QxNzozMzozNSswODowMNTL
hjkAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjEtMDUtMTdUMTc6MzM6MzUrMDg6MDCllj6FAAAAIHRF
WHRzb2Z0d2FyZQBodHRwczovL2ltYWdlbWFnaWNrLm9yZ7zPHZ0AAAAYdEVYdFRodW1iOjpEb2N1
bWVudDo6UGFnZXMAMaf/uy8AAAAXdEVYdFRodW1iOjpJbWFnZTo6SGVpZ2h0ADI02IxsgAAAABZ0
RVh0VGh1bWI6OkltYWdlOjpXaWR0aAAyMCdOaBQAAAAZdEVYdFRodW1iOjpNaW1ldHlwZQBpbWFn
ZS9wbmc/slZOAAAAF3RFWHRUaHVtYjo6TVRpbWUAMTYyMTI0NDAxNbgGJvgAAAARdEVYdFRodW1i
OjpTaXplADIxNUJCehoI6gAAAEZ0RVh0VGh1bWI6OlVSSQBmaWxlOi8vL2FwcC90bXAvaW1hZ2Vs
Yy9pbWd2aWV3Ml85XzE2MDk5MDI3OTk1OTU2ODc4XzI3X1swXcuiL5MAAAAASUVORK5CYII=`,
          handleSize: '150%',
          fillerColor: '#3195F9',
          textStyle: {
            color: '#666'
          },
          dataBackground: {
            lineStyle: {
              color: 'transparent'
            },
            areaStyle: {
              color: 'transparent'
            }
          }
        }],
        series: [
          {
            name: '专业技术人员',
            type: 'bar',
            barWidth: '10px',
            data: [70, 50, 60, 40, 70, 50],
            itemStyle: {
              normal: {
                color: '#2EC054'
              }
            }
          }
        ]
      }