配置项如下
option = {
grid: {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['喀什市',
'疏附县',
'疏勒县',
'英吉沙县',
'泽普县',
'岳普湖县',
'巴楚县',
'伽师县',
'叶城县',
'莎车县 ',
],
axisLine: {
show: true,
lineStyle: {
color: "#063374",
width: 1,
type: "solid"
}
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: "#00c7ff",
}
},
}],
yAxis: [
{
type: 'value',
scale: true,
name: '数量',
axisLine: {
show: true,
lineStyle: {
color: "#00c7ff",
width: 1,
type: "solid"
},
},
axisTick: {
show: false
},
splitLine: {
show: false,
lineStyle: {
color: "#563374",
}
}
}, {
type: 'value',
scale: true,
minInterval: 1,
name: '百分比',
splitLine: {
show: false,
lineStyle: {
color: "#563374",
}
},
// 右坐标颜色
axisLine: {
show: true,
lineStyle: {
color: "#00c7ff",
width: 1,
type: "solid"
},
},
axisLabel: {
formatter: '{value} %'
}
}],
series: [
{
type: 'bar',
data: [22, 50, 80, 58, 83, 68, 57, 80, 42, 120],
//barWidth: 50, //柱子宽度
//barGap: 1, //柱子之间间距
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#87CEFA'
}, {
offset: 1,
color: '#006388'
}]),
opacity: 1,
}
}
},{
type: 'line',
data:[36, 66, 65, 89, 90, 87, 99, 90, 87, 99],
label: {
show: true,
position: 'top',
formatter: '{c} %'
},
yAxisIndex: 1,
}]
};