echarts快速构造器
2026-05-02 12:25:39
200
分类：echarts
echarts快速构造器，内置了一些默认配置，使用的时候可以传更少的参数达到想要的效果。最大的优势是重新加载的时候只需要传变化的参数即可。
使用方法：echartsMaker.Bar({id:"echart1",……});
配置参数：除id外其它参数的写法和echarts原生的一模一样。
原来的设计：原生的配置参数比较复杂，有些配置需要写对象很多层，自定义配置参数可以简化，于是为单个图表订制参数，但是后来发现图表的样式越来越多，订制参数越来越复杂，而且开发的时候记不住容易混乱，已无法满足需求，所以完全参照原生配置，使用对象合并的方法来实现。
现在每种图表的写法都一样，还可以改进下，可以采用工厂模式，只需要init和reload方法就够了。需要自定义配置样式的话，可以添加主题模板，调用的时候直接指定主题样式即可：echartsMaker.Bar({id:"echart1",theme:"theme1",……});
(function (window) {
var colorList = ['#ed534f', '#a947bb', '#5c6bbf', '#28b5f5', '#26a499', '#9bcb66', '#fded58', '#fda727', '#eb407a', '#7d57c1', '#42a4f5', '#25c6da'];
//Gauge仪表图
function Gauge(options) {
var self = this;
self.option = {
title: {
text: '',
left: 'center',
textStyle: {
color: '#333',
fontStyle: 'normal',
fontWeight: 'normal',
fontSize: 14,
}
},
series: [{
type: 'gauge',
name: '',
radius: '80%',
data: [],
detail: {
offsetCenter: ['0', '55%'],
textStyle: {
fontSize: 14,
fontWeight: '500',
color: '#111',
},
formatter: function (value) {
if (self.option.series[0].name) {
return ['{a|' + value + '%}', '{b|' + self.option.series[0].name + '}'].join('\n')
}
else {
return value + '%';
}
},
rich: {
a: {
color: '#111',
fontSize: 14,
lineHeight: 20,
fontWeight: '600',
},
b: {
color: '#333',
fontSize: 12,
lineHeight: 14
}
}
},
//图表样式（固定）
axisLine: { // 坐标轴线
lineStyle: {
color: [
[0.4, '#FF8763'],
[0.6, '#28c292'],
[0.8, '#33a7ff'],
[1, '#727eff']
],
width: 4,
opacity: 0.8,
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
show: true,
fontSize: 5,
distance: 0
},
splitLine: { // 分隔线
length: 12,
lineStyle: {
color: 'auto',
width: 1,
opacity: 0.8,
}
},
axisTick: { // 坐标轴小标记
width: 0.8,
length: 8,
lineStyle: {
color: 'auto',
opacity: 0.8,
//shadowColor: 'rgba(0, 0, 0, 0.4)',
//shadowBlur: 5
}
},
pointer: {
width: 3,
length: '60%',
},
itemStyle: {
color: '#33A7FF'
}
}],
}
self.option = objAssign(self.option, options);
self.echarts = echarts.init(document.getElementById(self.option.id));
self.echarts.setOption(self.option);
}
Gauge.prototype.reload = function (options) {
var self = this;
self.option = objAssign(self.option, options);
self.echarts.setOption(self.option);
}
//圆环百分比图
function PercentPie(options) {
var self = this;
self.option = {
backgroundColor: '#fff',
color: ['#008FCD', '#DEDEDE'],
title: {
text: '',
left: 'center',
textStyle: {
color: '#333',
fontStyle: 'normal',
fontWeight: 'normal',
fontSize: 14,
},
},
series: [{
name: '',
type: 'pie',
radius: ['70%', '80%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
normal: {
show: false,
position: 'center',
textStyle: {
fontSize: 14,
color: '#333'
},
formatter: function (params) {
if (params.seriesName) {
return ['{a|' + params.value + '%}', '{b|' + params.seriesName + '}'].join('\n')
}
else {
return params.value + '%';
}
},
rich: {
a: {
color: '#111',
fontSize: 14,
lineHeight: 20,
fontWeight: '600',
},
b: {
color: '#333',
fontSize: 12,
lineHeight: 14
}
}
}
},
startAngle: 90,
data: [{
name: '',
value: 0,
label: {
normal: {
show: true,
}
}
}]
}]
}
self.option = objAssign(self.option, options);
self.echarts = echarts.init(document.getElementById(self.option.id));
self.echarts.setOption(self.option);
}
PercentPie.prototype.reload = function (options) {
var self = this;
self.option = objAssign(self.option, options);
self.echarts.setOption(self.option);
}
//单柱图
function Bar(options) {
var self = this;
self.option = {
grid: {
top: '0',
bottom: '2'
},
xAxis: {
type: 'category',
axisLine: {
show: false
},
},
yAxis: {
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
},
series: [{
data: [],
type: 'bar',
barWidth: 'auto',
barCategoryGap: 'auto',
itemStyle: {
normal: {
color: '#188DC8'
},
},
}]
};
self.option = objAssign(self.option, options);
self.echarts = echarts.init(document.getElementById(self.option.id));
self.echarts.setOption(self.option);
}
Bar.prototype.reload = function (options) {
var self = this;
self.option = objAssign(self.option, options);
self.echarts.setOption(self.option);
}
//多柱图
function BarMulti(options) {
var self = this;
self.option = {
title: {
text: '',
textStyle: {
color: '#333',
fontStyle: 'normal',
fontWeight: 'normal',
fontSize: 12
},
},
grid: {
top: '16%',
bottom: '27%',
left: '12%',
right: '5%'
},
legend: {
orient: 'horizontal',
bottom: 0,
icon: 'rect',
itemWidth: 20,
itemHeight: 10,
textStyle: {
fontSize: 12,
color: '#333'
},
data: []
},
tooltip: {
trigger: 'axis',
//axisPointer: {
// type: 'line',
// crossStyle: {
// color: '#fff'
// }
//}
confine: true,
backgroundColor: 'none',
},
xAxis: {
type: 'category',
data: [],
axisLabel: {
interval: 0,
rotate: 0
},
axisPointer: {
type: 'shadow'
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#E1E1E1',
width: '1'
}
},
axisTick: {
show: false
},
axisLabel: {
// formatter: function (paramas) {
// return paramas;
// },
color: '#333',
}
},
yAxis: {
type: 'value',
name: '',
nameTextStyle: {
color: '#333',
},
axisLine: {
show: false,
lineStyle: {
type: 'solid',
color: '#E1E1E1',
width: '1'
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: '#e3e3e3'
}
},
axisLabel: {
formatter: function (value, index) {
return apiUtil.dataFormat(value, 0);
},
color: '#666',
}
},
series: []
}
self.option = objAssign(self.option, options);
self.echarts = echarts.init(document.getElementById(self.option.id));
self.echarts.setOption(self.option);
}
BarMulti.prototype.reload = function (options) {
var self = this;
self.option = objAssign(self.option, options);
self.echarts.setOption(self.option);
}
//柱状线性混合图
function BarLine(options) {
var self = this;
self.option = {
tooltip: {
trigger: 'axis',
//axisPointer: {
// type: 'line',
// crossStyle: {
// color: '#fff'
// }
//}
confine: false,
// backgroundColor: 'none',
// formatter: options.formatter,
// position: options.position,
},
grid: {
// bottom: bottom,
// height: height,
},
legend: {
show: true,
bottom: 0,
itemWidth: 20,
itemHeight: 10,
data: []
},
xAxis: [{
show: true,
type: 'category',
data: [],
axisPointer: {
type: 'shadow'
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#E1E1E1',
width: '1'
}
},
axisLabel: {
textStyle: {
color: '#333'
},
interval: 'auto',
rotate: 0
}
}],
yAxis: [{
name: '',
nameTextStyle: {
color: '#333',
},
axisLabel: {
formatter: function (paramas) {
return paramas;
},
color: '#666',
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#E1E1E1',
width: '1'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#e3e3e3'
}
},
axisTick: {
show: false
}
}, {
name: '',
nameTextStyle: {
color: '#333',
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#E1E1E1',
width: '1'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
formatter: function (paramas) {
return paramas;
},
color: '#666',
},
// min: 0,
// max: 100,
}],
series: []
};
self.option = objAssign(self.option, options);
self.echarts = echarts.init(document.getElementById(self.option.id));
self.echarts.setOption(self.option);
}
BarLine.prototype.reload = function (options) {
var self = this;
self.option = objAssign(self.option, options);
self.echarts.setOption(self.option);
}
//单饼图
function Pie(options) {
var self = this;
self.option = {
title: {
text: '',
left: 'left',
},
legend: {
orient: 'horizontal',
left: 'center',
top: '2%',
icon: 'rect',
itemWidth: 20,
itemHeight: 10,
data: []
},
tooltip: {
trigger: 'item',
formatter: '{a}</br>{b}:{c}({d}%)'
},
series: [{
name: '',
type: 'pie',
radius: '60%',
center: ['50%', '50%'],
label: {
normal: {
show: true,
formatter: '{b}\n{d}%'
}
},
itemStyle: {
normal: {
label: {
show: true,
},
labelLine: {
show: true,
length: 16,
length2: 8
},
color: function (params) {
var colorList = ['#ffb52c', '#5392ff', '#47b9dc', '#7edc47'];
return colorList[params.dataIndex]
}
}
},
data: []
}]
};
self.option = objAssign(self.option, options);
self.echarts = echarts.init(document.getElementById(self.option.id));
self.echarts.setOption(self.option);
}
Pie.prototype.reload = function (options) {
var self = this;
self.option = objAssign(self.option, options);
self.echarts.setOption(self.option);
}
//混合饼图
function PieMulti(options) {
var self = this;
self.option = {
title: {
text: '',
left: 'center',
},
legend: {
orient: 'horizontal',
left: 'center',
top: '2%',
icon: 'rect',
itemWidth: 20,
itemHeight: 10,
data: []
},
tooltip: {
trigger: 'item',
},
series: [{
//外环
name: '',
type: 'pie',
radius: ['50%', '66%'],
center: ['50%', '50%'],
startAngle: 50,
hoverOffset: 2,
label: {
normal: {
position: 'outside',
formatter: '{b}\n{d}%'
}
},
labelLine: {
length: 16,
length2: 8
},
itemStyle: {
normal: {
color: function (params) {
// var colorList = [
// '#6F3884', '#EFAE00', '#DF1C1E', '#008FCD', '#2AADA2', '#97b552'
// ];
return colorList[params.dataIndex];
}
},
},
data: []
}, {
//内环
name: '',
type: 'pie',
radius: ['0%', '30%'],
center: ['50%', '50%'],
label: {
normal: {
position: 'inner',
}
},
itemStyle: {
normal: {
color: function (params) {
var colorList = [
'#41BFB8', '#A466BC', '#008FCD'
];
return colorList[params.dataIndex]
}
}
},
data: []
}]
};
self.option = objAssign(self.option, options);
self.echarts = echarts.init(document.getElementById(self.option.id));
self.echarts.setOption(self.option);
}
PieMulti.prototype.reload = function (options) {
var self = this;
self.option = objAssign(self.option, options);
self.echarts.setOption(self.option);
}
//多级对象合并（将object2合并到object1）
function objAssign(object1, object2) {
for (key in object1) {
if (typeof(object2[key]) === "object") {
object2[key] = objAssign(object1[key], object2[key]);
}
}
var object = Object.assign(object1, object2);
return object;
}
window.echartsMaker = {
Bar: Bar,
BarMulti: BarMulti,
Pie: Pie,
PieMulti: PieMulti,
PercentPie: PercentPie,
Gauge: Gauge,
BarLine: BarLine
}
})(window);