EChart多柱状和折线图定时刷新实时数据（vue和原生js都可以）

本文链接：https://blog.csdn.net/dashanjv/article/details/105138367

思路：1、整合数据，将柱状图和折线图需要的数据分类

2、熟悉图表

3、显示

4、执行完一次，清空一次数据

上代码（使用vue+element+axios）

执行顺序

fun();

function fun(){

// 获取数据接口

// 图表方法

// 定时器（如下）

setInterval(() => {

// 获取数据接口
setTimeout(() => {
// 柱状图方法
},500)
}, 20000);

}

setChart1(){
    // 这个地方写 获取数据的接口（获取完数据，延迟0.5秒执行图表）
    setTimeout(() => {        //    返回数据量大，需要需要过程
       this.zzt()
    },500)
},

// 写一个定时器
setInterval(() => {
   this.tsetChart1()
}, 20000);

注：使用原生js做这个，直接把zzt(){ 代码 } 中的代码复制过去就可以（自己构造新的数据）

zzt(){
                var arr = this.tableList                // 通过接口获取到的数据
                // 创建新的空数组，将获取到的数据进行分类
                var todayPlanCount      = [];           // 计划量   (一个柱状)
                var todayCompleeCount   = [];           // 完成量   (第二个柱状)
                var compeltetionRate    = [];           // 达成率   (折线图)
                var getName             = [];           // 名称         (X轴 名称)
                for(var i = 0; i < arr.length; i++){
                    // 判断获取的数据是否有空值（没有数据 则显示 null，图表会报错）
                    if(arr[i].Pnum == null){
                        todayPlanCount.push("0")
                    }else{
                        todayPlanCount.push(arr[i].Pnum.replace(/^\s*|\s*$/g,""))        // 去除前后空格
                    }
                    if(arr[i].Fnum == null){
                        todayCompleeCount.push("0")
                    }else{
                        todayCompleeCount.push(arr[i].Fnum.replace(/^\s*|\s*$/g,""))     //  去除前后空格
                    }
                    if(arr[i].PPC == null){
                        compeltetionRate.push("0")
                    }else{
                        compeltetionRate.push(arr[i].PPC.replace(/^\s*|\s*$/g,""))       //  去除前后空格
                    }
                    if(arr[i].OrganizeName == null){
                        getName.push("0")
                    }else{
                        getName.push(arr[i].OrganizeName.replace(/^\s*|\s*$/g,""))       //  去除前后空格
                    }
                }
                var myChart = echarts.init(document.getElementById('setCharts'));
                var  option = {
                        title: {
                            text: "图表",//正标题
                            x: "center", //标题水平方向位置
                            y: "20", //标题竖直方向位置
                            textStyle: {
                                fontSize: 18,
                                fontWeight: 'normal',
                                color: '#666'
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid:{
                            borderWidth:1
                        },
                        legend: {
                            // bottom
                            selectedMode: false,//不可点击
                            data:['日完成量','日计划量','达成率'],
                            y:'bottom'          // 显示的位置（最下面的 小方块)
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: getName,      // (最上面已经push完的数据 (X轴名称))
                                name: '',
                                axisLabel:{
                                    interval:0,
                                    rotate:10
                                }
                            }
                        ],
                        yAxis: [        // 设置Y轴双坐标
                            {           // 左面坐标
                                type: 'value',
                                name: '数量',
                                splitLine: {//不显示分割线
                                    show: false
                                },
                                axisLabel: {
                                    formatter: '{value}'
                                }
                            },
                            {           // 右面坐标
                                type: 'value',
                                name: '完成率',
                                axisLabel: {
                                    formatter: '{value}%'
                                },
                                splitLine: {
                                    show: false
                                }
                            }
                        ],
                        series: [       // 添加 图表（两个柱状一个这项），根据自己需求添加
                            {name:'日计划量',
                                type: 'bar',//柱状图
                                color:'#337ab7',//柱状的颜色
                                label: {    //提示的设置
                                    normal: {
                                        show: true,
                                        position: 'top'
                                    }
                                },
                                data:todayPlanCount     // (最上面已经push完的数据 (第一个柱状))
                            },
                            {name:'日完成量',
                                type: 'bar',//柱状图
                                color:'#6495ED',//柱状的颜色
                                label: {
                                    label: {//提示的设置
                                        normal: {
                                            show: true,
                                            position: 'top'
                                        }
                                    },
                                },
                                data:todayCompleeCount      // (最上面已经push完的数据 (第二个柱状))
                            },
                            {name:'日达成率',   //折线图
                                smooth: true,
                                type:'line',
                                color:'#2ec7c9',
                                yAxisIndex: 1,//索引从0开始
                                itemStyle : {  // 设置折线颜色
                                    normal : {
                                        color:'#2ec7c9'
                                    }
                                },
                                data:compeltetionRate       // (最上面已经push完的数据 (折线))
                            }
                        ]};
				// 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option); 
                //每执行完一次，清空一次，不清空则会累加
				todayPlanCount.splice(0,todayPlanCount.length);
				todayCompleeCount.splice(0,todayCompleeCount.length);
				compeltetionRate.splice(0,compeltetionRate.length);
				getName.splice(0,getName.length);
            }

完成图