在使用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");
}
});
着出来的效果如下：