echarts柱形图X轴Y轴相关配置
程序员文章站
2022-07-14 22:59:12
...
可配置XY轴刻度线,字体大小,柱形图大小颜色等
const options = {
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
textStyle: {
// 鼠标hover遮罩层字体大小
fontSize: '12'
}
},
xAxis: [
{
data: ['大学食堂 100间', '中学食堂 75间', '小学食堂 35间', '幼儿食堂 25间'].map(function (str) {
return str.replace(' ', '\n');
}),
axisTick: {
alignWithLabel: true,
show: false // 纵轴
},
axisLine: { // 横轴
show: true
},
axisLabel: {
show: true,
textStyle: { // 字体配置
color: '#000',
fontSize: '12',
lineHeight: 14
},
// rotate:40 // 是否旋转
},
splitLine: { // 表格里面X轴线条
show: false
}
}
],
yAxis: [
{
axisLabel: {
// 字体配置,是否显示
show: true,
textStyle: {
color: '#000',
fontSize: '12'
}
},
axisTick: {
//y轴刻度线
show: true
},
axisLine: {
show: true, // Y轴
lineStyle: {
color: '#000' // 颜色
}
},
splitLine: { // 表格里面Y轴线条
show: true
}
}
],
series: [
{
name: '食堂',
type: 'bar',
data: [100, 75, 35, 25],
barWidth: 30,//柱图宽度
itemStyle: {
normal: {
//每根柱子颜色设置
color: function (params) {
const colorList = ["#C0BF49", "#3EB377", "#E8423D", "#0487ED" ];
return colorList[params.dataIndex];
}
}
}
}
]
}
上一篇: 跟我学spark1