在使用echarts之前需要做的工作是引入echarts所需的js：
<script type="text/javascript" src="${scriptspath}/echarts/echarts.min.js" charset="utf-8"></script>
定義要在那個div區域顯示圖形：
<div class="similarity-sentence" id="similarity-sentence"></div>
<div class="unqualified-sentences" id="unqualified-sentences"></div>
下面的id就是是上面div的id
distributiondiagram:function(id,topsimilarsentenceinfo) {
var sentenceindexarray = new array();
var sentencedataarray = new array();
var colorlistarray = new array();
//擷取句子的數量
if(doccheck.isnotblank(topsimilarsentenceinfo)) {
var sentencenum = topsimilarsentenceinfo.length;
for(var i = 0; i < sentencenum; i++) {
sentenceindexarray.push((i + 1) + '');
sentencedataarray.push(100);
if(doccheck.isnotblank(topsimilarsentenceinfo[i])) {
//表示的是progress-bar-danger，高度重合，危險型
if(topsimilarsentenceinfo[i].similarityvalue >= 70) {
colorlistarray.push('#ed6f87');
}
//表示的是progress-bar-warning,表示的警告類型的
else if(topsimilarsentenceinfo[i].similarityvalue >= 40 && topsimilarsentenceinfo[i].similarityvalue < 70) {
colorlistarray.push('#e1b465');
}
//表示的是progress-bar-success這種顔色的，表示是的安全類型的
else if(topsimilarsentenceinfo[i].similarityvalue < 40) {
colorlistarray.push('#8acd84');
} else {
colorlistarray.push('#8acd84');
}
}
}
//用于初始化這個圖形
var mychart = echarts.init(document.getelementbyid(id));
var option = {
title:{text:'句子相似度分布圖'},
color: ['#3398db'],
tooltip : {
trigger: 'axis',
axispointer : { // 坐标軸訓示器，坐标軸觸發有效
type : 'shadow' // 預設為直線，可選為：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containlabel: true
xaxis : [
{
type : 'category',
data : sentenceindexarray,
axistick: {
alignwithlabel: true
},
axislabel:{
show:true,
textstyle:{
fontsize:7
}
}
],
yaxis : [
show : true,
axislabel : {
show:false
axistick : {
show:false
type : 'value'
series : [
name:'句子平均相似度',
type:'bar',
barwidth: '100%',
tooltip:{
trigger : 'item',
formatter : function(params) {
var sentenceindex = parseint(params.name);
var rate = topsimilarsentenceinfo[sentenceindex -1].similarityvalue;
return '句子序号:' + params.name + '<br/>平均相似度:' + rate + '%';
}
data:sentencedataarray,
itemstyle: {
normal: {
color: function(params) {
// build a color map as your need.
// var colorlist = [
// '#ed6f87','#ed6f87','#ed6f87','#ed6f87','#ed6f87',
// '#8acd84','#8acd84','#8acd84','#8acd84','#8acd84',
// '#8acd84','#8acd84','#8acd84','#8acd84','#8acd84'
// ];
return colorlistarray[params.dataindex]
}
]
};
// 為echarts對象加載資料
mychart.setoption(option);
},
運作後的效果如下：
柱狀圖，餅狀圖，折線圖案例：
/*
* name :tuzuoquan
* mail :[email protected]
* date :2016/11/27
* version :1.0
* description:
* copyright (c) 2016-11-21
*/
(function($){
$.studentindex = {
/*
* 獲得json資料；資料格式檢視jsondata中的json檔案
* url: ajax 位址
* params type obj {} 配置傳回資料的多少，day week month
*callback 用于執行個體化echart 的回調函數
*id 用于放置echart表的dom元素 id 不用加“#”
* name; 表盤的名字自定義
* */
getdata:function(url,params,id,callback){
//console.log("url = " +url);
$.ajax({
type: "post",
url: url,
//async: false,
datatype: 'json',
contenttype: 'application/json; charset=utf-8',
data: params,
success: function(data) {
//console.log(data);
callback(id,data);
}
});
},
/**
* 初始化成圖示
* id :表示要放置柱狀圖的div的id
* json :表示json資料的内容
*/
initbarchart:function(id,json) {
var legenddataarr = json.legenddataarr;
var xaxisdataarr = json.xaxisdataarr;
var seriesdataarr = json.seriesdataarr;
var title = json.title;
// 基于準備好的dom，初始化echarts圖表
var mychart = echarts.init(document.getelementbyid(id));
var option = {
title:{
show:true,
text:title,
textstyle:{
fontsize:15,
fontweight:'normal'
},
tooltip: {
show: true
},
legend: {
orient : 'horizontal',
x : 'center',
y : 'bottom',
data:[title/*,'月檢測量2'**/]
},
xaxis : [
{
type : 'category',
data : ["12月","1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月"]
}
//,
//{
// type : 'category',
// data : ["12月1","1月1","2月1","3月1","4月1","5月1","6月1","7月1","8月1","9月1","10月1","11月1"]
//}
],
yaxis : [
type : 'value'
series : [
"name":"月檢測量",
"type":"bar",
"data":[20, 40, 80, 100, 120, 80,95,70,65,55,70,80]
]
};
option.legend.data = legenddataarr;
//定義x軸上的每列的标題
option.xaxis[0].data = xaxisdataarr[0].data;
//定義x軸上的每列的值
for(var i = 0; i < legenddataarr.length;i++) {
//添加上圖例
option.series[i].name = legenddataarr[i];
//第二個是柱狀圖
option.series[i].type = "bar";
//為圖示添加資料
option.series[i].data = seriesdataarr[i].data;
}
// 為echarts對象加載資料
mychart.setoption(option);
},
/**
* id :表示圖示要放置的位置
* json :表示用于顯示折線圖時所用到的json資料
*/
initlinechart:function(id,json) {
var mychart = echarts.init(document.getelementbyid(id));
var legenddataarr = json.legenddataarr;
option = {
title:{
text:"天檢測量",
fontweight:'normal'
tooltip : {
trigger: 'axis'
},
legend: {
orient : 'horizontal',
data:['天檢測量']
toolbox: {
show : true,
feature : {
mark : {show: true},
dataview : {show: true, readonly: false},
magictype : {show: true, type: ['line', 'bar'/*, 'stack', 'tiled'**/]},
restore : {show: true},
saveasimage : {show: true}
}
calculable : true,
xaxis : [
{
type : 'category',
boundarygap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
],
yaxis : [
{
type : 'value'
}
series : [
name:'天檢測量',
type:'line',
stack: '總量',
data:[120, 132, 101, 134, 90, 230, 210]
]
};
option.legend.data = legenddataarr;
option.series[i].type = "line";
// 為echarts對象加載資料
* json :表示用于顯示柱狀圖時所用到的json資料
initpiechart:function(id,json) {
var seriesdataarr = json.seriesdataarr;
option = {
title:{
show:true,
text:"使用者來源",
textstyle:{
fontsize:15,
fontweight:'normal'
}
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
orient : 'horizontal',
//data:['華南','華東','西北','西南','華北',"華中"]
data:legenddataarr
magictype : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelalign: 'center',
max: 1548
}
}
},
name:'使用者來源',
type:'pie',
radius : ['50%', '70%'],
itemstyle : {
normal : {
label : {
show : false
},
labelline : {
},
emphasis : {
show : true,
position : 'center',
textstyle : {
fontsize : '20',
fontweight : 'bold'
}
data:[
{value:seriesdataarr[0], name:legenddataarr[0]},
{value:seriesdataarr[1], name:legenddataarr[1]},
{value:seriesdataarr[2], name:legenddataarr[2]},
{value:seriesdataarr[3], name:legenddataarr[3]},
{value:seriesdataarr[4], name:legenddataarr[4]},
{value:seriesdataarr[5], name:legenddataarr[5]},
{value:seriesdataarr[6], name:legenddataarr[6]}
]
// option.legend.data = legenddataarr;
// //定義x軸上的每列的值
// for(var i = 0; i < legenddataarr.length;i++) {
// //添加上圖例
// option.series[0].data[i].name = legenddataarr[i];
// //為圖示添加資料
// option.series[0].data[i].value = seriesdataarr[i].data;
// }
// 為echarts對象加載資料
mychart.setoption(option);
}
};
})(jquery);
$(function() {
$.studentindex.getdata(contextpath +"/admin/index/getmonthdata.action", /**設定回調，對應的是後續項目中的action**/
{"id":"testid","roleid":"roleid"}, /**對應的是後續傳遞給背景action的params參數*/
'statistics-month', /**表示圖示要放在哪個id的div中*/
$.studentindex.initbarchart /**回調，用于生成圖示用*/
);
//$.studentindex.getdata(scriptspath + "common/index/month.json", /**設定回調，對應的是後續項目中的action**/
//{"id":"testid","roleid":"roleid"}, /**對應的是後續傳遞給背景action的params參數*/
//'statistics-month', /**表示圖示要放在哪個id的div中*/
//$.studentindex.initbarchart /**回調，用于生成圖示用*/
//);
//$.studentindex.getdata(scriptspath + "common/index/week.json", /**設定回調，對應的是後續項目中的action**/
// {"id":"testid","roleid":"roleid"}, /**對應的是後續傳遞給背景action的params參數*/
//'statistics-week', /**表示圖示要放在哪個id的div中*/
//$.studentindex.initlinechart /**回調，用于生成圖示用*/
//);
$.studentindex.getdata(
contextpath + "/admin/index/getdaydata.action", /**設定回調，對應的是後續項目中的action**/
'statistics-week', /**表示圖示要放在哪個id的div中*/
$.studentindex.initlinechart /**回調，用于生成圖示用*/
// $.studentindex.getdata(
// scriptspath + "/student/index/user.json", /**設定回調，對應的是後續項目中的action**/
// {"id":"testid","roleid":"roleid"}, /**對應的是後續傳遞給背景action的params參數*/
// 'statistics-user', /**表示圖示要放在哪個id的div中*/
// $.studentindex.initpiechart /**回調，用于生成圖示用*/
// );
contextpath + "/admin/index/groupbyarea.action", /**設定回調，對應的是後續項目中的action**/
'statistics-user', /**表示圖示要放在哪個id的div中*/
$.studentindex.initpiechart /**回調，用于生成圖示用*/
//$.studentindex.initpiechart("statistics-user","");
if ((navigator.useragent.indexof('msie') >= 0)
&& (navigator.useragent.indexof('opera') < 0)){
$("#statistics-month").find("div:first-child").css("margin-left","-155px");
}
});
着出來的效果如下：