这个项目会经常用到统计图表，每次都写一大堆的echars设置感觉有点累，所以对东西进行了一下简单的封装。只需要通过后台传递相同的对象，将数据直接填充就可以了。
java后台封装对象：
/**
* 折线图数据模型(其实对柱状图也适用）只是在适用的时候注意数据的适用
* @author zengK
* @ClassName: LineDataModel
* @projectName XXX
* @description: TODO
* @date 2019/7/8 000820:18
*/
public class LineDataModel {
private List<String> legend;
private List<String> xAxis;
private List<SeriesModel> series;
/*时间轴*/
private List<String> timeline;
/*时间轴数据*/
private List<LineOptionModel> optionModels;
public LineDataModel() {
}
public LineDataModel(List<String> legend, List<String> xAxis, List<SeriesModel> seriesList) {
this.legend = legend;
this.xAxis = xAxis;
this.series = seriesList;
}
/**
*get set方法省略....
**/
}
/**
* 数据实体
* @author zengK
* @ClassName: SeriesModel
* @projectName
* @description: TODO
* @date 2019/7/8 000820:19
*/
public class SeriesModel {
private String name;
/**
*根据不同的统计图表设置不同的值，默认为line
**/
private String type = "line";
private List<Integer> data;
}
/**
*时间线柱状图适用
**/
public class LineOptionModel{
/*注意：如果用于时间轴柱状图，那么map的key必须为text，其他则遵循实际要求设置*/
private Map<String,String> title;
private List<Map<String,List<Integer>>> series;
}
设置好数据实体之后，就是往里面填充数据，填充的数据格式基本如下
LineDataModel lineDataModel = new LineDataModel();
/*折线数量*/
List<String> legend = Arrays.asList("卡口一","卡口二","卡口三");
/*x轴数据*/
List<String> xAxis = Arrays.asList("00:00-02:00", "02:00-04:00", "04:00-06:00", "06:00-08:00", "08:00-10:00", "10:00-12:00", "12:00-14:00", "14:00-16:00", "16:00-18:00", "18:00-20:00", "20:00-22:00", "22:00-00:00");
List<SeriesModel> series = new ArrayList<>(legend.size());
/*折线数据*/
for(String legendStr:legend){
SeriesModel seriesModel = new SeriesModel();
seriesModel.setName(legendStr);
List<Integer> data = new ArrayList<>(12);
for(int i=0;i<12;i++){
data.add((int) (Math.random() * 100));
}
seriesModel.setData(data);
series.add(seriesModel);
}
lineDataModel.setLegend(legend);
lineDataModel.setSeries(series);
lineDataModel.setxAxis(xAxis);
return lineDataModel;
数据准备完成，现在可以开始对前端的使用做一些准备了。
首先，我们使用echars图表时，可能需要对样式进行一些调整，那么我们就想这些方法进行抽取，以方便复用。
首先是对线条的样式，图列等一系列的样式自定义
//设置grid
function setGrid(left,right,top,bottom,height) {
left = (left==null || left=="" || typeof(left)=="undefined")? "8" : left;
right = (right==null || right=="" || typeof(right)=="undefined")? "20" : right;
top = (top==null || top=="" || typeof(top)=="undefined")? "25" : top;
bottom = (bottom==null || bottom=="" || typeof(bottom)=="undefined")? "5" : bottom;
height = (height==null || height=="" || typeof(height)=="undefined")? "150" : height;
var grid = {left: left,right: right,top:top,bottom:bottom,height: height,containLabel: true};
return grid;
}
//设置折线style
function setLineStyle(series,color1,color2) {
var lienStyle = {width: 4,color: {type: 'linear',x: 0,y: 0,x2: 1,y2: 1,colorStops: [{offset: 0.5, color: color1,}, {offset: 1, color:color2 }],globalCoord: false}};
var label = {normal: {show: true,position: 'top',color: color1}};
var itemStyle = {normal: {color: color1}};
series["lineStyle"]= lienStyle;
series["itemStyle"]= itemStyle;
series["label"]= label;
return series;
}
//设置面积图style
function setAreaStyle(series,color1,color2) {
var areaStyle= {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: color1}, {offset: 1, color:color2,}],
globalCoord: false}};
series["areaStyle"]= areaStyle;
return series;
}
//设置时间线的样式
function getTimelineStyle(borderColor,hoverColor) {
var timelineStyle = {};
timelineStyle["itemStyle"] = {color:borderColor};//每个节点的样式
timelineStyle["lineStyle"] = {color:borderColor};//线条的样式
timelineStyle["controlStyle"] = {borderColor:borderColor,color:borderColor,itemSize:16,normal : { color : borderColor},};//『控制按钮』的样式
timelineStyle["checkpointStyle"] = {symbol: 'circle',symbolSize: 14,color: hoverColor,borderWidth: 2,borderColor: hoverColor};//按钮高亮时的样式
return timelineStyle;
}
样式设置完成，那么下面就开始主体的设置，其实这部分很简单，只需要明白返回数据应该放入什么位置就可以了。
/*
* 柱状图公共js
*id :统计图容器ID
* xAxis：x轴数据
* series：统计数据（折线数据）
* title：标题
* */
function loadMyChart(id,xAxis,series,title){
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById(id));
var option={
title:{
text:title,
x:'center',
textStyle:{
//文字颜色
/*color:'#ccc',*/
//字体风格,'normal','italic','oblique'
fontStyle:'normal',
//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
/*fontWeight:'bold',*/
//字体系列
/*fontFamily:'sans-serif'*/
//字体大小
fontSize:13
}
},
backgroundColor:'', //设置无背景色
tooltip:{
show:true
},
grid: {
left: '12',
right: '20',
top:'30',
bottom:'5',
containLabel: true
},
xAxis:[{
type:'category',//默认为类目
data : xAxis,
axisLabel: {
interval : 0,
rotate : 35
}
}],
yAxis : [
{
type : 'value'//默认为值类型
}
],
series : series
};
// 为echarts对象加载数据
myChart.setOption(option);
}
/*时间轴柱状图*/
/*
* id:容器ID
* timeline：时间轴列表
* legend：图列
* xAxis：x轴数据
* series：系列，柱子的数据
* options：根据不同时间轴的数据列表
* playInterval:时间轴切换时间 如果不需要自动切换，则传入null即可
* currentIndex：当前选中的时间轴节点
* timelineStyle:时间轴样式
* */
function loadLineTimeBar(id,timeline,legend,xAxis,series,options,playInterval,currentIndex,timelineStyle) {
var autoPlay = true;
if(!currentIndex){
currentIndex = 0;
}
if (!playInterval){
autoPlay = false;
playInterval=0;
}
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById(id));
var option = {
baseOption: {
timeline: {
// y: 0,
axisType: 'category',
autoPlay: autoPlay,//是否自动播放
playInterval: playInterval,//切换的时间间隔
data: timeline,
left:"5%",
right:"5%",
bottom:"1%",
//这部分是时间轴样式的设置 注意
currentIndex:currentIndex,
itemStyle:timelineStyle.itemStyle,
lineStyle:timelineStyle.lineStyle,
controlStyle:timelineStyle.controlStyle,
checkpointStyle:timelineStyle.checkpointStyle
},
tooltip: {
trigger: 'axis'
},
legend: {
x: 'right',
data: legend
},grid: {
top:'8%',
containLabel: true
},
calculable : true,
xAxis: [
{
'type':'category',
'axisLabel':{'interval':0},
'data':xAxis,
splitLine: {show: false}
}
],
yAxis: [
{
type: 'value'
}
],
series: series
},
options: options
};
// 为echarts对象加载数据
myChart.setOption(option);
}
//加载折线图数据
/*时间轴柱状图*/
/*
* series：系列，柱子的数据
* elementId:容器ID
* legend：图列
* xAxis：x轴数据
* title：标题
* grid:浮动框样式
* */
function setLineData(series,elementId,legend,xAxis,title,grid) {
var dom = document.getElementById(elementId);
var pieDiv = echarts.init(dom);
var option = {
title:{
text:title,
x:'center',
textStyle:{
//文字颜色
/*color:'#ccc',*/
//字体风格,'normal','italic','oblique'
fontStyle:'normal',
//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
/*fontWeight:'bold',*/
//字体系列
/*fontFamily:'sans-serif'*/
//字体大小
fontSize:13
}
},tooltip: {
trigger: 'axis'
},
legend: {
right:"2px",
data:legend
},
grid: grid,
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxis,
axisLabel:{interval:0,rotate : 35},
boundaryGap: true, // 设置起点距y轴位置
axisLine:{
lineStyle:{
color:'#017ca5',
width:1,//这里是为了突出显示加上的
}
}
},
yAxis: {
type: 'value',
scale:true,
splitLine:{ //去除网格
show: false
},
axisLine:{
lineStyle:{
color:'#017ca5',
width:1,//这里是为了突出显示加上的
}
}
},
series: series
};
pieDiv.clear();
pieDiv.setOption(option, true);
}
这一步基本的封装工作就完成了，剩下的就是讲数据进行填充。
//折线图数据填充
if(data){
var series = data.series;
//设置折线颜色
var colors = ["#00A08A","#34D0BA","#FF6A00","#FF8F40"]
for (var index = 0;index<series.length;index++){
series[index] = setLineStyle(series[index],colors[index*2],colors[index*2+1]);
}
var grid = setGrid();
setLineData(series,"lineChart",data.legend,data.xAxis,null,grid);
}
//时间线柱状图数据填充
if(data){
var series = data.series;
//设置折线颜色
var colors = ["#CC0066","#CC0066","#009999","#009999"]
for (var index = 0;index<series.length;index++){
series[index] = setLineStyle(series[index],colors[index*2],colors[index*2+1]);
}
/*当前月份*/
var currentIndex = (new Date().Format("MM"))-1;
var timelineStyle = getTimelineStyle("#00b3b3","#CC0066");
loadLineTimeBar("barChart",data.timeline,data.legend,data.xAxis,data.series,data.optionModels,10000,currentIndex,timelineStyle);
}
效果
line.png
bar.png
the end！！！！
网友评论