option = {
//你的代码
backgroundColor: "#061740",
tooltip: {
backgroundColor: 'rgba(13, 64, 71, 0.50)',
borderColor: 'rgba(143, 225, 252, 0.60)',
padding: 8,
textStyle: {
color: '#fff',
}
},
legend: {
data: ['计划完成', '实际完成', '比例'],
icon: 'rect',
itemWidth: 14,
itemHeight: 14,
right: 5,
selectedMode: false, //取消图例上的点击事件
textStyle: {
fontSize: 14,
color: '#FFFFFF'
}
},
xAxis: [
{
type: 'category',
data: ['征迁户数', '征迁面积', '征迁里程'],
axisLine: { // 轴线设置
show: true, // 显示轴线
lineStyle: { // 轴线样式设置
color: "#C5C5C5", // 轴线颜色
width: 1, // 轴线宽度
type: "solid" // 轴线类型-虚线
}
},
axisLabel: {
textStyle: {
color: '#F5F5F5', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
}
],
yAxis: [
{
splitLine: {
show: true,
lineStyle: {
color: '#979797',
type: [5, 10],
},
},
axisLabel: {
textStyle: {
color: '#F5F5F5', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
},
// 折线部分
{
type: 'value',
name: '',
axisLabel: {
textStyle: {
color: '#F5F5F5', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
},
formatter: '{value} %'
},
},
],
series: [
// 数据的柱状图1
{
name: '计划完成',
type: 'bar',
barWidth: 30,
z: 1,
itemStyle: {
opacity: 1, // 这个是 透明度
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
// color: 'rgba(240, 194, 126, 1)' // 0% 处的颜色
color: 'red'
},
{
offset: 1,
color: 'rgba(255, 229, 185, 1)' // 100% 处的颜色
}
],
false
)
},
data: [40, 27, 74]
},
// 数据顶部的样式
{
name: '',
type: 'pictorialBar',
symbolSize: [30, 15],
symbolOffset: ['-60%', -8],
z: 2,
itemStyle: {
normal: {
opacity: 1,
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 1,
// color: 'rgba(237, 193, 127, 1)' // 100% 处的颜色
color: 'rgba(240, 151, 130, 1)'
}
],
false
),
label: {
show: true, // 开启显示
position: 'top', // 在上方显示
offset: [-20, 0],
textStyle: {
// 数值样式
color: '#FFFFFF',
fontSize: 14,
top: 50
},
formatter: function (param) {
return param.data
}
}
}
},
symbolPosition: 'end',
data: [40, 27, 74]
},
// 数据的柱状图2
{
name: '实际完成',
type: 'bar',
barWidth: 30,
z: 2,
itemStyle: {
// lenged文本
opacity: 1, // 这个是 透明度
color: new echarts.graphic.LinearGradient(
//前4个参数用于配置渐变色的起止位置，这4个参数依次对应右/下/左/上四个方位，而0 0 0 1则代表渐变色从正上方开始。
0,
0,
1,
0,
[
{
offset: 0,
// color: 'rgba(51, 204, 167, 1)' // 0% 处的颜色
color: 'blue'
},
{
offset: 1,
color: 'rgba(148, 255, 254, 1)' // 100% 处的颜色
}
],
false
)
},
data: [36, 19, 30]
},
// 数据的柱状图2的顶部
{
name: '', // 头部
type: 'pictorialBar',
symbolSize: [30, 15],
symbolOffset: ['60%', -8],
z: 12,
symbolPosition: 'end',
itemStyle: {
normal: {
opacity: 1,
color: new echarts.graphic.LinearGradient(
0,
1,
1,
0,
[
{
offset: 1,
// color: 'rgba(51, 204, 167, .8)' // 100% 处的颜色
color: 'rgba(66, 110, 70, 1)'
}
],
false
),
label: {
show: true, // 开启显示
position: 'top', // 在上方显示
offset: [20, 0],
textStyle: {
// 数值样式
color: '#FFFFFF',
fontSize: 14,
top: 50
},
formatter: function (param) {
return param.data
}
}
}
},
data: [36, 19, 30]
},
// 折线部分
{
name: '比例',
type: 'line',
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 10,
itemStyle: {
shadowColor: '#fff',
shadowBlur: 5,
color: 'rgba(30, 197, 234, .8)'
},
label: {
show: true,
position: 'top',
color: '#F5F5F5',
formatter: '{c} %'
},
data: [29, 38, 52, 75, 98, 110, 120]
}
]
};