|
文章目录
ECharts简介使用场景实现步骤1、引入Echarts并且绘制一个简单的图表（html）2、创建一个折线图（js）3、了解ECharts需要的数据结构4、后台将数据整合返回给ECharts5、效果图
ECharts简介
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达 图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交 互组件，支持多图表、组件的联动和混搭展现。
使用场景
在项目中，根据用户选择的信息展示对应的折线图，折线图不是在一个ECharts上展示的，一个信息只占用一个ECharts
实现步骤
1、引入Echarts并且绘制一个简单的图表（html）
2、创建一个折线图（js）
var option;
function dataHisEcharts(dataList){
console.log(dataList);
var series = [];
var names=[];
$("#main").empty();// 清空div内容
for (var key in dataList) {
var datas = dataList[key];
var tagValue=[];
names = [];//将要展示的名字集合清空
if (key != 'time') {// 如果数据为x轴，就不再创建div
$("#main").append("");
}
var myChart = echarts.init(document.getElementById('main'+key));
for (var i = 0; i
tagValue.push(datas[i]);
}
}
if (key != 'time') {
var Item = {
name: key,
type: 'line',
data: tagValue
};
series = [];// 将数组清空
series.push(Item);
names.push(key);
}
option = {
title: {
text: ''+key+'监控属性趋势曲线'
},
legend: {
top:"6%",
data: names,
},
tooltip: {
trigger: 'axis',
formatter: function (params, ticket, callback) {
var htmlStr = '';
for(var i=0;i
htmlStr += xName + '';//x轴的名称
htmlStr +='';
htmlStr += ';';
htmlStr += seriesName + '：' + value;
}else{
htmlStr +='';
//为了保证和原来的效果一样，这里自己实现了一个点的效果
htmlStr += ';';
//圆点后面显示的文本
htmlStr += seriesName + '：' + value;
}
if(seriesName.indexOf("体积总量")!=-1){
htmlStr += 'm³';
}else if(seriesName.indexOf("体积流量")!=-1){
htmlStr += 'm³/h';
}else if(seriesName.indexOf("压力")!=-1){
htmlStr += 'KPa';
}else if(seriesName.indexOf("温度")!=-1){
htmlStr += '℃';
}
htmlStr += '';
}
return htmlStr;
}
},
grid: {
top:'30%',
left: '8%',
right: '8%',
bottom: '5%',
containLabel: true
},
xAxis: {
data: dataList["time"],
boundaryGap: false
},
yAxis: {
},
series: []
};
option.series = series; // 设置图表
myChart.clear();
myChart.setOption(option, true);// 使用刚指定的配置项和数据显示图表。
}
}
3、了解ECharts需要的数据结构
ECharts需要的数据结构是x，y格式的，要在后台将数据装换成下图这种格式返回给ECharts 
4、后台将数据整合返回给ECharts
后台的代码实现方式有很多种，在此仅提供一个参考的方法 
public Map getPointHistorical(List dataList) {
// 最终返回的集合
Map map = new HashMap();
// 返回的时间的集合
String[] times = new String[dataList.size()];
String[] strings;
List datetimeList = new ArrayList();
for (int i = 0; i
datetimeList.add(times[i]);
}
}
// 将y轴数据存入map
Map PointDataMapByName = dataList.stream().collect(Collectors.groupingBy(findTiaoJian::getPoint_name));
for (Map.Entry stringListEntry : PointDataMapByName.entrySet()) {
String tagName = stringListEntry.getKey();
map.put(tagName, getTagVlaues(datetimeList, dataList, tagName));
}
strings = datetimeList.toArray(new String[datetimeList.size()]);
// 将x轴数据存入map
map.put("time", strings);
return map;
}
/**
* 存储y轴参数
**/
public String[] getTagVlaues(List datetimeList, List dataList, String tagName) {
String[] values = new String[dataList.size()];
for (int i = 0; i
String value = new BigDecimal(pointData.getValue()).setScale(4, BigDecimal.ROUND_DOWN).stripTrailingZeros().toPlainString();
values[i] = value;
}else{
values[i] = "0";
}
}
return values;
}
5、效果图
梦想也许在今天无法实现，但重要的是，它在你心里。重要的是，你一直在努力，加油！！！
|