动态添加echarts

Posted thekiterunner

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了动态添加echarts相关的知识,希望对你有一定的参考价值。

本次只贴js和jsp代码

jsp只需添加一个div即可,

    <div class="fLayout-right-box">
         <hy:layoutArea  width="100%" 
             showborder="false" align="center" id = ‘contrastEcharts‘>
         </hy:layoutArea>
    </div>

插入echart:

var xAxisData = [‘00:00‘, ‘00:15‘, ‘00:30‘, ‘00:45‘, ‘01:00‘, ‘01:15‘, ‘01:30‘, ‘01:45‘, ‘02:00‘, ‘02:15‘, ‘02:30‘, ‘02:45‘, ‘03:00‘, ‘03:15‘, ‘03:30‘, ‘03:45‘, ‘04:00‘, ‘04:15‘, ‘04:30‘, ‘04:45‘, ‘05:00‘, ‘05:15‘, ‘05:30‘, ‘05:45‘, ‘06:00‘, ‘06:15‘, ‘06:30‘, ‘06:45‘, ‘07:00‘, ‘07:15‘, ‘07:30‘, ‘07:45‘, ‘08:00‘, ‘08:15‘, ‘08:30‘, ‘08:45‘, ‘09:00‘, ‘09:15‘, ‘09:30‘, ‘09:45‘, ‘10:00‘, ‘10:15‘, ‘10:30‘, ‘10:45‘, ‘11:00‘, ‘11:15‘, ‘11:30‘, ‘11:45‘, ‘12:00‘, ‘12:15‘, ‘12:30‘, ‘12:45‘, ‘13:00‘, ‘13:15‘, ‘13:30‘, ‘13:45‘, ‘14:00‘, ‘14:15‘, ‘14:30‘, ‘14:45‘, ‘15:00‘, ‘15:15‘, ‘15:30‘, ‘15:45‘, ‘16:00‘, ‘16:15‘, ‘16:30‘, ‘16:45‘, ‘17:00‘, ‘17:15‘, ‘17:30‘, ‘17:45‘, ‘18:00‘, ‘18:15‘, ‘18:30‘, ‘18:45‘, ‘19:00‘, ‘19:15‘, ‘19:30‘, ‘19:45‘, ‘20:00‘, ‘20:15‘, ‘20:30‘, ‘20:45‘, ‘21:00‘, ‘21:15‘, ‘21:30‘, ‘21:45‘, ‘22:00‘, ‘22:15‘, ‘22:30‘, ‘22:45‘, ‘23:00‘, ‘23:15‘, ‘23:30‘, ‘23:45‘];
var option = {
    title : {
        text : ‘‘,
        x : ‘left‘
    },
    legend : {
        x : ‘right‘,
        data : [‘今日负荷‘, ‘昨日负荷‘]
    },
    tooltip : {
        trigger : ‘axis‘,
    },
    grid : {
        left : ‘5%‘,
        right : ‘5%‘,
        bottom : ‘30‘,
        containLabel : true
    },
    xAxis : {
        data : xAxisData
    },
    yAxis : {
        splitLine : {
            lineStyle : {
                type : ‘dashed‘
            }
        },
        scale : true,
        max : 100
    },
    axisLabel : {
        interval : 0
    },
    grid : {
        left : ‘8%‘,
        right : ‘0‘,
        bottom : ‘1%‘,
        containLabel : true
    },
    color : [‘#DD4B39‘, ‘#359CB6‘],
    series : [{
        type : ‘line‘,
        data : []
    }, {
        type : ‘line‘,
        data : []
    }]
};

一下为js代码,可参考编写:

function fun(){
var
dataArray = []; dataArray = eval(response.getParameter("powerLoad")); var dateArr = eval(response.getParameter("date")); //动态添加echarts div showTableAndEcharts.init(dataArray); //向echarts图中动态添加数据 for (var i = 0; i < dataArray.length; i++) { //options[i] = option; option.title.text = treeArray[i].label; option.legend.data = dateArr; option.series[0].name = dateArr[0]; option.series[1].name = dateArr[1]; //动态添加数据 option.series[0].data = dataArray[i][0]; option.series[1].data = dataArray[i][1]; myChart[i] = echarts.init(document.getElementById(‘echartsDiv‘ + i)); myChart[i].setOption(option); } $(window).resize(function() { for (var i = 0; i < dataArray.length; i++) { myChart[i].resize(); }
}
var showTableAndEcharts = { init : function(dataArray) { $("#contrastEcharts").empty().append(this.layout(dataArray)); }, layout : function(dataArray) { var html = ‘‘; if (dataArray.length == 1) { var css = ‘style = "height: 98%;width: 98%;float: center;border: 1px #ccc solid;margin: 3px; "‘; } else if (dataArray.length == 2) { var css = ‘style = "height: 98%;width: 45%;float: left;border: 1px #ccc solid;margin: 3px; "‘; } else { var css = ‘style = "height: 50%;width: 30%;float: left;border: 1px #ccc solid;margin: 3px; "‘; } for (var i = 0; i < dataArray.length; i++) { html += ‘<div ‘ + css + ‘ id="echartsDiv‘ + i + ‘"></div>‘; } return html; } }

 

以上是关于动态添加echarts的主要内容,如果未能解决你的问题,请参考以下文章

在片段中动态添加文本视图

怎么动态给echarts柱状图添加柱子

echarts怎么动态添加多条柱形图

使用 WindowManager.addView 添加动态视图

支持动态或静态片段的不同屏幕尺寸?

Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图