let axisData = ['企业财产保险', '家庭财产保险', '机动车辆保险', '工程保险', '责任保险']
let seriesData = [[12, 34, 56, 43, 23,],
[33, 44, 22, 15, 67,],
[43, 21, 52, 77, 15,],
[18, 36, 49, 79, 14,],
[38, 70, 39, 37, 69,],
]
let borderColor = ['#00EAFF', '#00A4FF']
let dataColor = ['rgba(0,161,182,0.7)', 'rgba(0,58,168,0.7)']
let axisLabelSize = 20
// let chartArrow = require('../../assets/imgs/tradeImg/chartArrow.png')
option = {
backgroundColor: '#0c2d55',
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '8%',
right: '10%',
top: '5%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: axisData,
nameTextStyle: {
color: '#3259B8',
fontSize: 14,
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: '#1B6DB5',
width: 2
},
},
axisLabel: {
interval: 0,
fontFamily: 'siyuan',
fontSize: axisLabelSize,
color: '#fff',
fontWeight: 'bold',
formatter: function (params) {
console.log(params)
var newParamsName = "";// 最终拼接成的字符串
var paramsNameNumber = params.length;// 实际标签的个数
var provideNumber = 7;// 每行能显示的字的个数
var pattern2 = new RegExp("[A-Za-z]+"); //判断是否为英文
if (pattern2.test(params)) {
console.log('该字符串是英文');
provideNumber = 13
}
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
/**
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";// 表示每一次截取的字符串
var start = p * provideNumber;// 开始截取的位置
var end = start + provideNumber;// 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName
}
// rotate: -30
},
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
nameTextStyle: {
color: '#3259B8',
fontSize: 14,
},
max: 100,
// axisLabel: {
// formatter: '{value} CNY/㎡',
// },
axisLabel: {
interval: 0,
fontFamily: 'siyuan',
fontSize: 20,
color: '#fff',
fontWeight: 'bold'
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: '#1B6DB5',
width: 2
},
},
splitLine: {
show: false,
lineStyle: {
color: '#A7BAFA',
},
}
},
series: [{
name: 'boxplot',
type: 'boxplot',
boxWidth: 30,
markLine: {
// symbol: 'none',
// image: img,
// symbol: ['circle', 'image://' + chartArrow],
symbolSize: [9, 13],
label: {
show: true,
position: 'end',
formatter: '{c}',
fontSize: 20,
fontWeight: 'bold',
fontFamily: 'siyuan',
padding: 10,
},
lineStyle: {
type: 'dashed',
},
data: [{
yAxis: 55,
lineStyle: {
color: "rgba(0, 255, 245, 1)"
},
label: {
color: "rgba(0, 255, 245, 1)"
}
},
]
},
data: seriesData,
itemStyle: {
normal: {
borderColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: borderColor[0] // 0% 处的颜色
}, {
offset: 1,
color: borderColor[1] // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
borderWidth: 2,
shadowColor: 'rgba(0, 0, 0, 0.8)',
shadowBlur: 10,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: dataColor[0] // 0% 处的颜色
}, {
offset: 1,
color: dataColor[1] // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
}
},
tooltip: {
formatter: function (param) {
console.log(param)
return [
'Upper: ' + param.data[5],
'Q3: ' + param.data[4],
'Median: ' + param.data[3],
'Q1: ' + param.data[2],
'Lower: ' + param.data[1]
].join('<br/>')
// return [
// 'Upper: ' + param.data[5] + ' CNY/㎡',
// 'Q3: ' + param.data[4] + ' CNY/㎡',
// 'Median: ' + param.data[3] + ' CNY/㎡',
// 'Q1: ' + param.data[2] + ' CNY/㎡',
// 'Lower: ' + param.data[1] + ' CNY/㎡'
// ].join('<br/>')
}
}
},
]
};