本次只贴 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;
- }
- }
来源: http://www.bubuko.com/infodetail-2584091.html