之前在文库中上传了一份Echarts2的二次封装js,本来是随手而为,近期突然想起来看了一下,没想到居然有很多朋友查看和下载,超出了我的预料,感觉帮到了许多朋友,不过那边后续更新比较麻烦,所以转移到这边继续,这版是在原版之后进行优化的版本(主要是根据我这边的项目需求),朋友们要是有什么想法或者意见可以留言,我会不定期上来看一看。
虽然现在已经出Echarts3了,但是我还一直在使用Echarts2,原因是E3中使用了C3和H5,在IE浏览器上的兼容不是很好,而我这边的项目主要是在IE上,还有就是用习惯了。。。
以下是源码-20181106
/**
* 每次部署的时候,都不要忘记修改这个路径
*/
require.config({
paths: {
'echarts': '/echarts-2.2.3/build/dist'
}
});
/**
* 这是一个判空的函数,可以单独提出来放到工具类中
*
* @param str
* @returns {Boolean}
*/
function IsEmptyData(str) {
var result = false;
if(str == null || typeof(str) == 'undefined') {
result = true;
} else {
var reg = new RegExp(" ", "g");
str += "";
str = str.replace(reg, "");
if(str.length == 0) {
result = true;
}
}
return result;
}
/**
* 设置项目的基础路径
*
* @param EchartsbasePath
*/
function SetEchartsbasePath(EchartsbasePath) {
require.config({
paths: {
'echarts': EchartsbasePath + '/echarts-2.2.3/build/dist'
}
});
}
/**
* 如果需要对饼图绑定事件,那么在加载页面之前(如果是嵌套页,则在主页面上)执行以下方法,对类库提前加载
*/
function pie_environment() {
require(['echarts', 'echarts/chart/pie', 'echarts/chart/funnel'], function(ec) {});
}
/**
* 如果需要对柱(线)图绑定事件,那么在加载页面之前(如果是嵌套页,则在主页面上)执行以下方法,对类库提前加载
*/
function bar_environment() {
require(['echarts', 'echarts/chart/bar', 'echarts/chart/line'], function(ec) {});
}
/**
* 如果需要地图绑定事件,那么在加载页面之前(如果是嵌套页,则在主页面上)执行以下方法,对类库提前加载
*/
function earth_environment() {
require(['echarts', 'echarts/chart/map'], function(ec) {});
}
/**
* 饼图构建辅助方法
*
* @param divid
* 容器ID
* @param ajaxdata
* JSON数据
* @param piesetting
* 包含属性:name, value, titletext, subtitletext, seriesname, islegend,
* legendalign, istoolbox, titlealign, orienttype
* @param name
* 名称 列名
* @param value
* 值 列名
* @param titletext
* 主标题
* @param subtitletext
* 副标题
* @param seriesname
* 提示框名称
* @param islegend
* 是否显示示例,默认值true
* @param legendalign
* 图例显示位置,默认值left
* @param istoolbox
* 是否显示右上方的工具栏,默认值true
* @param istooltip
* 是否显示提示框,默认值true
* @param titlealign
* 标题位置,默认值center
* @param orienttype
* 图例的排序方式,默认为垂直显示(vertical),水平显示属性为horizontal
* @param chartradius
* 饼图半径,默认55%,传入数组实现环形图[内半径,外半径]
* @param itemStyle
* 设置提示文字样式
* @param color
* 设置颜色带,需传入一个数组,数量大于等于数据的数量
* @param titleStyle
* 标题样式
*/
function InitECharts_pie(divid, ajaxdata, piesetting) {
if(IsEmptyData(divid) || IsEmptyData(document.getElementById(divid))) {
alert("绑定的容器ID不存在");
return false;
}
if(IsEmptyData(ajaxdata)) {
for(var i = 0; i < document.getElementById(divid).childNodes.length; i++) {
document.getElementById(divid)
.removeChild(document.getElementById(divid).childNodes[i]);
}
return false;
}
if(IsEmptyData(piesetting)) {
alert("设置为空或不正确");
return false;
}
if(IsEmptyData(piesetting.titletext)) {
piesetting.titletext = "";
}
if(IsEmptyData(piesetting.subtitletext)) {
piesetting.subtitletext = "";
}
if(IsEmptyData(piesetting.seriesname)) {
piesetting.seriesname = "";
}
if(IsEmptyData(piesetting.islegend)) {
piesetting.islegend = true;
}
if(IsEmptyData(piesetting.legendalign)) {
piesetting.legendalign = 'left';
}
if(IsEmptyData(piesetting.istoolbox)) {
piesetting.istoolbox = true;
}
if(IsEmptyData(piesetting.istooltip)) {
piesetting.istooltip = true;
}
if(IsEmptyData(piesetting.titlealign)) {
piesetting.titlealign = "center";
}
if(IsEmptyData(piesetting.orienttype)) {
piesetting.orienttype = "vertical";
}
if(IsEmptyData(piesetting.chartradius)) {
piesetting.chartradius = "55%";
}
if(IsEmptyData(piesetting.titleStyle)) {
piesetting.titleStyle = {};
}
var legend = "";
if(piesetting.islegend) {
var data = [];
for(var i = 0; i < ajaxdata.length; i++) {
data.push(ajaxdata[i][piesetting.name]);
}
legend = {
orient: piesetting.orienttype,
x: piesetting.legendalign,
data: data
};
}
var piedata = [];
for(var i = 0; i < ajaxdata.length; i++) {
piedata.push({
value: ajaxdata[i][piesetting.value],
name: ajaxdata[i][piesetting.name]
});
}
var option = {
title: {
text: piesetting.titletext,
subtext: piesetting.subtitletext,
x: piesetting.titlealign,
textStyle: piesetting.titleStyle
},
tooltip: {
show: piesetting.istooltip,
trigger: 'item',
formatter: (piesetting.seriesname ? "{a} <br/>{b} : {c} ({d}%)" : "{b} : {c} ({d}%)"),
position: function(posit) {
return [posit[0] - 10, posit[1] + 30]; // 位置指定
}
},
legend: legend,
toolbox: {
show: piesetting.istoolbox,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: false,
// clickable : true,
series: [{
name: piesetting.seriesname,
type: 'pie',
radius: piesetting.chartradius,
center: ['50%', '60%'],
data: piedata
}]
};
if(!IsEmptyData(piesetting.itemStyle)) {
option.series[0].itemStyle = piesetting.itemStyle;
}
if(!IsEmptyData(piesetting.color)) {
option.color = piesetting.color;
}
var myChart1 = null;
require(['echarts', 'echarts/chart/pie', 'echarts/chart/funnel'], function(ec) {
myChart1 = ec.init(document.getElementById(divid));
myChart1.clear();
myChart1.setOption(option);
});
return myChart1;
}
/**
* 饼图构建辅助方法
*