echarts X轴过长时 滑动显示

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

// 绘制图表
let xAxisData = [
  '济南市',
  '青岛市',
  '淄博市',
  '枣庄市',
  '东营市',
  '烟台市',
  '潍坊市',
  '济宁市',
  '泰安市',
  '威海市',
  '日照市',
  '滨州市',
  '德州市',
  '聊城市',
  '临沂市',
  '菏泽市'
];
let dataList1 = [
  '80',
  '80',
  '80',
  '80',
  '80',
  '80',
  '80',
  '80',
  '80',
  '80',
  '80',
  '80',
  '80',
  '80',
  '80',
  '80'
];
let dataList2 = [
  '20',
  '20',
  '20',
  '20',
  '20',
  '20',
  '20',
  '20',
  '20',
  '20',
  '20',
  '20',
  '20',
  '20',
  '20',
  '20'
];
// 指定图表的配置项和数据
option = {
  tooltip: {
    trigger: 'axis'
  },
  dataZoom: [
    //给x轴设置滚动条
    {
      startValue: 0,
      endValue: 6, // 显示条数
      type: 'slider',
      show: true,
      xAxisIndex: [0],
      handleSize: 0, //滑动条的 左右2个滑动条的大小
      height: 8, //组件高度
      left: 50, //左边的距离
      right: 40, //右边的距离
      bottom: 26, //右边的距离
      handleColor: '#EFEFEF', //h滑动图标的颜色
      handleStyle: {
        borderColor: '#409EFF',
        borderWidth: '1',
        shadowBlur: 2,
        background: '#EFEFEF',
        shadowColor: '#EFEFEF'
      },
      fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
        {
          //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
          //给第一个设置0，第四个设置1，就是垂直渐变
          offset: 0,
          color: '#409EFF'
        },
        {
          offset: 1,
          color: '#409EFF'
        }
      ]),
      backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
      showDataShadow: false, //是否显示数据阴影 默认auto
      showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
      handleIcon:
        'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
      filterMode: 'filter'
    }
    //下面这个属性是里面拖到
    //   {
    //     type: 'inside',
    //     show: true,
    //     xAxisIndex: [0],
    //     start: 0, //默认为1
    //     end: 50,
    //   },
  ],
  calculable: true,
  legend: {
    data: ['未完成', '已完成'],
    bottom: 0
  },
  xAxis: [
    {
      type: 'category',
      data: xAxisData,
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '%',
      nameTextStyle: {
        lineHeight: 16
      }
    }
  ],
  series: [
    {
      name: '已完成',
      type: 'bar',
      label: {
        show: true,
        position: 'inside'
      },
      color: '#409EFF', //柱条颜色
      data: dataList1,
      zlevel: 1,
      barCategoryGap: '26',
      stack: 'one'
    },
    {
      name: '未完成',
      type: 'bar',
      label: {
        show: true,
        position: 'inside'
      },
      // barGap: '-100%', //不同系列的柱间距离，为百分比。
      color: '#44CCF9', //柱条颜色
      data: dataList2,
      barWidth: '26',
      stack: 'one'
    }
  ]
};

option && myChart.setOption(option);

 

import * as echarts from 'echarts';
var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;
// 绘制图表let xAxisData = [  '济南市',  '青岛市',  '淄博市',  '枣庄市',  '东营市',  '烟台市',  '潍坊市',  '济宁市',  '泰安市',  '威海市',  '日照市',  '滨州市',  '德州市',  '聊城市',  '临沂市',  '菏泽市'];let dataList1 = [  '80',  '80',  '80',  '80',  '80',  '80',  '80',  '80',  '80',  '80',  '80',  '80',  '80',  '80',  '80',  '80'];let dataList2 = [  '20',  '20',  '20',  '20',  '20',  '20',  '20',  '20',  '20',  '20',  '20',  '20',  '20',  '20',  '20',  '20'];// 指定图表的配置项和数据option = {  tooltip: {    trigger: 'axis'  },  dataZoom: [    //给x轴设置滚动条    {      startValue: 0,      endValue: 6, // 显示条数      type: 'slider',      show: true,      xAxisIndex: [0],      handleSize: 0, //滑动条的 左右2个滑动条的大小      height: 8, //组件高度      left: 50, //左边的距离      right: 40, //右边的距离      bottom: 26, //右边的距离      handleColor: '#EFEFEF', //h滑动图标的颜色      handleStyle: {        borderColor: '#409EFF',        borderWidth: '1',        shadowBlur: 2,        background: '#EFEFEF',        shadowColor: '#EFEFEF'      },      fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [        {          //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变          //给第一个设置0，第四个设置1，就是垂直渐变          offset: 0,          color: '#409EFF'        },        {          offset: 1,          color: '#409EFF'        }      ]),      backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色      showDataShadow: false, //是否显示数据阴影 默认auto      showDetail: false, //即拖拽时候是否显示详细数值信息 默认true      handleIcon:        'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',      filterMode: 'filter'    }    //下面这个属性是里面拖到    //   {    //     type: 'inside',    //     show: true,    //     xAxisIndex: [0],    //     start: 0, //默认为1    //     end: 50,    //   },  ],  calculable: true,  legend: {    data: ['未完成', '已完成'],    bottom: 0  },  xAxis: [    {      type: 'category',      data: xAxisData,      axisPointer: {        type: 'shadow'      }    }  ],  yAxis: [    {      type: 'value',      name: '%',      nameTextStyle: {        lineHeight: 16      }    }  ],  series: [    {      name: '已完成',      type: 'bar',      label: {        show: true,        position: 'inside'      },      color: '#409EFF', //柱条颜色      data: dataList1,      zlevel: 1,      barCategoryGap: '26',      stack: 'one'    },    {      name: '未完成',      type: 'bar',      label: {        show: true,        position: 'inside'      },      // barGap: '-100%', //不同系列的柱间距离，为百分比。      color: '#44CCF9', //柱条颜色      data: dataList2,      barWidth: '26',      stack: 'one'    }  ]};
option && myChart.setOption(option);