let option = {
backgroundColor: 'black',
grid: {
left: '20%',
top: '28%',
right: '10%',
bottom: '10%',
},
tooltip: {
trigger: 'axis',
backgroundColor: '#05050F', // 提示框背景色
borderColor: '#05050F', // 提示框边框色
textStyle: {
color: '#fff', // 提示框文本颜色
},
formatter: (params) => {
debugger;
// 自定义tooltip小圆点
const dotHtml1 =
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#01F1E3"></span>';
const dotHtml2 =
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#991BFA"></span>';
const result = `${dotHtml1} ${params[1].seriesName} : ${params[1].value}万 | ${dotHtml2} ${params[0].seriesName} : ${params[0].value}万`;
return result;
},
axisPointer: {
type: 'none',
},
},
legend: {
data: ['已到位', '未到位'],
right: '80',
top: '120',
textStyle: {
//文字样式
color: '#fff',
fontSize: '12',
},
},
xAxis: {
type: 'value',
position: "top",
splitLine: {
show: true,
lineStyle: {
color: 'rgba(98, 162, 205, 0.4)',
},
},
axisTick: {
show: false,
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 12,
},
},
axisLine: {
show: false,
},
},
yAxis: {
type: 'category',
splitLine: {
show: false,
},
axisTick: {
show: false,
},
data: [
'一般公共服务',
'文体传媒',
'卫生健康',
'社保就业',
'农林水',
'节能环保',
'教育',
'交通',
'城乡社区',
],
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 12,
},
},
axisLine: {
lineStyle: {
color: 'rgba(98, 162, 205, 0.4)',
},
},
},
series: [
{
name: '已到位',
type: 'bar',
data: [80, 80, 97, 53, 95, 70, 88, 66, 99, 87, 53],
itemStyle: {
emphasis: {
barBorderRadius: [0, 20, 20, 0],
},
normal: {
barBorderRadius: [0, 20, 20, 0],
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: 'rgba(2, 22, 80, 0.2)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(0, 255, 255, 0.8)', // 100% 处的颜色
},
],
false
),
},
},
label: {
normal: {
show: false,
formatter: '{c}',
position: 'insideRight',
offset: [-2, 1.5],
textStyle: {
color: '#fff',
fontSize: 10,
},
},
},
},
{
name: '未到位',
textStyle: {
// 提示框浮层的文本样式。
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 14,
},
type: 'bar',
barGap: '-100%',
itemStyle: {
color: 'rgba(0,0,0,0)',
borderColor: '#fff',
padding: 0,
emphasis: {
barBorderRadius: [0, 20, 20, 0],
},
normal: {
barBorderRadius: [0, 20, 20, 0],
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: 'rgba(2, 30, 86, 0.1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255, 177, 102, 0.9)', // 100% 处的颜色
},
],
false
),
},
},
label: {
normal: {
show: false,
lineHeight: 12,
formatter: '{c}',
position: 'right',
right: 0,
textStyle: {
color: '#fff',
fontSize: 12,
},
},
},
z: -10,
data: [130, 150, 146, 130, 150, 124, 127, 129, 138],
},
],
barCategoryGap: '60%',
};