var myChart = echarts.init(document.getElementById(id));
var option = {
grid: {
left: '3%',
top:'20%',
right: '3%',
bottom: '3%',
containLabel: true
},
tooltip : {
show: true,
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter:function(params) { // 处理label显示设置，比如换行显示
return formatValue(params[0]['axisValue'],20,'tooltip')
}
},
//X轴信息
xAxis : [{
type: 'category',
data: chartLabel,
axisTick: {
alignWithLabel: true
},
axisLine:{
show:false //x轴线消失
},
axisTick: {
show:false //x轴坐标点消失
},
axisLine:{ // 设置X轴样式
lineStyle:{
color:'#B8C6D9',
width:1
}
},
axisLabel: {
show: true,
// interval: 0, // label间隔多少个显示
textStyle: {
color: '#60769C', //文字颜色
fontSize: 14
},
formatter:function(params) { // 处理label显示设置，比如换行显示
let subEle = params
if(params.length > 9) {
subEle = params.substring(0,9)
}
return params.length > 9 ? formatValue(subEle,5) + "..." : formatValue(subEle,5)
}
}
}],
//Y轴信息
yAxis : [{
type : 'value',
splitLine: { // 分割线相关配置
lineStyle: {
color: ['#F0F3FA'], // // 分割线的颜色
// type: 'dashed' // 分割线为虚线
}
},
axisLine:{
show:false //y轴线消失
},
axisTick: {
show:false //y轴坐标点消失
},
// axisLine:{ // 设置Y轴样式
// lineStyle:{
// color:'#B8C6D9',
// width:2
// }
// },
axisLabel: {
textStyle: {
color: '#60769C' //文字颜色
},
}
}],
series : [{
name: '数量',
type: 'bar',
itemStyle: {
normal: {
label: { // 柱子上文字配置
show: true, // 显示
position: 'top', // 在上方显示
textStyle: {
color: '#273756',
fontSize: 16
}
},
color: function(params) {// 柱子颜色组
var colorList = colors;
return colorList[params.dataIndex]
},
}
},
//柱状图宽度
barWidth: '60%',
//柱状图数值
data: chartData
}
]
}
myChart.setOption(option);
const formatValue = (params,num,type) => {
let returnParam = []
while(params.length > num) {
returnParam.push(params.substring(0,num))
params = params.substring(num)
}
params.length > 0 && returnParam.push(params)
if(type == 'tooltip') {
return returnParam.join('</br>')
}
return returnParam.join('\n')
}