项目使用插件---echarts

项目中用到了echarts的插件，其官网已经很好了，但是自己用到的比较具体，记录一下。

项目最终效果如下：

一、首先贴一下代码

引用echartsjs

<script type="text/javascript" src="${pageContext.request.contextPath}/eim/assets/echarts/echarts.min.js" ></script>

为了美观引用一下主题js，主题可以直接重官网下载，也可再官网配置

<script type="text/javascript" src="${pageContext.request.contextPath}/eim/assets/echarts/macarons.js" ></script><script type="text/javascript" src="${pageContext.request.contextPath}/eim/assets/echarts/macarons-blue.js" ></script>

<div id="mainchart" style="width: 100%;height:360px;"></div><div id="active" style="width: 100%;height:415px;"></div>

<script>$(function(){//倒计时refreshOnTime();  //10秒请求一次setInterval('refreshOnTime()', 10000);}); // 基于准备好的dom，初始化echarts实例var resourceChart = echarts.init(document.getElementById('mainchart'),'macarons');var activeChart = echarts.init(document.getElementById('active'),'macarons');// 指定图表的配置项和数据resourceChart.setOption({baseOption : {title : {text : '用户在线率/资源占用率',textStyle : {color : '#333',fontStyle : 'normal',fontWeight : "600",fontFamily : "microsoft yahei",fontSize : 16}},tooltip : {trigger : 'axis',axisPointer : { // 坐标轴指示器，坐标轴触发有效type : 'line' // 默认为直线，可选为：'line' | 'shadow'},formatter : function(params, ticket, callback) {var res = params[0].name;res += '<br/>' + params[0].seriesName + ' : '+ params[0].value + '%';if (params[1] != '') {res += '<br/>' + params[1].seriesName + ' : '+ params[1].value + '%';}if (params[2] != '') {res += '<br/>' + params[2].seriesName + ' : '+ params[2].value + '%';}setTimeout(function() {callback(ticket, res);}, 1)return res;}},legend : {x : 'right',data : [ '用户在线率', '磁盘', '内存' ]},grid : {x : '55px',y : '50px',width : '95%'},xAxis : [ {type : 'category',boundaryGap : false,data : []} ],yAxis : [ {type : 'value',axisLabel : {formatter : '{value} %'}} ],series : [ {name : '用户在线率',type : 'line',data : []}, {name : '磁盘',type : 'line',data : []}, {name : '内存',type : 'line',data : []} ]},media : [ {query : {maxWidth : 435},option : { // 这里写此规则满足下的option。title : {text : '用户在线率/资源占用率',textStyle : {color : '#333',fontStyle : 'normal',fontWeight : "600",fontFamily : "microsoft yahei",fontSize : 16}},tooltip : {trigger : 'axis',axisPointer : { // 坐标轴指示器，坐标轴触发有效type : 'line' // 默认为直线，可选为：'line' | 'shadow'},formatter : function(params, ticket, callback) {var res = params[0].name;res += '<br/>' + params[0].seriesName + ' : '+ params[0].value + '%';if (params[1] != '') {res += '<br/>' + params[1].seriesName + ' : '+ params[1].value + '%';}if (params[2] != '') {res += '<br/>' + params[2].seriesName + ' : '+ params[2].value + '%';}setTimeout(function() {callback(ticket, res);}, 1)return res;}},legend : {left : 'center',bottom : 0,orient : 'horizontal',data : [ '用户在线率', '磁盘', '内存' ]},grid : {x : '55px',y : '50px',width : '95%'},xAxis : [ {type : 'category',boundaryGap : false,data : []} ],yAxis : [ {type : 'value',axisLabel : {formatter : '{value} %'}} ],series : [ {name : '用户在线率',type : 'line',data : []}, {name : '磁盘',type : 'line',data : []}, {name : '内存',type : 'line',data : []} ]}} ]});// 指定图表的配置项和数据activeChart.setOption({title : {text : '活跃用户TOP',textStyle : {color : '#333',fontStyle : 'normal',fontWeight : "600",fontFamily : "microsoft yahei",fontSize : 16}},tooltip : {trigger : 'axis',axisPointer : { // 坐标轴指示器，坐标轴触发有效type : 'none' // 默认为直线，可选为：'line' | 'shadow'}},grid : {left : '40px',right : '40px',bottom : '8%',containLabel : true,y2 : 140},xAxis : [ {type : 'category',data : [],axisTick : {alignWithLabel : true},//设置字体倾斜  axisLabel : {rotate : -45,//倾斜度 -90 至 90 默认为0interval : 0},} ],yAxis : [ {type : 'value'} ],series : [ {name : '2017年',type : 'bar',barWidth : 30,//柱图宽度itemStyle : {normal : {color : new echarts.graphic.LinearGradient(0, 0, 0, 1,[ {offset : 0,color : '#fcc89f'}, {offset : 1,color : '#fd7262'} ])},emphasis : {color : new echarts.graphic.LinearGradient(0, 0, 0, 1,[ {offset : 0,color : '#fcc89f'}, {offset : 1,color : '#fd7262'} ])}},data : []//data: ${string}} ]});function refreshOnTime(){// 异步加载数据$.ajax({type : "get",async : true, //异步请求url : "${ctx}/index/index/selectmainchart", //请求发送到data : {},dataType : "json", //返回数据形式为jsonsuccess : function(data) {//请求成功时执行该函数内容，result即为服务器返回的json对象if (data) {resourceChart.setOption({ //加载数据图表xAxis : {data : data.name},series : [ {// 根据名字对应到相应的系列name : '用户在线率',data : data.countUser}, {// 根据名字对应到相应的系列name : '磁盘',data : data.countDisk}, {// 根据名字对应到相应的系列name : '内存',data : data.countMemory}, ]});}},error : function(errorMsg) {//请求失败时执行该函数console.log("图表请求数据失败!");}})// 异步加载数据$.ajax({type : "get",async : true, //异步请求url : "${ctx}/index/index/selecttop", //请求发送到data : {},dataType : "json", //返回数据形式为jsonsuccess : function(data) {//请求成功时执行该函数内容，result即为服务器返回的json对象if (data) {activeChart.setOption({ //加载数据图表xAxis : {data : data.name},series : [ {// 根据名字对应到相应的系列name : '最近7天内',data : data.count} ]});}},error : function(errorMsg) {//请求失败时执行该函数console.log("图表请求数据失败!");}})};/*窗口自适应，关键代码*/setTimeout(function() {window.onresize = function() {resourceChart.resize();activeChart.resize();}}, 200)</script>

1.echarts的使用方式
准备一个具备大小（宽高）的 DOM div 中的id--- mainchart
<div id="mainchart" style="width: 100%;height:360px;"></div>
通过 echarts.init 方法初始化一个 echarts 实例
var resourceChart = echarts.init(document.getElementById('mainchart'));
并通过 setOption 方法生成一个简单的图表
option = {}
resourceChart.setOption(option);
2.主题的使用方式
使用 echarts.init(dom, 'customed') 创建图表，第二个参数即为 主题.js 文件中注册的主题名字
var resourceChart = echarts.init(document.getElementById('mainchart'),'macarons');
注册主题名 echarts.registerTheme('macarons', {}）
3.多图表窗口自适应
baseOption: {
},
madia:{
query:{},//jquery madia规则 maxWidth: 435
option:{}
}
4.图表移动端适配
function mainchart(){
// 基于准备好的dom，初始化echarts实例
var resourceChart = echarts.init(document.getElementById('mainchart'),'macarons');
var activeChart = echarts.init(document.getElementById('active'),'macarons');
// 指定图表的配置项和数据
option = {};
option2 = {};
// 使用刚指定的配置项和数据显示图表。
resourceChart.setOption(option);
activeChart.setOption(option2);
/*窗口自适应，关键代码*/
setTimeout(function (){
window.onresize = function () {
resourceChart.resize();
activeChart.resize();
}
},200)
};
5.图表title样式
title: {
text: '用户在线率/资源占用率',
textStyle:{
color:'#333',
fontStyle:'normal',
fontWeight:"600",
fontFamily:"microsoft yahei",
fontSize:16
}
},
6.坐标轴百分比显示
yAxis: [
{
type : 'value',
axisLabel: {
formatter: '{value} %'
}
}
],
7.悬浮框格式化，显示百分比
tooltip中的formatter弹出层的格式化
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'line' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function(params,ticket,callback) {
var res = params[0].name;
res += '<br/>' + params[0].seriesName + ' : ' + params[0].value + '%';
if(params[1] != ''){
res += '<br/>' + params[1].seriesName + ' : ' + params[1].value+ '%';
}
if(params[2] != ''){
res += '<br/>' + params[2].seriesName + ' : ' + params[2].value+ '%';
}
setTimeout(function(){
callback(ticket, res);
}, 1)
return res;
}
},
第一个参数 params 是 formatter 需要的数据集。
componentType: 'series',
// 系列类型

seriesType: string,
// 系列在传入的 option.series 中的 index

seriesIndex: number,
// 系列名称

seriesName: string,
// 数据名，类目名 每条线所代表的名字

name: string,
// 数据在传入的 data 数组中的 index x轴上的名字

dataIndex: number,
// 传入的原始数据项

data: Object,
// 传入的数据值

value: number|Array,
// 数据图形的值
ticket 是异步回调标识，配合第三个参数 callback 使用。 第三个参数 callback 是异步回调
8.横坐标轴倾斜
xAxis : [
{
type : 'category',
data : ['李雪','周成龙','张敏','元芳菲','李菲儿','陈洁','张敏','元芳菲','李菲儿','陈洁'],
axisTick: {
alignWithLabel: true //刻度和标签对齐
},
//设置字体倾斜
axisLabel:{
rotate: -45,//倾斜度 -90 至 90 默认为0
interval: 0
},
}
],
9.柱状图固定宽度
series: [
{
name: '2017年',
type: 'bar',
barWidth : 30,//柱图宽度、
data[],
}
10.纵坐标轴颜色渐变
series-bar.itemStyle
图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
series: [
{
name: '2017年',
type: 'bar',
barWidth : 30,//柱图宽度
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#fcc89f'},
{offset: 1, color: '#fd7262'}
]
)
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#fcc89f'},
{offset: 1, color: '#fd7262'}
]
)
}
},
data: [131594, 124141, 121594, 114141, 81807, 71007, 51000, 35002, 18200, 3000]
}
]