EChart 关于图标控件的简单实用

１．下载前段框架并放入项目中去．２．在js中调用
<！DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>ECharts</title></head> <body> <！--Step:1 Prepare a dom for ECharts which （must） has size （width & hight）--> <！--Step:1 为ECharts准备一个具备大小（宽高）的Dom--> <div id="main" style="height: 500px; border: 1px solid #ccc; padding: 10px;"></div> <div id="mainMap" style="height: 500px; border: 1px solid #ccc; padding: 10px;"></div> <！--Step:2 Import echarts.js--> <！--Step:2 引入echarts.js--> <script src="${base.contextPath}/js/echarts.js"></script> <script type="text/javascript" src="${base.contextPath}/js/jquery-1.6.2.min.js"></script> <script type="text/javascript"> // Step:3 conifg ECharts"s path, link to echarts.js from current page. // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径 require.config（{ paths : { echarts : "${base.contextPath}/js" } }）; // Step:4 require echarts and use it in the callback. // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径 $（document）.ready（ function（） { $.ajax（{ url : "${base.contextPath}/total/data？type=1", type : "get", contentType : "application/json", cache : false, success : function（text） { var data = text; bar（data）; }, error : function（jqXHR, textStatus, errorThrown） { btnSave.setEnabled（true）; if （400 == jqXHR.status || 403 == jqXHR.status || 500 == jqXHR.status） return; var text = "操作失败，" + jqXHR.responseText; mini.alert（text）; } }）; }）; // bar（null）; function bar（data） { var sData = new Array（）; var sX = new Array（）; for （i = 0; i < data.length; i++） { sData[i] = data[i].total; sX[i] = data[i].brand; } require（[ "echarts", "echarts/chart/bar", "echarts/chart/line", //"echarts/chart/map" ], function（ec） { //--- 折柱 --- var myChart = ec.init（document.getElementById（"main"））; myChart.setOption（{ tooltip : { trigger : "axis" }, legend : { data : [ "总数" ] }, toolbox : { show : true, feature : { mark : { show : true }, dataView : { show : true, readOnly : false }, magicType : { show : true, type : [ "line", "bar" ] }, restore : { show : true }, saveAsImage : { show : true } } }, calculable : true, xAxis : [ { type : "category", data : sX } ], yAxis : [ { type : "value", splitArea : { show : true } } ], series : [ { name : "总数", type : "bar", data : sData }, /* { name:"降水量", type:"bar", data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] } */ ] }）; }）; } </script></body></html>本文永久更新链接地址：http://www.linuxidc.com/Linux/2016-02/128324.htm