当前位置：首页 > article >正文

echarts设置x轴中文垂直显示，x轴滚动条

article 2024/10/22 1:15:54

echarts官网配置，主要配置dataZoom

option = {
  xAxis: {
    type: 'category',
    data: [
      '张三',
      '李四',
      '王五',
      '赵六',
      '孙七',
      '周八',
      '吴九',
      '郑十',
      '钱十一',
      '陈十二',
      '刘十三',
      '杨十四',
      '黄十五',
      '何十六',
      '宋十七'
    ],
    axisLabel: {
      formatter: function (value) {
        return value.split('').join('\n'); // 使用换行符实现垂直排列
      },
      interval: 0,
      margin: 30
    }
  },
  yAxis: [
    {
      type: 'value',
      name: '客户数（人）',
      position: 'left',
      alignTicks: true, // 对齐刻度线
      axisLine: { show: true }
      // axisLabel: {formatter: '{value} 单位1'}
    },
    {
      type: 'value',
      name: '承接率',
      position: 'right',
      alignTicks: true, // 对齐刻度线
      axisLine: { show: true },
      min: 0,
      max: 100,
      axisLabel: { formatter: '{value}%' }
    }
  ],
  series: [
    {
      data: [12, 7, 19, 3, 10, 1, 18, 14, 0, 9, 5, 16, 20, 4, 11],
      type: 'bar',
      itemStyle: {
        color: '#03D7FF' // 设置数据1的颜色
      }
    },
    {
      data: [6, 4, 12, 3, 8, 1, 15, 14, 0, 7, 5, 12, 15, 4, 8],
      type: 'bar',
      itemStyle: {
        color: '#006BFF' // 设置数据1的颜色
      }
    },

    {
      data: [50, 52, 95, 64, 21, 100, 83, 100, 0, 78, 100, 75, 75, 100, 73],
      type: 'line',
      yAxisIndex: 1,
      itemStyle: {
        color: '#ffd230'
      }
    }
  ],
  dataZoom: [
    {
      type: 'slider', // 滑动条类型
      start: 0, // 数据窗口范围的起始百分比
      end: 50, // 数据窗口范围的结束百分比
      show: true,
      zoomLock: true,
      backgroundColor: '#edf0fa',
      handleIcon: 'circle',
      handleSize: 8,
      handleStyle: {
        color: '#c5ccde',
        borderWidth: 0
      },
      showDetail: false,
      showDataShadow: false,
      borderRadius: 15,
      bottom: 50,
      height: 8,
      brushSelect: false,
      fillerColor: '#c5ccde',
      filterMode: 'empty'
    }
  ]
};