echarts折柱混线图根据后台数据动态刷新显示数据

我电脑没有可以制作动图的软件，之前用office自带的PowerPoint录制视频但因为其它原因也无法录制了，所以页面效果我暂时放几张相连的图片展示效果哈，见谅：

整体思路：
为了便于理解，我将后台获取的数据LineScheduleData.platopositioninfos称值为数组A
一、首先需要从数据结构入手，echarts表无非就是按照数组里面的值显示的，所以最主要的就是搞定如何在后台获取数组A的时候，能够遍历数组A并依次返回n个数组对象的方法，再将n个数组对象的值放入echarts表显示的数组中（第4点的代码）
二、其次就是定时刷新数据，我是用了两个定时，一个是获取后台数据时，另一个是实例化echarts的数据时（第2点的代码）；在实例中定时的时候有一个主要的考虑因素，就是遍历数组A并依次返回n个数组对象的方法中需要传从索引的第几项开始，于是就要在setInterval中加一个能够计数的变量(第3点)
三、最后就是判断情况，总共分两种情况，一种是数组A的长度大于要显示的长度时（我这里是4），需要考虑遍历数组A并依次返回n个数组对象的方法；另一种是数组A的长度小于等于要显示的长度时，无需遍历，可以直接push给实例化对象的值。

echarts官网给的实例：去看看echarts实例
LineScheduleData.platopositioninfos 数组，值是自己造的，数据结构如下：

[
    {
        "position": "CY19", //这个是x轴的值
        "count": 3,	//这个是用于柱状图纵坐标的值
        "percent": 0.25, //这个是折线图的纵坐标值
        "state": 0,
        "ID": 0
    },
    {
        "position": "CN3",
        "count": 2,
        "percent": 0.4167,
        "state": 0,
        "ID": 0
    },
    {
        "position": "R336",
        "count": 2,
        "percent": 0.5833,
        "state": 0,
        "ID": 0
    },
    {
        "position": "Q509",
        "count": 1,
        "percent": 0.6667,
        "state": 0,
        "ID": 0
    },
    {
        "position": "CN4",
        "count": 1,
        "percent": 0.75,
        "state": 0,
        "ID": 0
    },
    {
        "position": "CN26",
        "count": 1,
        "percent": 0.8333,
        "state": 0,
        "ID": 0
    },
    {
        "position": "CN27",
        "count": 1,
        "percent": 0.9167,
        "state": 0,
        "ID": 0
    },
    {
        "position": "CX3",
        "count": 1,
        "percent": 1,
        "state": 0,
        "ID": 0
    }
]

1. 柱状图HTML显示部分：
实例id为positioninfosline

"width: 95%; height: 80%; margin: 0 auto;" id="positioninfosline">

2.在调用接口时传入实例化option的方法：
这里的next4Items方法是依次遍历数组并返回新长度的数据，代码在第4点

