在使用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',
// '#8ACD84','#8ACD84','#8ACD84','#8ACD84','#8ACD84'
// ];
return colorListArray[params.dataIndex]
}
}
}
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
},
运行后的效果如下：
柱状图，饼状图，折线图案例：
/*
* name :tuzuoquan
* mail :email@qq.com
* 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;
var xAxisDataArr = json.xAxisDataArr;
var seriesDataArr = json.seriesDataArr;
option = {
title:{
show:true,
text:"天检测量",
textStyle:{
fontSize:15,
fontWeight:'normal'
}
},
tooltip : {
trigger: 'axis'
},
legend: {
orient : 'horizontal',
x : 'center',
y : 'bottom',
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;
//定义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 = "line";
//为图标添加数据
option.series[i].data = seriesDataArr[i].data;
}
// 为echarts对象加载数据
myChart.setOption(option);
},
/**
* id :表示图标要放置的位置
* json :表示用于显示柱状图时所用到的json数据
*/
initPieChart:function(id,json) {
var myChart = echarts.init(document.getElementById(id));
var legendDataArr = json.legendDataArr;
var seriesDataArr = json.seriesDataArr;
option = {
title:{
show:true,
text:"用户来源",
textStyle:{
fontSize:15,
fontWeight:'normal'
}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'horizontal',
x : 'center',
y : 'bottom',
//data:['华南','华东','西北','西南','华北',"华中"]
data:legendDataArr
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'center',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'用户来源',
type:'pie',
radius : ['50%', '70%'],
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
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**/
{"id":"testId","roleId":"roleId"}, /**对应的是后续传递给后台action的params参数*/
'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 /**回调，用于生成图标用*/
// );
$.studentIndex.getData(
contextPath + "/admin/index/groupByArea.action", /**设置回调，对应的是后续项目中的action**/
{"id":"testId","roleId":"roleId"}, /**对应的是后续传递给后台action的params参数*/
'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");
}
});
着出来的效果如下：
相关资源：qt下 饼图 折线图 柱状图
