效果图
echarts 代码
const option = {
xAxis: {
data: ['工程设计', '其他', '材料/设备换用'], //x轴值
type: 'category',
axisLine: { //x轴线
lineStyle: {
color: '#aad8f3',
opacity: 0.19,
},
},
axisLabel: { //x轴文本
interval: 0,
color: '#aad8f3',
// 文字换行
formatter(params) { //自定义显示内容,格式等
let newParamsName = ''
const paramsNameNumber = params.length
const provideNumber = 4 // 一行显示几个字
const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
if (paramsNameNumber > provideNumber) {
for (let p = 0; p < rowNumber; p++) {
let tempStr = ''
const start = p * provideNumber
const end = start + provideNumber
// eslint-disable-next-line eqeqeq
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber)
} else {
tempStr = `${params.substring(start, end)}\n`
}
newParamsName += tempStr
}
} else {
newParamsName = params
}
return newParamsName
}
},
axisTick: {
show: false,
},
},
yAxis: {
// min: 0, //y轴最小值
// max: 60,//y轴最大值
splitNumber: 5,//格数
axisLine: { //y轴线
show: true,
lineStyle: {
color: '#aad8f3',
opacity: 0.19,
},
},
axisLabel: { //y值颜色
color: '#aad8f3',
},
axisTick: { //刻度条
show: true,
inside: true,
},
splitLine: { //显示横条
show: false
},
},
grid: { //j距离位置
x: 50, //左
y: 30,//上
x2: 30, //右
y2: 50,//下
},
tooltip: { //鼠标放入提示
trigger: 'item',
formatter(params) {
return `
合同数:${params.value} 占比:${rate[params.dataIndex]}%
`
}
},
series: [
{
type: 'bar',
barWidth: 15,
itemStyle: {
normal:{
//柱状图的边角弧度
barBorderRadius:4,//柱子弧度
shadowColor: 'rgba(0,208, 232, 1)',
shadowOffsetX: 0,//柱子阴影
shadowOffsetY: 2,
color: {
// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
type: 'radial',
x: 0.5,
y: 0.5,
r: 5,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
// type: 'linear',
// x: 10,
// y: 10,
// x2: 20,
// y2: 21,
// colorStops: [{
// offset: 1,
// color: 'rgba(0, 210, 233, 0.8)' // 0% 处的颜色
// }, {
// offset: 0.5,
// color: 'rgba(0, 152, 220, 0.5)' // 100% 处的颜色
// },{
// offset: 0,
// color: 'rgba(0, 152, 220, 0.8)' // 100% 处的颜色
// }],
globalCoord: false, // 缺省为 false
} // 柱子颜色
},
},
data:[2,1,1],
}
],
}
有不懂的可以留言
点个赞👍,谢谢