一个纯Javascript的图表库，创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
页面上的效果调整基于它的组件:
tooltip：
提示框，鼠标悬浮交互时的信息提示。
showDelay20显示延迟，添加显示延迟可以避免频繁切换，特别是在详情内容需要异步获取的场景，单位ms
hideDelay100隐藏延迟，单位ms
legend：
仅仅只能有一个
data[]数组显示如下列
Title 标题
title: { text:title，x:'center',y: 'bottom'} 设置标题位置
Grid：
控制图表在div中的位置
xAxis
xAxis : [
{ type : 'category',
data : data.xList,
axisLabel:{
interval:0,//全部显示
rotate:-90,//旋转90°
show:true,
margin:9,
textStyle:{ color: 'blue', fontSize:15 }
} } ]
Axis
前台方法:
function getBwqx(time,ycmc){
var title ="异常历史曲线";
var yname = "异常终端数";
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=[];
//后台返回这种格式的集合
//拼装数据格式{xList=[2019-06-21, 2019-06-22], tList=[报文中无业务数据, 报文错误], 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);
}
});
}
每个图表需要展示的数据格式不一样
在比如饼图显示
数据格式
Map<List<String>,List<List<String>>> map = new HashMap<>;
[{"area":["襄城区","樊城区","襄州区","高新区","东津新区","襄阳市直","枣阳市","宜城市","老河口市","南漳县","保康县","谷城县"],"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]]}]
循环方法如下：
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
代码实现:
success : function(responseText) {
var seriesData = responseText;
//循环内容list，我返回的结果为list<Map<String>,Object>
for(var i = 0 ;i<seriesData.length;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: '正在努力的读取数据中...', //loading话术
});
// ajax getting data...............
// ajax callback
myChart.hideLoading();
