專案使用外掛---echarts
阿新 • • 發佈：2018-12-29
專案中用到了echarts的外掛，其官網已經很好了，但是自己用到的比較具體，記錄一下。
專案最終效果如下：
一、首先貼一下程式碼
引用echartsjs
<script type="text/javascript" src="${pageContext.request.contextPath}/eim/assets/echarts/echarts.min.js" ></script><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 預設為0 interval : 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", //返回資料形式為json success : 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", //返回資料形式為json success : 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]
}
]var resourceChart = echarts.init(document.getElementById('mainchart'));
var resourceChart = echarts.init(document.getElementById('mainchart'));11.追記折線圖優化
程式碼：
Option: {
title: {
textStyle:{
color:'#333',
fontStyle:'normal',
fontWeight:"600",
fontFamily:"microsoft yahei",
fontSize:16
}
},
tooltip: {
trigger: 'axis',
axisPointer : { // 座標軸指示器，座標軸觸發有效
type : 'line' // 預設為直線，可選為：'line' | 'shadow'
}
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['8:10','8:20','8:30','8:40','8:50','9:00','9:10'],
//軸線
axisLine:{
lineStyle:{
color:'#dddddd'
}
},
//軸刻度
axisTick:{
lineStyle:{
color:'#dddddd'
}
},
//軸字
axisLabel:{
color:'#696969'
}
}
],
yAxis: [
{
type : 'value',
axisLabel: {
formatter: '{value} %'
},
//軸線
axisLine:{
lineStyle:{
color:'#dddddd'
}
},
//軸刻度
axisTick:{
lineStyle:{
color:'#dddddd'
}
},
//軸字
axisLabel:{
color:'#696969'
},
//網格
splitArea : {
show : true,
areaStyle : {
color: ['rgba(218,248,250,1)','rgba(218,248,250,0.8)','rgba(218,248,250,0.5)','rgba(218,248,250,0.2)','rgba(218,248,250,0.1)','rgba(218,248,250,0.0)','rgba(218,248,250,0)','rgba(218,248,250,0)','rgba(218,248,250,0)','rgba(218,248,250,0)','rgba(218,248,250,0)']
}
},
//網格線
splitLine : {
show : true,
lineStyle : {
width : 1,
color : '#dddddd',
type :'dashed'
}
}
}
],
series: [
{
name:'使用者線上率1',
type:'line',
data:[50, 59, 67, 53, 72, 65, 70]
}
]
},