drawChart4() {
            var datax = [];
            var countDatay = [];
            var percentDatay = [];
            // 显示4条数据 判断若获取的数据的长度小于等于4，则直接赋值无需动态加载
            if (this.LineScheduleData.platopositioninfos.length <= 4) {
                for (var i = 0; i < this.LineScheduleData.platopositioninfos.length; i++) {
                    datax.push(this.LineScheduleData.platopositioninfos[i].position);//x轴的值
                    countDatay.push(this.LineScheduleData.platopositioninfos[i].count);//柱状图y的值 数量
                    percentDatay.push((Number(this.LineScheduleData.platopositioninfos[i].percent) * 100).toFixed(2));//折线图y的值 总百分比，转化为百分比的形式并保留两位小数
                }
            } else { //若获取数据的长度大于4，则需要调用next4Items方法
                var thedata = Main.next4Items(this.LineScheduleData.platopositioninfos, 4, 0)
                console.log("thedata", thedata);//这个是返回的数组及新的索引，可以输入看看结构
                for (var i of thedata[0]) {	//遍历返回的四个数组并push表中需要显示的值
                    datax.push(i.position);//x轴的值
                    countDatay.push(i.count);//柱状图y的值 数量
                    percentDatay.push((Number(i.percent) * 100).toFixed(2));//总折线图y的值 总百分比
                }
            }
            console.log("datax", datax); //输出为有四个字符串的数组
            // 基于准备好的dom，初始化echarts实例
            var chartDom = document.getElementById("positioninfosline");
            var myChart = this.$echarts.init(chartDom, "dark");
            var option;
            option = {
                backgroundColor: "transparent", 
                grid: {
                    top: "30%",
                    left: "10%",
                    right: "5%",
                    bottom: "10%",
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: datax,	//x轴的值
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '数量(个)', //显示柱状图的刻度
                        min: 0,
                        max: 'dataMax',
                        interval: 50,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: '占比',
                        min: 0,
                        max: 'dataMax',
                        show: false,//不显示折线图的刻度线，若想要显示双y轴，把这句话删掉即可
                        interval: 20,
                        axisLabel: {
                            formatter: '{value}%'
                        }
                    }
                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 个';
                            }
                        },
                        data: countDatay, //柱状图的y值
                        barWidth: '30px',
                        //显示数值
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'inside', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: 'white',
                                        fontSize: 12,
                                    },
                                },
                                color: function (params) {
                                //柏拉图颜色按顺序输出
                                    var colorList = [
                                        '#086276', '#35a39d', '#89cac4', '#a0d6eb', '#2c6854',
                                        '#59b48c', '#d94c1e', '#bc0d2a', '#4f667c', '#dae1d3', '#9aa5e3', '#decf39'
                                    ];
                                    return colorList[params.dataIndex]
                                },
                                barBorderRadius: [10, 10, 0, 0],
                                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                //     { offset: 0, color: "#69aafc" }, //深
                                //     { offset: 1, color: "#91b8db" }, //浅
                                // ]),
                            },
                        },
                    },
                    {
                        name: '占比',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '%';
                            }
                        },
                        data: percentDatay,//折线图的y值
                        itemStyle: {
                            normal: {
                                label: {
                                    formatter: "{c}" + "%",
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        color: 'white',
                                        fontSize: 12,
                                    },
                                },
                            },
                        },
                    }
                ]
            };
            option && myChart.setOption(option);
            
			//动态刷新主要代码如下
            if (this.LineScheduleData.platopositioninfos.length >= 5) { //若长度为5以上则需要动态刷新进入条件
                console.log("进入定时器")
                setInterval(() => {
                    var num = this.initChart4CountFun();//这个方法是计数器的方法
                    console.log("num2", num);
                    var thedata = Main.next4Items(this.LineScheduleData.platopositioninfos, 4, num)//这个是通过next4Items方法获取对应的四个数组
                    console.log("thedata2", thedata);
                    datax = [] //清空
                    countDatay = [] //清空
                    percentDatay = [] //清空
                    for (var i of thedata[0]) {
                        datax.push(i.position);//x轴数据
                        countDatay.push(i.count);//柱状图的y轴值 数量
                        percentDatay.push((Number(i.percent) * 100).toFixed(2));//折线图的y轴值 总百分比
                    }
                    console.log("datax22222", datax);
                    //重新实例化option并赋予新的数据使其显示
                    myChart.setOption({
                        xAxis: [
                            {
                                data: datax
                            }
                        ],
                        series: [
                            {
                                data: countDatay
                            }, {
                                data: percentDatay
                            }
                        ]
                    });
                }, 2100) //延时2100mm,官网给的示例也是这个时间,看着丝滑些
            }
        },

3. 计数器方法，num 为全局变量，初始值为0：

        initChart4CountFun() {
        	//若num的值小于需要显示数组的长度，则num持续加一
            if (this.num <= this.LineScheduleData.platopositioninfos.length) {
                this.num++
            } else { 
                this.num = 0
            }
            return this.num
        },

4. 遍历数组依次返回n个对象的方法：
这个方法是我从网上搜的,地址：js循环获取数组中固定个数元素
我把这个方法封装的Main.js里了，因为感觉应该会经常用到，需要调用这个方法时再导入Main.js就好了，也可以直接放到method里，把上面代码中所有的Main.替换成this

/**
 * 遍历数组依次返回n个对象的方法
* @allData: 待处理数组
* @n: 返回元素个数
* @index: 从索引的第几项开始
*/
export function next4Items(allData, n, index) {
    console.log("allData", allData);
    console.log("index", index);
    let startIndex = index;
    let length = allData.length;
    let newArr = [];

    if (index <= length - n) {
        newArr = allData.slice(startIndex, startIndex + n)
        startIndex += 1
    } else if (length - n < startIndex && startIndex < length) {
        newArr = [...allData.slice(startIndex, length), ...allData.slice(0, n - (length - startIndex))]
        startIndex += 1
    } else {
        startIndex = 0
        newArr = allData.slice(startIndex, startIndex + n)
        startIndex += 1
    }
    return [newArr, startIndex]
}

结束啦~ 编辑不易，若有不足或可优化的地方还请不吝指教