1.html
<div id="wrap"></div>
2.js
; (function ($) {
$.fn.extend({
echartsPie: function (obj) {
// 默认配置
var defaultConfig = {
id: this.attr("id"),
color: ['#2ba4db', '#5172bf', '#935ebf', '#c654a2', '#54b9cd'],
legend: {
icon: "circle",
orient: "vertical",
xy: ["60%", "20%"], //控制图例位置
color: "#83868d"
},
noData: {
mainTitle: "无统计数据",
subTitle: "以下为模拟效果数据",
x: "center"
},
series: {
type: 'pie',
radius: ['50%', '70%'], //控制内圆半径：默认为0，即实心圆.
center: ['30%', '50%'],
startAngle: 0
},
tooltip: {
trigger: 'none',
showContent: false
},
defaultData: [{
value: 30,
name: '电影院'
}, {
value: 30,
name: 'KTV'
}, {
value: 40,
name: '餐饮'
}]
};
var actConfig = $.extend(true, {}, defaultConfig, obj);
// 数据处理
if (actConfig.data.length) {
actConfig.noData.mainTitle = "";
actConfig.noData.subTitle = "";
} else {
actConfig.data = actConfig.defaultData;
};
var compoundObj = getData(actConfig.data);
var proportionArr = proportion(compoundObj.vals);
var isAllZero=allZero(compoundObj.vals);
var legendData = [];
$.each(compoundObj.labels, function (i, v) {
var curObj = {};
curObj.name = v;
curObj.icon = actConfig.legend.icon;
legendData.push(curObj);
});
var option = {
title: {
text: actConfig.noData.mainTitle,
subtext: actConfig.noData.subTitle,
x: actConfig.noData.x
},
tooltip: {
trigger: actConfig.tooltip.trigger,
showContent: actConfig.tooltip.showContent,
},
color: actConfig.color,
legend: {
orient: actConfig.legend.orient,
x: actConfig.legend.xy[0],
y: actConfig.legend.xy[1],
itemWidth: 14,
itemHeight: 14,
textStyle: {
fontSize: 14,
color: actConfig.legend.color,
},
itemGap: 30,
formatter: function (name) {
if(isAllZero){
return "0.00% "+ name;
};
var str = mapArr(name, compoundObj.labels, proportionArr);
var spaceStr = addSpace(str, proportionArr) + " ";
return " " + mapArr(name, compoundObj.labels, proportionArr) + "%" + spaceStr + name;
},
data: legendData
},
calculable: false,
series: [{
name: '',
type: actConfig.series.type,
// silent: true,
// hoverAnimation: false,
radius: actConfig.series.radius,
center: actConfig.series.center,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
label: {
show: false,
position: 'inner',
formatter: "{b}({c})\n{d}%"
}
}
},
data: compoundObj.objSrc
}]
};
// api 调用
var myChart = echarts.init(document.getElementById(actConfig.id));
myChart.showLoading({
text: "图表数据正在努力加载...",
effect: 'whirling',
textStyle: {
fontSize: 20
}
});
myChart.setOption(option);
myChart.hideLoading();
return this;
},
echartsLine: function (obj) {
// 默认配置
var defaultConfig = {
id: this.attr("id"),
color: ["#79be56", "#935ebf", "#c654a2"],
type: "line",
grid: [80, 60, 80, 60],
noData: {
mainTitle: "无统计数据",
subTitle: "以下为模拟效果数据",
x: "center"
},
defaultData: [{
data: [397, 2096, 396],
name: "认证人次",
date: ['6/12', '7/12', '8/12']
}, {
data: [1097, 2046, 3096],
name: "上网人次"
}, {
data: [97, 2006, 196],
name: "短信量"
}]
};
var actConfig = $.extend(true, {}, defaultConfig, obj);
// 数据处理
if (actConfig.data.length) {
actConfig.noData.mainTitle = "";
actConfig.noData.subTitle = "";
} else {
actConfig.data = actConfig.defaultData;
};
var compoundObj = getDataLine(actConfig.data);
var seriesConfig = [];
$.each(actConfig.data, function (i, v) {
var middle = {};
middle.name = actConfig.data[i].name;
middle.type = actConfig.type;
middle.symbol = 'emptyCircle';
middle.legendHoverLink = false;
middle.smooth = false;
middle.symbolSize = 3;//拐点大小
middle.itemStyle = {
normal: {
color: actConfig.color[i],
},
emphasis: {
color: actConfig.color[i],
}
};
middle.data = actConfig.data[i].data;
seriesConfig.push(middle);
});
var option = {
// title: {
// text: actConfig.noData.mainTitle,
// subtext: actConfig.noData.subTitle,
// x: actConfig.noData.x
// },
tooltip: {
trigger: 'axis',
backgroundColor: "rgba(50,50,50,0)",
axisPointer: {
type: 'none'
},
formatter: function (params) {
return tooltipFormat(params);
}
},
legend: {
data: compoundObj.labels,
// padding:50, //设置图例内间距
textStyle: {
fontSize: 14,
color: "#83868d",
},
},
grid: {
borderWidth: 0,
x: actConfig.grid[0], //坐标轴与容器左侧间距，字符串格式设置百分比:"6%"
y: actConfig.grid[1],
x2: actConfig.grid[2],
y2: actConfig.grid[3]
},
calculable: false,
xAxis: [{
type: 'category',
data: actConfig.data[0].date.map(function (str) {
return str.replace(' ', '\n')
}),
splitLine: {
show: false //控制网格线是否显示
},
axisPointer: {
type: 'none'
},
axisTick: {
show: false //刻度线是否显示
},
splitArea: {
show: false, //分隔区域
},
axisLine: {
lineStyle: {
color: "#D7D7D7",
}
},
axisLabel: {
color: '#000',
},
}],
yAxis: [{
type: 'value',
splitLine: {
show: true //控制网格线是否显示
},
axisTick: {
show: false //刻度线是否显示
},
splitArea: {
show: false, //分隔区域
},
axisLine: {
lineStyle: {
color: "#D7D7D7",
}
},
axisLabel: {
color: '#000',
},
}],
series: seriesConfig
};
var myChart = echarts.init(document.getElementById(actConfig.id));
myChart.showLoading({
text: "图表数据正在努力加载...",
effect: 'whirling',
textStyle: {
fontSize: 20
}
});
myChart.setOption(option);
myChart.hideLoading();
}
});
//饼图
//全零判断
function allZero(arr){
var m=0;
for(var i=0,j=arr.length;i<j;i++){
if(arr[i]==0){
m++;
}
}
return m==j;
}
// arr 求和
function sumArr(arr) {
var num = 0;
for (var i = 0, j = arr.length; i < j; i++) {
num = num + (arr[i] - 0);
}
return num;
}
// 获取占比
function proportion(arr) {
var arrBack = [];
for (var i = 0, j = arr.length; i < j; i++) {
var current = ((arr[i] - 0) / sumArr(arr) * 100 - 0).toFixed(2);
arrBack.push(current);
}
return arrBack;
}
// 关联两个等长数组：通过一个数组的值获取另一个数组对应位置的值
function mapArr(val, arr, arrTo) {
for (var i = 0, j = arr.length; i < j; i++) {
if (val == arr[i]) {
return arrTo[i];
}
}
}
// 对齐效果：补空格
function addSpace(str, arr) {
var space = "";
var len = 1;
for (var m = 0, n = arr.length; m < n; m++) {
if (arr[m].length >= len) {
len = arr[m].length;
}
}
for (var m = 0; m < len - str.length; m++) {
space = space + " ";
}
return space;
}
// 返回一个复合对象包含 labels、vals、映射 name > val、自身
function getData(obj) {
var compoundObj = {};
compoundObj.labels = [];
compoundObj.vals = [];
compoundObj.objMap = {};
compoundObj.objSrc = obj;
$.each(obj, function (i, v) {
compoundObj.labels.push(v.name);
compoundObj.vals.push(v.value);
compoundObj.objMap[v.name] = v.value;
});
return compoundObj;
}
// 折线图
function tooltipFormat(obj) {
var str = '<div style="padding-left:10px;width:200px;height:20px;font-size:14px;background-color:#54b9cd;color:#fff;">'
+ obj[0].name
+ '</div>'
+ '<div style="width:200px;border:1px solid #54b9cd;background-color:#fff;">';
$.each(obj, function (i, v) {
str = str
+ '<p>'
+ '<span style="margin-left:10px;margin-right:10px;font-size:12px;color:#9299a1;">'
+ v.seriesName
+ ':</span>'
+ '<span style="font-size:14px;font-weight:700;color:#54b9cd;">'
+ v.value
+ '</span>'
+ '</p>';
});
str = str + '</div></div>';
return str;
}
// 返回一个复合对象包含 dates、vals、labels
function getDataLine(obj) {
var compoundObj = {};
compoundObj.labels = [];
compoundObj.vals = [];
compoundObj.dates = [];
compoundObj.objSrc = obj;
$.each(obj, function (i, v) {
compoundObj.labels.push(v.name);
compoundObj.vals.push(v.value);
compoundObj.dates.push(v.date);
});
return compoundObj;
}
})(jQuery);
2.1 使用
success: function (result) {
var config = {
data: [{
data: result.statValue[1],
name: "name1",
date: result.statDate
}, {
data: result.statValue[0],
name: "name2"
}, {
data: result.statValue[2],
name: "name3"
}]
};
$("#wrap").echartsLine(config);
}
success: function (data) {
var config = {
data: []
};
$.each(data, function (i, v) {
var medium = {};
medium.name = v.name;
medium.value = v.avgNetTime;
config.data.push(medium);
});
$("#wrap").echartsPie(config);
}
success: function (data) {
var config = {
data: [],
color: ['#54b9cd', '#5172bf', '#935ebf', '#c654a2'],
series: {
radius: "70%",
startAngle: 270
},
defaultData: [{
value: 30,
name: 'name1'
}, {
value: 30,
name: 'name2'
}, {
value: 40,
name: 'name3'
}]
};
$.each(data, function (i, v) {
var medium = {};
medium.name = v.authTypeName;
medium.value = v.authSuccessCount;
config.data.push(medium);
});
$("#wrap").echartsPie(config);
}
3.参考网址
echarts中关于自定义legend图例文字
带时间轴的折线图echart
echarts之legend-改变图例的图标为自定义图片
