您好,登錄后才能下訂單哦!
調(diào)用源碼:
https://gitee.com/free/ECharts
也可以下載
<!-- 引入 echarts.jar -->
<dependency>
<groupId>com.github.abel533</groupId>
<artifactId>ECharts</artifactId>
<version>3.0.0.6</version>
</dependency>
<!--GsonOption必須-->
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.6.2</version>
<scope>compile</scope>
<optional>true</optional>
</dependency>
demo
GsonOption option = new GsonOption();
option.tooltip().trigger(Trigger.axis);
option.legend("郵件營(yíng)銷", "聯(lián)盟廣告", "直接訪問(wèn)", "搜索引擎");
option.toolbox().show(true);
option.calculable(true);
option.xAxis(new CategoryAxis().boundaryGap(false).data("周一", "周二", "周三", "周四", "周五", "周六", "周日"));
option.yAxis(new ValueAxis());
option.series(new Line().smooth(true).name("郵件營(yíng)銷").stack("總量").symbol(Symbol.none).data(120, 132, 301, 134, new LineData(90, Symbol.droplet, 5), 230, 210));
//實(shí)現(xiàn)不了js的這個(gè)效果
//line.itemStyle.normal.areaStyle = new AreaStyle();
LineData lineData = new LineData(201, Symbol.star, 15);
lineData.itemStyle().normal().label().show(true).textStyle().fontSize(20).fontFamily("微軟雅黑").fontWeight("bold");
option.series(new Line().smooth(true).name("聯(lián)盟廣告").stack("總量").symbol("image://http://echarts.baidu.com/doc/asset/ico/favicon.png").symbolSize(8).data(120, 82, lineData, new LineData(134, Symbol.none), 190, new LineData(230, Symbol.emptypin, 8), 110));
System.out.println(option.toString());
有字符串
后面就集成就行
接受
這個(gè)行就是接受上面?zhèn)鬟^(guò)來(lái)的參數(shù)
<input type="hidden" th:value="${datanums}" id="numsvv"/>
//獲取參數(shù)
var datachart=$("#numsvv").val();
//這一步必須處理,否在不能顯示數(shù)據(jù)
optiondata = JSON.parse(datachart);
//渲染
twoTimeChart.setOption(optiondata);
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h3>其他key <small>調(diào)用次數(shù)</small></h3>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<div id="keyTimeTwo" ></div>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<canvas id="canvasDoughnut"></canvas>
</div>
</div>
</div>
![](https://s1.51cto.com/images/blog/201912/05/8588fd30a3e379cf963e2ef274704e31.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
依賴:
echarts.min.js
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。