百度echarts 的使用

1.在网页文件中添加一个js文件
 <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

你也可以自己百度下载一个。

2.以上是前端的解析脚本，为了便于开发一般都会对echart中的option封装一下。

其中对于java后台开发，有一个开源的库。

以下是maven地址。以下2个都必须放进去。

 <dependency>                <groupId>com.github.abel533</groupId>                <artifactId>ECharts</artifactId>                <version>3.0.0</version>            </dependency> <!--GsonOption必须 -->            <dependency>                <groupId>com.google.code.gson</groupId>                <artifactId>gson</artifactId>                <version>2.5</version>            </dependency>

用这个开源java库的好处就是方便你动态添加数据，对对应的表格进行封装为一个java文件。

一个表格为一个java文件的配置等，当然这是看需求。

然后可以创建一个包含main的文件添加以下代码进行测试。

package server.controller;import org.phypor.server.commons.EnhancedOption;import com.github.abel533.echarts.axis.CategoryAxis;import com.github.abel533.echarts.axis.ValueAxis;import com.github.abel533.echarts.code.Magic;import com.github.abel533.echarts.code.Tool;import com.github.abel533.echarts.code.Trigger;import com.github.abel533.echarts.feature.MagicType;import com.github.abel533.echarts.series.Line;public abstract class test {public static void main(String[] args) {EnhancedOption option = new EnhancedOption();option.legend("变化关系");option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new MagicType(Magic.line, Magic.bar),Tool.restore, Tool.saveAsImage);option.calculable(true);option.tooltip().trigger(Trigger.axis).formatter("Temperature : <br/>{b}km : {c}°C");ValueAxis valueAxis = new ValueAxis();valueAxis.axisLabel().formatter("{value} °C");option.xAxis(valueAxis);CategoryAxis categoryAxis = new CategoryAxis();categoryAxis.axisLine().onZero(false);categoryAxis.axisLabel().formatter("{value} km");categoryAxis.boundaryGap(false);categoryAxis.data(0, 10, 20, 30, 40, 50, 60, 70, 80);option.yAxis(categoryAxis);Line line = new Line();line.smooth(true).name("变化关系").data(15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5).itemStyle().normal().lineStyle().shadowColor("rgba(0,0,0,0.4)");option.series(line);System.out.println(option.toString());option.exportToHtml("line5.html");option.view();}}

其中maven里面是没有EnhancedOption类的，可以改为GsonOption类，把没有的函数去掉，因为这没有不利用我们测试。

我们测试可以采用System.out.println(option.toString());这句查看就好了。

然后我们该怎么把数据传到jsp呢？

下面是基于spring-mvc的部分代码，仅供参考。

@RequestMapping(value = "/management")public String management(Model model, HttpServletRequest request, Long id) throws Exception {List<AppStay> rs = appStayService.getAll();EnhancedOption option = new EnhancedOption();option.legend("变化关系");option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new MagicType(Magic.line, Magic.bar),Tool.restore, Tool.saveAsImage);option.calculable(true);option.tooltip().trigger(Trigger.axis).formatter("屬性 : <br/>{b}: {c}平均停留时间");List<String> ar = new ArrayList<String>();List<String> avg = new ArrayList<String>(); for (AppStay as : rs) {String avg_json = as.getAll_stat();Map<String, Object> a = JsonUtil.json2Map(avg_json);avg.add(a.get("avg") +"");SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd");String dateString = formatter.format(as.getTdate());ar.add(dateString);}ValueAxis valueAxis = new ValueAxis();valueAxis.axisLabel().formatter("{value} avg");option.yAxis(valueAxis);CategoryAxis categoryAxis = new CategoryAxis();categoryAxis.axisLine().onZero(false);categoryAxis.axisLabel().formatter("{value}");categoryAxis.boundaryGap(false);categoryAxis.data(ar.toArray());option.xAxis(categoryAxis);Line line = new Line();line.smooth(true).name("变化关系").data(avg.toArray()).itemStyle().normal().lineStyle().shadowColor("rgba(0,0,0,0.4)");option.series(line);model.addAttribute("option", option);return "user/management";}

jsp主要获取数据代码很简单,其中最重要的是这一句eval("("+str+")")

<script type="text/javascript">    var str = '${option}';    var option=eval("("+str+")");// 路径配置require.config({paths : {echarts : 'http://echarts.baidu.com/build/dist'}});// 使用require([ 'echarts', 'echarts/chart/line', 'echarts/chart/bar','echarts/chart/scatter', 'echarts/chart/k','echarts/chart/pie', 'echarts/chart/radar','echarts/chart/force', 'echarts/chart/chord','echarts/chart/gauge', 'echarts/chart/funnel','echarts/chart/eventRiver', 'echarts/chart/venn','echarts/chart/treemap', 'echarts/chart/tree','echarts/chart/wordCloud', 'echarts/chart/heatmap' ],function(ec) {// 基于准备好的dom，初始化echarts图表var myChart = ec.init(document.getElementById('main'));myChart.setOption( option );});</script>

如对你有帮助，可以进行捐赠。