echarts图表第一个案例
生活随笔
收集整理的這篇文章主要介紹了
echarts图表第一个案例
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1.action中獲取到數(shù)據(jù)
@Overridepublic String execute() throws Exception {List<Student> find = echartsService.find();Gson g = new Gson();String list = g.toJson(find);ServletActionContext.getResponse().setCharacterEncoding("UTF-8");ServletActionContext.getResponse().getWriter().write(list);System.out.println(list);return NONE;}2.jsp頁面應(yīng)用echarts
<script type="text/javascript" src="<%=path%>/js/jquery-3.1.1.js"></script> <script type="text/javascript" src="<%=path%>/js/echarts.js" /></script> <script type="text/javascript">$(function() {var myChart = echarts.init(document.getElementById("main"));$("#btn").click(function() {$.ajax({url : "echarts",success : function(data) {var result = eval("(" + data + ")");var noe = new Array();var two = new Array();$.each(result, function(i, dom) {noe[i] = dom.name;two[i] = dom.address;});// 指定圖表的配置項和數(shù)據(jù)var option = ({title : {text : 'ECharts圖表'},tooltip : {trigger : 'axis',axisPointer : { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效type : 'cross' // 默認(rèn)為直線，可選為：'line' | 'shadow'|'cross' }},toolbox : {show : true,feature : {dataView : {show : true,readOnly : true},restore : {show : true},magicType : {type : [ 'line', 'bar', 'stack', 'tiled' ]},saveAsImage : {show : true}}},legend : {data : [ '人數(shù)' ]},xAxis : {data : two},yAxis : {},series : [ {name : '人數(shù)',type : 'bar',data : noe} ]});myChart.setOption(option);},error : function(data) {alert("請求報表錯誤");}});});}); </script>3.準(zhǔn)備一個具有寬高的容器(必須有寬高)
<body><input type="button" value="顯示圖表" id="btn" /><!-- 為ECharts準(zhǔn)備一個具備大小（寬高）的Dom --><div id="main" style="width: 600px;height:400px;"></div> </body>4.效果
?
轉(zhuǎn)載于:https://www.cnblogs.com/cnsdhzzl/p/6136463.html
總結(jié)
以上是生活随笔為你收集整理的echarts图表第一个案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： O2O的未来
- 下一篇： 信号量与条件变量的区别