经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Echarts » 查看文章
Echarts动态加载多条折线图的实现代码
来源:jb51  时间:2019/5/24 11:37:05  对本文有异议

背景:动态加载多条折线图,折线图条数不确定

页面效果:

实现的页面效果

Echarts数据格式

页面代码

  1. //气象数据
  2. function serchQx(beginTime, endTime, str, parameter) {
  3. $("#rr").html("");//将循环拼接的字符串插入下拉列表
  4. var t = $("#imageParameter").val();
  5. $
  6. .ajax({
  7. type : "POST",
  8. data : {
  9. "str" : str,
  10. "beginTime" : beginTime,
  11. "endTime" : endTime,
  12. "parameter" : parameter,
  13. "t" : t
  14. },
  15. url : "${pageContext.servletContext.contextPath}/dataAnalysis/serch.action",
  16. success : function(result) {
  17. var aa = [];
  18. var tmp=[];
  19. if (parameter == 1) {
  20. aa.push('单位(℃)');
  21. //option.yAxis[0].name = aa;
  22. } else if (parameter == 2) {
  23. aa.push('单位(%)');
  24. //option.yAxis[0].name = aa;
  25. } else if (parameter == 3) {
  26. aa.push('单位(KPa)');
  27. //option.yAxis[0].name = aa;
  28. } else if (parameter == 4) {
  29. aa.push('单位(w/㎡)');
  30. //option.yAxis[0].name = aa;
  31. } else if (parameter == 5) {
  32. aa.push('单位(mm)');
  33. //option.yAxis[0].name = aa;
  34. } else if (parameter == 6) {
  35. aa.push('单位(m/s)');
  36. //option.yAxis[0].name = aa;
  37. }
  38. //处理数据
  39. //将从后台接收的json字符串转换成json对象
  40. var jsonobj = eval("(" + result + ")");
  41. //给图标标题赋值
  42. //option.legend.data = jsonobj.legend;
  43. //读取横坐标值
  44. //option.xAxis[0].data = jsonobj.axis;
  45. var series_arr = jsonobj.series;
  46. //驱动图表生成的数据内容,数组中每一项代表一个系列的特殊选项及数据
  47. for (var i = 0; i < series_arr.length; i++) {
  48. var datas=[];
  49. for(var j=0;j<series_arr[i].data.length;j++){
  50. var n=series_arr[i].data[j];
  51. var time=series_arr[i].time[j];
  52. var data=[time,n];
  53. datas.push(data);
  54. }
  55. //转换Series
  56. temp = {
  57. name: series_arr[i].name,
  58. type: "line",
  59. data: datas
  60. };
  61. tmp.push(temp)
  62. //option.series.push(temp);
  63. }
  64. myChart.clear();
  65. //myChart.setOption(option,true);
  66. myChart.setOption({ //加载数据图表
  67. color : colors,
  68. tooltip : {
  69. trigger : 'axis'
  70. },
  71. dataZoom : {
  72. show : true,
  73. start : 0,
  74. realtime : true
  75. },
  76. legend : {
  77. data : jsonobj.legend
  78. },
  79. grid : {
  80. top : 70,
  81. bottom : 50
  82. },
  83. calculable: true,
  84. xAxis : [ {
  85. type : 'time',
  86. boundaryGap : [ 0, 100 ],
  87. axisLabel : {
  88. textStyle : {
  89. fontSize : "10px"
  90. }
  91. }
  92.  
  93. }
  94.  
  95. ],
  96. yAxis : [ {
  97. name : aa,
  98. type : 'value',
  99. } ],
  100. series : tmp},true);
  101. }
  102. })
  103. }

后台封装的Series

  1. /**
  2. *
  3. */
  4. package com.myhope.domain;
  5.  
  6. import java.util.List;
  7.  
  8. /**
  9. * Description:<br/>
  10. * Copyright (c) , 2017, Jansonxu <br/>
  11. * This program is protected by copyright laws. <br/>
  12. * Program Name:Series<br/>
  13. * Date:2019年1月14日
  14. *
  15. * @author
  16. * @version : 1.0
  17. */
  18. public class Series {
  19. private String name;
  20. private String type;
  21. private List<Double> data;
  22. private List<String> time;
  23. public Series(String name, String type, List<Double> data, List<String> time) {
  24. super();
  25. this.name = name;
  26. this.type = type;
  27. this.data = data;
  28. this.time = time;
  29. }
  30. public List<String> getTime() {
  31. return time;
  32. }
  33.  
  34. public void setTime(List<String> time) {
  35. this.time = time;
  36. }
  37.  
  38. public String getName() {
  39. return name;
  40. }
  41. public void setName(String name) {
  42. this.name = name;
  43. }
  44. public String getType() {
  45. return type;
  46. }
  47. public void setType(String type) {
  48. this.type = type;
  49. }
  50. public List<Double> getData() {
  51. return data;
  52. }
  53. public void setData(List<Double> data) {
  54. this.data = data;
  55. }
  56. public Series() {
  57. super();
  58. }
  59. @Override
  60. public String toString() {
  61. return "Series [name=" + name + ", type=" + type + ", data=" + data + ", time=" + time + "]";
  62. }
  63.  
  64. }

