let seriesData = {
high: [56, 33, 23, 45, 33, 88, 33, 23, 60],
middle: [75, 64, 63, 66, 57, 44, 23, 45, 33],
low: [33, 88, 22, 43, 12, 101, 63, 66, 57],
}
option = {
//鼠标滑过提示栏
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
color: ['#EC808C', '#FEF0AC', '#93CCFF', '#EA7683'],
//图表选择栏
legend: {
bottom: 30,
left: 'center',
itemHeight: 18, //修改icon图形大小
itemWidth: 18, //修改icon图形大小
itemGap: 120,
selectedMode: false, //不允许点击图例
textStyle: {
fontSize: 13,
color: '#000',
padding: [0, 8],
},
data: [
{ name: '高', icon: 'rect' },
{ name: '中、', icon: 'rect' },
{ name: '低', icon: 'rect' },
{
name: '风险率',
icon: 'line',
},
],
},
//图标离容器的距离
grid: {
left: '3%',
top: 100,
right: '3%',
bottom: '75',
//是否包含坐标轴
containLabel: true,
//鼠标滑过是否显示信息栏，目前来看最好在grid中配置tooltip鼠标滑过信息栏
},
//x坐标轴
xAxis: [
{
type: 'category',
data: [
'广东',
'广西',
'云南',
'贵州',
'海南',
'湖南',
'湖北',
'江西',
],
axisTick: {
show: false,
},
boundaryGap: true,
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#252525',
fontSize: 14,
fontFamliy: 'Arial',
},
},
},
],
//y坐标轴
yAxis: [
{
type: 'value',
name: '单位：个',
nameTextStyle: {
color: '#333',
fontSize: 14,
padding: [10, 3, 0, 0],
},
axisLabel: {
show: true,
textStyle: {
color: '#333',
},
},
splitNumber: 6,
splitLine: {
show: false,
lineStyle: {
color: '#E4E4E4',
type: 'dashed',
},
},
},
{
name: '(%)',
min: 0,
max: 100,
splitNumber: 6,
nameTextStyle: {
color: '#333',
fontSize: 16,
fontWeight: 400,
padding: [10, -30, 0, 0],
},
splitLine: {
show: true,
lineStyle: {
color: '#E4E4E4',
type: 'dashed',
},
},
},
],
// 数据展示区域
series: [
{
name: '高',
type: 'bar',
stack: 'Ad',
barWidth: 18,
data: seriesData.high,
markLine: {
symbol: 'none',
label: {
show: true,
position: 'end',
formatter: '标线' + '\n\n{c}',
color: '#EA7683',
},
lineStyle: {
type: 'solid',
color: '#EA7683',
width: 2,
},
data: [
{
name: '刻度标线',
yAxis: 122,
},
],
},
},
{
name: '中',
type: 'bar',
stack: 'Ad',
barWidth: 18,
data: seriesData.middle,
},
{
name: '低',
type: 'bar',
stack: 'Ad',
barWidth: 18,
data: seriesData.low,
},
{
show: false,
name: '标线',
data: [],
type: 'line',
itemStyle: {
normal: {
borderColor: '#EA7683',
borderWidth: 2,
},
}, //在单个图表实例中存在多个y轴的时候有用
},
],
};