echarts，边滑动边加载的实现

ECharts 插件，部分基础改造结构，滑动图表加载数据的实现

ECharts 官网： https://www.echartsjs.com/zh/index.html

在引用ECharts插件时，我们需要根据各自的需求来改变他的基本展示样式，例如：X、Y轴的数据展示，提示框的样式等，这些基本的样式修改和数据修改，可以在官网的教程和API、配置项上一一查找到，看你的仔细了。

下面有一个场景是，图表数据过大，我们需要分页加载其数据，但是，刚开始的时候没找到好的解决方法，就放弃了，那个时候只知道，如何把显示图表的缩放的模块隐藏及把每屏显示数据量固定（修改dataZoom属性）。
最近又出来了个需求，还是要实现这个样子，唉，老问题又来了，但是，今时不同往日了，我也成长了，所以，这回我尝试了用Canvas画图表和继续尝试Echarts的两种解决方式了。
（用Canvas画图表，最后存在一个问题没解决—滑动时绘制和显示有点不太顺畅，有点卡顿，所以暂时处于研究阶段，稍后在下一篇文章贴源码和解析。）

现在讲回主题，

ECharts 中的事件和行为:
https://www.echartsjs.com/zh/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA

给echarts组件区域添加datazoom事件， （当然我只是试了一下这个可以成功，但是细看了一下，好像还是不是那么完全正确，因为datazoom为数据区域缩放后的事件），当我配置，dataZoom为inside，控制图表刚开始显示的开始和结束的位置为固定的5个数据后，剩下的数据，在我在图表内部进行滑动查看时，会触发datazoom事件，这时，重新请求接口，请求分页数据，进行数据重新连接和重新赋值，然后进行改变图表显示数据。

代码奉上：（我是在HTML上引用vue和echarts文件，）

<!--html -->
<!-- echarts -->
        <div class="charts" id='chartsDiv' 
        >
            <div id="chartColumn" style="width:100%; height:400px;"
           ></div>
        </div>

//js code
new Vue({
    el:'#app',
    data: {
        echartsData: [
            {time: 1579992000000 , bmp:60},
                {time: 1578984000000 , bmp:120},
                {time: 1577973000000 , bmp:110},
                {time: 1576962000000 , bmp:200},
                {time: 1575951000000 , bmp:300},
        ],

        //echarts图表数据
        chartColumn: null,
        xdata: [],
        ydata:[],
        ydataMax: 300,


    },

    mounted() {
        var _ = this

        _.dealEchartsData()
    },
    updated() {
        var _ = this
        _.drawColumnChart()
    },

    methods: {
        //日期转换格式---（yyyy-MM-dd hh:mm:ss格式转换成其他格式）
        dateFormat(date,format){
            if(date){
                date = new Date(date);

                var year = date.getFullYear();
                var day = date.getDate() < 10 ? '0'+date.getDate() : date.getDate();
                var month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1;

                var minutes = (Array(2).join(0) + date.getMinutes()).slice(-2);
                var hours = (Array(2).join(0) + date.getHours()).slice(-2);
                var secondes = (Array(2).join(0) + date.getSeconds()).slice(-2); 

                var arrMonthChinese = ['一','二','三','四','五','六','七','八','九','十','十一','十二']
                var monthChinese = arrMonthChinese[date.getMonth()]

                switch(format) 
                {
                    case 'year':
                        return year + '年';
                        // break;
                    case 'month':
                        return monthChinese + '月';
                    case 'year_month':
                        return year + '-' + month;
                    case 'yyyy-MM-dd':
                        return year + '-' + month+ '-' + day;
                    case 'h_m_s':
                        return {hours: hours, minutes: minutes, secondes: secondes };
                    case 'month_day':
                        return month + '月' + day + '日';
                    case 'HH:mm':
                        return hours + ':' + minutes;
                    case 'MM/DD HH:mm':
                        return month + '/' + day + ' ' + hours + ':' + minutes;
                    case '/':
                        return year + '/' + month + '/' + day + ' ' + hours + ':' + minutes ;
                    default:
                        return year + '年' + month + '月' + day + '日' + ' ' + hours + ':' + minutes ; 
                }
            }     
        },

        dealEchartsData() {
            let _ = this
            _.xdata = []
            _.ydata = []

            _.echartsData.map(item => {
                _.xdata.push(_.dateFormat(item.time,'MM/DD HH:mm'))
                _.ydata.push(item.bmp)
                return item
            })
            _.drawColumnChart()
        },


        //echarts 数据图表方法
        drawColumnChart() {
            var _ = this
            _.chartColumn = echarts.init(document.getElementById('chartColumn'));
            // _.chartColumn.showLoading(); //_.chartColumn.hideLoading();
            _.chartColumn.setOption({
              title: {},
              tooltip: { //提示框组件修改
                   trigger: 'axis', //item
                   confine: true,
                   position: function(point, params, dom, rect, size){
                        return {left:point[0]-20 , top: '6%'}
                    },
                    formatter: '{c0}',
                    backgroundColor: '#2ECD70',
                    extraCssText: 'width:40px;text-align: center;font-size:10px;',
                    axisPointer: {
                        lineStyle: {
                            color:'#F36176'
                        }
                    }
                    

              },
              xAxis: {
                inverse:true ,//此属性控制方向,默认为false,改为true
                // type: 'category',
                "axisTick":{       //刻度线
                "show":false
                },
                "axisLine":{       //x轴
                "show":false
                },
                axisLabel : {
                    textStyle: {
                        color: '#B3B8BB'
                    },
                    
                    formatter: function (value, index) {//value当前值，index当前索引，//改变x轴显示数据
                        return _.dateFormat(value,'MM/DD HH:mm');
                    }
                },
                data: _.xdata
              },
              yAxis: {
                  type: 'value',
                  scale: true,
                  name: 'BMP',
                  max: 300,
                  min: 0,
                  splitNumber:5, 
                    "axisLine":{       //y轴
                        "show":false,
                            lineStyle: {
                                color: '#F5F5F5', 
                            }
                    },
                    axisLabel : {
                        textStyle: {
                            color: '#B3B8BB',
                            fontSize : 10
                        }
                    },
                    nameTextStyle:{
                        color:"#333E47",
                        fontSize : 14
                    }
              },
              series: [{
                  data: _.ydata,
                  type: 'line',
                  smooth: true,

                  showAllSymbol: true,  //显示全部的折线点
                  symbol:'circle',
                  symbolSize:8,
                  hoverAnimation: false,
                  itemStyle:{
                    normal:{
                        color:'#2ECD70', //改变折线点的颜色
                        lineStyle:{
                            color:'#2ECD70', //连线的颜色
                        }
                    }
                  },
                  
                }],
                dataZoom : [ //内置型数据区域缩放组件，  （平移：在坐标系中滑动拖拽进行数据区域平移）
                    {  
                        type: 'inside',   //内置型数据区域缩放组件
                        //控制，显示数据量为5个数据点
                        start: (1 - 5/_.ydata.length)*100, 
                        end: 100,
                    },

                 ],

            });

            _.chartColumn.on( 'datazoom', function (params) {
                // console.log(params);
                // 监听到有平移动作，就请求接口，数组增加
                _.getEchartsData()
                
            });
        },

        getEchartsData() {
            let _ = this

            if(_.echartsData.length < 10) {
                _.echartsData.push({time: 1579992000000 , bmp:60})
                _.dealEchartsData()
            }
        }


    }
});