后台封装Echarts

  1. /**
  2. *
  3. */
  4. package com.myhope.domain;
  5.  
  6. import java.util.List;
  7.  
  8. /**
  9. * Description:<br/>
  10. * Copyright (c) , 2017, Jansonxu <br/>
  11. * This program is protected by copyright laws. <br/>
  12. * Program Name:Echarts<br/>
  13. * Date:2019年1月14日
  14. *
  15. * @author
  16. * @version : 1.0
  17. */
  18. public class Echarts {
  19. private List<String> legend;//name
  20. private List<String> axis ;//横坐标
  21. private List<Series> series;//数据项
  22. private List<DataAnalysisTable> dataAnalysisTables;
  23.  
  24. public Echarts(List<String> legend, List<String> axis, List<Series> series,
  25. List<DataAnalysisTable> dataAnalysisTables) {
  26. super();
  27. this.legend = legend;
  28. this.axis = axis;
  29. this.series = series;
  30. this.dataAnalysisTables = dataAnalysisTables;
  31. }
  32.  
  33. public Echarts() {
  34. super();
  35. }
  36.  
  37. public List<String> getLegend() {
  38. return legend;
  39. }
  40. public void setLegend(List<String> legend) {
  41. this.legend = legend;
  42. }
  43. public List<String> getAxis() {
  44. return axis;
  45. }
  46. public void setAxis(List<String> axis) {
  47. this.axis = axis;
  48. }
  49. public List<Series> getSeries() {
  50. return series;
  51. }
  52. public void setSeries(List<Series> series) {
  53. this.series = series;
  54. }
  55.  
  56. public List<DataAnalysisTable> getDataAnalysisTables() {
  57. return dataAnalysisTables;
  58. }
  59.  
  60. public void setDataAnalysisTables(List<DataAnalysisTable> dataAnalysisTables) {
  61. this.dataAnalysisTables = dataAnalysisTables;
  62. }
  63.  
  64. @Override
  65. public String toString() {
  66. return "Echarts [legend=" + legend + ", axis=" + axis + ", series=" + series + ", dataAnalysisTables="
  67. + dataAnalysisTables + "]";
  68. }
  69. }

Action封装

将对应的东西传入页面即可

  1. Echarts echarts = new Echarts(legend, newAxis, series,);
  2. String jsonString = com.alibaba.fastjson.JSONObject.toJSONString(echarts);

初始化Echarts文件

  1. var dom = document.getElementById("xsl");
  2. var myChart = echarts.init(dom);
  3. myChart.showLoading({
  4. text : "图表数据正在努力加载..."
  5. });
  6. var app = {};
  7. app.title = '多 X 轴示例';
  8.  
  9. var colors = [ '#5793f3', '#d14a61', '#675bba', "#00FF00", "#FFFF00" ];
  10.  
  11. option = {
  12. color : colors,
  13. tooltip : {
  14. trigger : 'axis'
  15. },
  16. dataZoom : {
  17. show : true,
  18. start : 0,
  19. realtime : true
  20. },
  21. legend : {
  22. data : []
  23. },
  24. grid : {
  25. top : 70,
  26. bottom : 50
  27. },
  28. calculable: true,
  29. xAxis : [ {
  30. type : 'time',
  31. boundaryGap : [ 0, 100 ],
  32. axisLabel : {
  33. textStyle : {
  34. fontSize : "10px"
  35. }
  36. }
  37.  
  38. }
  39.  
  40. ],
  41. yAxis : [ {
  42. name : [],
  43. type : 'value',
  44. } ],
  45. series : []
  46. };
  47. myChart.clear();
  48. myChart.setOption(option, true);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号