option =option = {
backgroundColor: 'blurScope',
tooltip: {
// confine: true,
// trigger: 'axis',
// axisPointer: {
// type: 'shadow',
// },
// backgroundColor: 'rgba(3, 16, 42, 0.85)',
// borderColor: 'rgba(114, 190, 253, 0.6)',
// borderWidth: 1,
// padding: 12,
// formatter: '{b0}：{c0}',
show: true,
},
animation: true,
grid: {
bottom: '15%',
right: '5%',
},
xAxis: {
data: ['和盛镇', '万春镇', '柳城街道', '天府街道', '涌泉街道'],
axisLine: {
lineStyle: {
color: '#BAE7FF',
},
},
axisTick: {
lineStyle: {
color: '#BAE7FF',
},
},
splitLine: {
show: false,
},
axisLabel: {
show: true,
margin: 14,
fontSize: 11,
color: '#BAE7FF',
},
},
yAxis: [
{
name: '万元',
nameTextStyle: {
fontSize: 11,
color: '#BAE7FF',
},
splitArea: { show: false },
type: 'value',
gridIndex: 0,
minInterval: 1,
max: 9000,
// interval: 0,
splitNumber: 5,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
margin: 14,
fontSize: 11,
color: '#BAE7FF',
},
data:[9000,800,6000,4000,2000,0]
},
{
type: "value",
name: "年",
nameTextStyle: {
color: "#ffffff",
fontSize: 16
},
splitLine: {
show: false,
lineStyle: {
width: 1,
color: "#CED2DB"
}
},
axisTick: {
show: false
},
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "#163a5f",
width: 2
}
},
axisLabel: {
show: true,
textStyle: {
color: "#ffffff",
fontSize: 14
}
}
}
],
series: [
{
name: '',
type: 'bar',
barWidth: 22,
itemStyle: {
// @ts-ignore
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
offset: 0,
color: '#4FCAE2',
},
{
offset: 1,
color: '#4FCAE2',
},
]),
},
},
data: [8300, 8700, 3800, 8250, 6300],
z: 10,
zlevel: 0,
},
{
// 分隔
type: 'pictorialBar',
itemStyle: {
normal: {
color: 'rgba(24, 27, 36, 0.63)',
},
},
symbolRepeat: 'fixed',
symbolMargin: 4,
symbol: 'rect',
symbolClip: true,
symbolSize: [22, 5],
symbolPosition: 'start',
symbolOffset: [1, 1],
data: [8300, 8700, 3800, 8250, 6300],
width: 2,
z: 0,
zlevel: 1,
},
{
name: '外框',
type: 'bar',
barGap: '-110%', // 设置外框粗细
barWidth: 22,
itemStyle: {
normal: {
// color: 'transparent', // 填充色
// barBorderRadius: 0, //圆角半径
label: {
// 标签显示位置
show: false,
position: 'top', // insideTop 或者横向的 insideLeft
},
},
},
z: 0,
},
{
name: "年",
type: "line",
showAllSymbol: true, //显示所有图形。
yAxisIndex:1,
symbol: 'circle', //标记的图形为实心圆
symbolSize: 4, //标记的大小
z: 15,
zlevel: 2,
itemStyle: {
color: '#E9BD02',
borderWidth: '2',
borderColor: '#E9BD02',
},
lineStyle: {
color: '#E9BD02',
},
data: [21,24,8,22,16]
}
],
};