echarts众所周知是一个非常非常好用的数据可视化的一个工具，但是参数繁多，并且API并不是十分容易看懂，故在此记录封装之后的，以便于之后的使用与开发，版本，基于ehcarts4.0
//柱状则线图条形图生成类，参数
//bardiv：div所在id
//titlename：标题
//legenddata：legeng(图示)
//xAxisdate：非数值轴的数据（分类）
//bartypes：图表类型 ,bar柱状，line折线,tiao条形图
//seriesdata:数据，如果是多柱或者多折线，则{分类名:数据}{实有人口:[19325, 23438,19325, 23438, 31000,19325, 23438, 31000, 31000,31000, 31000],实有房屋:[19325, 23438,19325, 23438, 31000,19325, 23438, 31000, 31000,31000, 31000]};
//stack:是否叠加,true叠加，false不叠加
//gridleft:展示区距离左边的距离
//gridtop:展示区距离上面的距离
//gridheight展示区高度
//gridwidth展示区宽度
//colors:颜色组合
//itemGap:图示之间的距离
//dataZoomarg:是否增加可移动时间轴
//rotate:x轴文字倾斜角度
//barWidth:柱子的宽度
//fontsize:字体大小全局的
function createecharts(hzzchar) {
this.bardiv = '',
this.titlename = '标题',
this.legenddata = [],
this.xAxisdate = [],
this.bartypes = 'bar',
this.seriesdata = [],
this.stack = false,
this.gridleft = '15%',
this.gridtop = '10%',
this.gridheight = '65%',
this.gridwidth ='80%',
this.colors = ['#29c0ff', '#1bd7b4', 'yellow', '#fbcb7d'];
this.itemGap = 5,
this.dataZoomarg = false,
this.rotate = 0,//倾斜角度
this.barWidth = 20,//柱子的宽度
this.fontsize = 12;//字体默认大小
this.bardiv = hzzchar.bardiv;//对应的Id
this.titlename = hzzchar.titlename;//对应标题名
this.legenddata = hzzchar.legenddata;//对应图例
this.xAxisdate = hzzchar.xAxisdate;//对应x轴字段，也有可能是Y轴
if(hzzchar.bartypes!=undefined) {
this.bartypes = hzzchar.bartypes;//图标类型
}
this.seriesdata = hzzchar.seriesdata;//数据
this.stack = hzzchar.stack;//是否叠加
if(hzzchar.gridleft!=undefined) {
this.gridleft = hzzchar.gridleft;}
if(hzzchar.gridtop!=undefined) {
this.gridtop = hzzchar.gridtop;}
if(hzzchar.gridheight!=undefined) {
this.gridheight = hzzchar.gridheight;}
if(hzzchar.gridwidth!=undefined) {
this.gridwidth = hzzchar.gridwidth;}
if(hzzchar.colors!=undefined) {
this.colors = hzzchar.colors;}
if(hzzchar.itemGap!=undefined) {
this.itemGap = hzzchar.itemGap;//图例间隔
}
this.dataZoomarg = hzzchar.dataZoomarg;//是否打开滚动轴
if(hzzchar.rotate!=undefined){
this.rotate = hzzchar.rotate;//倾斜角度
}
if(hzzchar.barWidth!=undefined) {
this.barWidth = hzzchar.barWidth;//柱状宽度
}
if (hzzchar.fontsize != undefined) {//字体大小，默认12
this.fontsize = hzzchar.fontsize;
}
this.bardiv = echarts.init(document.getElementById(this.bardiv));
var tool = new tools();//调用工具类
this.newseriesdae = [];
for (var i in this.seriesdata) {
var date = this.seriesdata[i];//数据所在
var newdate = {};
var type = '';
if (this.bartypes == 'tiao') {
type = 'bar';
} else {
type = this.bartypes;
}
if (this.stack && type != 'line') {
newdate = {name: i, type: type, stack: 'one', data: date};
} else {
newdate = {name: i, type: type, data: date};
}
this.newseriesdae.push(newdate);
}
this.option = {
title: {
show: false,
text: this.titlename,
textStyle: {
fontSize: this.fontsize
}
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
textStyle: {
fontSize: this.fontsize
}
},
textStyle: {
color: 'white'
},
color: this.colors,
legend: {
itemGap: 14,
//width:'100%',
x: 'center',
right: 1,
y: 'top',
width: '100%',
orient: 'horizontal',
// icon:'circle',
align: 'right',
textStyle: {
fontSize: this.fontsize - 2,
color: 'white'
},
data: this.legenddata
},
grid: {
show: true,
height: this.gridheight,
top: this.gridtop,
left: this.gridleft,
width: this.gridwidth,
borderColor: 'white'
},
xAxis: {
type: 'category',
data: this.xAxisdate,
axisLabel: {
textStyle: {
fontSize: this.fontsize
}
},
axisLine: {
lineStyle: {
color: 'white'
}
},
splitLine: {
lineStyle: {
color: 'white'
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: 'white'
}
},
splitLine: {
lineStyle: {
color: 'white'
}
},
axisLabel: {
fontSize: this.fontsize,
formatter: function (value, index) {//这里是标签返回数据的内容,等级标签不需要进行小数点的过滤
var val;
if (value >= 10000) {//假如大于10000
val = value / 10000 + '万';
} else if (value >= 1000000) {//假如大于百万
val = value / 1000000 + '百万';
} else if (value >= 10000000) {//假如大于千万
val = value / 10000000 + '千万';
} else {
val = value;
}
return val;
}
},
boundaryGap: [0, 0.01]
},
series: this.newseriesdae
};
if (this.bartypes == 'tiao') {
var ydate = this.option.xAxis;
var xdate = this.option.yAxis;
this.option.yAxis = ydate;
this.option.xAxis = xdate;
}
if (this.itemGap != 0) {
this.option.legend.itemGap = this.itemGap;
}
if (this.dataZoomarg) {
this.option.dataZoom = {
show: true,
height: 25,
realtime: true,
handleSize: 20,
start: 100,
textStyle: {
color: 'white'
},
end: 70
}
}
this.option.xAxis.axisLabel.rotate = this.rotate;//文字倾斜
if (hzzchar.barWidth != 0) {
$(this.option.series).each(function (index, el) {
el.barWidth = hzzchar.barWidth;//柱子的宽度
});
}
this.bardiv.setOption(this.option, true);
window.onresize = this.bardiv.resize;
}