var app = {};
var option;
const posList = [
'left',
'right',
'top',
'bottom',
'inside',
'insideTop',
'insideLeft',
'insideRight',
'insideBottom',
'insideTopLeft',
'insideTopRight',
'insideBottomLeft',
'insideBottomRight'
];
app.configParameters = {
rotate: {
min: -90,
max: 90
},
align: {
options: {
left: 'left',
center: 'center',
right: 'right'
}
},
verticalAlign: {
options: {
top: 'top',
middle: 'middle',
bottom: 'bottom'
}
},
position: {
options: posList.reduce(function (map, pos) {
map[pos] = pos;
return map;
}, {})
},
distance: {
min: 0,
max: 100
}
};
app.config = {
rotate: 0,
align: 'center',
verticalAlign: 'middle',
position: 'top',
distance: 20,//文字间隔距离
onChange: function () {
const labelOption = {
rotate: app.config.rotate,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
position: app.config.position,
distance: app.config.distance
};
myChart.setOption({
series: [
{
label: labelOption
},
{
label: labelOption
},
{
label: labelOption
},
{
label: labelOption
}
]
});
}
};
const labelOption = {
show: true,
position: app.config.position,
distance: app.config.distance,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
rotate: app.config.rotate,
formatter: '{c}',
fontSize: 12,
color: 'white',
rich: {
name: {}
}
};
option = {
dataZoom: {
type: 'slider', // 设置数据区域缩放工具的类型为滑动条
start: 0, // 初始缩放范围的起始位置（百分比）
end: 40 ,// 初始缩放范围的结束位置（百分比）
},
grid: {
left: '10%',
right: '10%',
top: '10%',
bottom: '10%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['快递服务次数', '供销服务次数', '金融服务次数', '生活服务次数', '保险服务次数', '生活服务次数'],
show: false, // 隐藏图例
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['芦山县', '宝兴县', '天全县', '荣经县', '汉源县', '石棉区', '名山区', '雨城区',],
axisLabel: {
textStyle: {
color: '#000',
fontSize: 12,
// 修改 x 轴标题颜色为红色
},
},
}
],
yAxis: [
{
type: 'value',
splitLine: { show: false }, // 取消 x 轴网格线
},
],
series: [
{
name: '快递服务次数',
type: 'bar',
barGap: 0,
label: labelOption,
emphasis: {
focus: 'series'
},
data: [23, 50, 25, 60, 50, 25, 56],
barWidth: 8,
itemStyle: {
color: '#6acd84',
borderRadius: 10,
},
barGap: '50%',
},
{
name: '供销服务次数',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [65, 80, 50, 80, 50, 45, 66],
barWidth: 8,
itemStyle: {
color: '#f68d4c',
borderRadius: 10,
},
},
{
name: '金融服务次数',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [65, 54, 61, 65, 52, 45, 56],
barWidth: 8,
itemStyle: {
color: '#1142ff',
borderRadius: 10,
},
},
{
name: '生活服务次数',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [55, 53, 51, 59, 65, 25, 43],
barWidth: 8,
itemStyle: {
color: '#57dcb7',
borderRadius: 10,
},
},
{
name: '保险服务次数',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [55, 40, 51, 60, 53, 56, 33],
barWidth: 8,
itemStyle: {
color: '#6c19fb',
borderRadius: 10,
},
},
{
name: '生活服务次数',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [45, 30, 61, 50, 55, 23, 54],
barWidth: 8,
itemStyle: {
color: '#12adff',
borderRadius: 10,
},
},
]
};