[WEB Front-end] eCharts use notes, webecharts

[WEB Front-end] eCharts use notes, webecharts

Record how to splice a Json string in the background, parse and use it in the foreground, and finally display the pie chart based on Json data

The pie chart mainly provides legend data parameters and series data parameters for the pieOption of echarts. The two data parameter formats are set by the echarts control designer to json format, that is, [{xx, xx}], so we can use javascript to directly receive and reorganize the json string sent from the background, so as to directly use the string content, as shown in the following example using eval ("(" + jsonStr + ") ") parse the Json string, use getSeriesData (data) and getlegendData (data) to restructure the Json format data required by data, and use it directly in legend: {data: getlegendData (name )}.

1. concatenate A Json string in the background

String hql = ""; List list = session. createSQLQuery (hql ). list (); String jsonStr = "["; for (int I = 0; I <list. size (); I ++) {// spell json String Object [] obj = (Object []) list. get (I); jsonStr + = "{\" name \ ": \" "+ TypeMap. getTypeName (Integer. parseInt (obj [0]. toString () + "\", "+" \ "nvalue \": \ "" + obj [1]. toString () + "\"}, ";}jsonstr = jsonStr. substring (0, jsonStr. length ()-1); // remove the last one, no. jsonStr + = "]";

2. echarts. jsp

<% @ Page language = "java" import = "java. util. *" pageEncoding = "GBK" %> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 




End.