一個(gè)純Javascript的圖表庫，創(chuàng)新的拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶體驗(yàn)，賦予了用戶對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。 ?
支持折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點(diǎn)圖（氣泡圖）、K線圖、餅圖（環(huán)形圖）、雷達(dá)圖（填充雷達(dá)圖）、和弦圖、力導(dǎo)向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時(shí)提供標(biāo)題，詳情氣泡、圖例、值域、數(shù)據(jù)區(qū)域、時(shí)間軸、工具箱等7個(gè)可交互組件，支持多圖表、組件的聯(lián)動(dòng)和混搭展現(xiàn)。
頁面上的效果調(diào)整基于它的組件:
tooltip：
提示框，鼠標(biāo)懸浮交互時(shí)的信息提示。
showDelay20顯示延遲，添加顯示延遲可以避免頻繁切換，特別是在詳情內(nèi)容需要異步獲取的場景，單位ms
hideDelay100隱藏延遲，單位ms
legend：
僅僅只能有一個(gè)
data[]數(shù)組顯示如下列
Title 標(biāo)題
title: { text:title，x:'center',y: 'bottom'} 設(shè)置標(biāo)題位置
Grid：
控制圖表在div中的位置
xAxis
xAxis : [
{ type : 'category',
data : data.xList,
axisLabel:{
interval:0,//全部顯示
rotate:-90,//旋轉(zhuǎn)90°
show:true,
margin:9,
textStyle:{ color: 'blue', fontSize:15 }
} } ]
Axis
前臺(tái)方法:
function getBwqx(time,ycmc){
var title ="異常歷史曲線";
var yname = "異常終端數(shù)";
var chart4 = echarts.init(document.getElementById("chart4"));
? var option = {
? ? tooltip : {
? ? ? ? trigger: 'axis'
? ? },
? ? legend: {
? ? ? ? data:[],
? ? ? ? y:'top'
? ? },
? ? title: {
? text:title,
? x:'center',
? y: 'bottom'
? },
? grid:{
? ? y:100
? },
? ? xAxis : [
? ? ? ? {
? ? ? ? ? ? type : 'category',
? ? ? ? ? ? boundaryGap : false,
? ? ? ? ? ? data : []
? ? ? ? }
? ? ],
? ? yAxis : [
? ? ? ? {
? ? ? ? ? ? type : 'value',
? ? ? ? ? ? axisLabel : {
? ? ? ? ? ? ? ? formatter: '{value}'
? ? ? ? ? ? },
? ? ? ? ? ? name : yname
? ? ? ? }
? ? ],
? ? series : []//
};
chart4.setOption(option);
$.ajax({
async : true,
data : {
sjrq: time,
ycmc: ycmc,
chart:"chart4"
},
url : "${ctxPath}/Text.html?method=getBwqxt&ycmc="+ycmc,
type : "post",
dataType : "json",
success : function(data) {
var series=[];
//后臺(tái)返回這種格式的集合
//拼裝數(shù)據(jù)格式{xList=[2019-06-21, 2019-06-22], tList=[報(bào)文中無業(yè)務(wù)數(shù)據(jù), 報(bào)文錯(cuò)誤], yList=[[1, 2, 1, 3, ], [1, 1, 1, 0, ]]}
Map<String, Object>?map = new HashMap<String, Object>();
for(var i =0; i<data['tList'].length; i++){
series.push({
name : data['tList'][i],
type : 'line',
data : data['yList'][i]
});
}
? ? ? ? ? ? option.legend.data = data.tList;
? ? ? ? ? ? option.xAxis[0].data = data.xList;
? ? ? ? ? ? option.series = series;
? ? ? ? ? ? chart4.setOption(option, true);
}
});
}
每個(gè)圖表需要展示的數(shù)據(jù)格式不一樣
在比如餅圖顯示
數(shù)據(jù)格式
Map<List<String>,List<List<String>>> map = ?new HashMap<>;
[{"area":["襄城區(qū)","樊城區(qū)","襄州區(qū)","高新區(qū)","東津新區(qū)","襄陽市直","棗陽市","宜城市","老河口市","南漳縣","?？悼h","谷城縣"],"listmonth":["2017-04","2017-05","2017-06"],"listscore":[[32.54,47.99,38.64,40.27,35.94,49.92,46.64,39.49,39.25,45.87,40.29,40.81],[32.36,42.06,41.27,39.6,48.35,49.54,41.46,38.65,37.45,47.14,40.69,42.42],[32.36,46.81,42.5,39.38,0,52.84,46.06,42.47,37.75,47.1,42.81,40.63]]}]
循環(huán)方法如下：
series : [
? ? ? ? {
? ? ? ? ? ? name:'訪問來源',
? ? ? ? ? ? type:'pie',
? ? ? ? ? ? radius : '55%',
? ? ? ? ? ? center: ['50%', '60%'],
? ? ? ? ? ? data:[
? ? ? ? ? ? ? ? {value:335, name:'直接訪問'},
? ? ? ? ? ? ? ? {value:310, name:'郵件營銷'},
? ? ? ? ? ? ? ? {value:234, name:'聯(lián)盟廣告'},
? ? ? ? ? ? ? ? {value:135, name:'視頻廣告'},
? ? ? ? ? ? ? ? {value:1548, name:'搜索引擎'}
? ? ? ? ? ? ]
? ? ? ? }
? ? ]
代碼實(shí)現(xiàn):
success : function(responseText) {
? ? ? ? ? ? var seriesData = responseText;
? ? ? ? ? //循環(huán)內(nèi)容list，我返回的結(jié)果為list<Map<String>,Object>
? ? ? ? ? ? for(var i = 0 ;i<seriesData.length;i++){//餅狀圖內(nèi)容需要的格式為 {name:a,value:1}
? ? ? ? ? ? ? ? datas.push({
? ? ? ? ? ? ? ? ? ? name : seriesData[i].VALUE,
? ? ? ? ? ? ? ? ? ? value : seriesData[i].NAME? ? ?
? ? ? ? ? ? ? ? }); ? ? ? ? ? ?
? ? ? ? ? ? ? ? data_.push(
? ? ? ? ? ? ? ? seriesData[i].VALUE ? ?
? ? ? ? );
? ? ? ? ? ? ? ? }
? ? ? ? ? ? option.series[0].data = datas;
? ? ? ? ? ? option.legend.data = data_;
? ? ? ? ? ? chart2.setOption(option, true);
? ? ? ? }
// 過渡---------------------
myChart.showLoading({
? ? text: '正在努力的讀取數(shù)據(jù)中...',? ? //loading話術(shù)
});
// ajax getting data...............
// ajax callback
myChart.hideLoading();
