使用vue来绘制echarts图表（二)

使用vue来绘制echarts图表（二)

数据太多导致x轴过长怎么办！！！

今天我就来po一个小例子来解决x轴太长了导致页面很难看或者放不下的情况，这个时候我们可以选择让x轴自动轮播显示。

具体代码如图：

 // 基于准备好的dom，初始化echarts实例
          let myChart4 = this.$echarts.init(document.getElementById('warning_statistics'));
          // 绘制图表
          var KSMC = [60, 80, 90, 100, 120, 110, 125,130,134,150,180,90,80,70];
          var option=({
            title: {
              text: '折线图',
              textStyle:{
                align:'center',
                color:'#000',
                fontSize:20,
              },
              // top:'100%',
              // left:'10%'
            },
            // backgroundColor:'#0f375f',
            tooltip: {
            },
            legend: {
            },
            grid: {
              // bottom:'5%',
            },
            xAxis: {
              type: 'category',
              data: ['01.01', '01.02','01.03', '01.04','01.05','01.06','01.07','01.08','01.09','01.10','01.11','01.12','01.13','01.14',]
            },
            yAxis: {
              type:'value',
            },
            dataZoom:[//滑动条
              {
                xAxisIndex:0,//这里是从x轴的0刻度开始
                show:false,//是否显示滑动条，不影响使用
                type:'slider',//这个datazoom组件是slider型datazoom组件
                startValue:0,//从头开始
                endValue:5//一次性展示6个
              }],
            series: [
              {
                data: KSMC,
                type: 'line',
                smooth: true
              },
            ]
          });
          myChart4.setOption(option);
          //通过定时器的方式刷新，改变statrValue，endValue
          setInterval(function () {
            // 每次向后滚动一个，最后一个从头开始。
            if (option.dataZoom[0].endValue == KSMC.length ) {
              option.dataZoom[0].endValue = 6;
              option.dataZoom[0].startValue = 0;
            }
            else {
              option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
              option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
            }
            myChart4.setOption(option);
          }, 2000);

谢谢大家！啾咪~