最近和echarts打交道比较多,不得不说这个工具真的强大。特别是针对图表类的前端展示,各种样式都是可以实现的,但是对于刚上手的程序猿们,去改一些默认样式还是很费时间的,就像是在学一门新的语言,需要不停地问度娘,逛贴吧博客。近期就把在项目上使用的一些比较常用的样式列一列~
坐标轴相关
xAxis:{
name: '已办数量', // 坐标轴名称
nameTextStyle: {
color: '#3F85FF', // 坐标轴名称颜色
},
splitLine:{
lineStyle:{
type:'dashed', // 坐标轴刻度线虚线
color: '#DADADA', // 坐标轴刻度颜色
}
},
axisTick: {
show: false, // 坐标轴刻度线隐藏
},
axisLine: {
show: true,
lineStyle: {
color: "#BABFC9", // x轴线的颜色
width: 0, // x轴线的宽度
},
},
axisLabel: {
color: '#000000' // 坐标轴字体颜色
},
}
柱状图中柱子的宽度
series: [
{
type: 'bar',
barWidth: 30, // 柱图宽度
},
]
柱状图中柱子的颜色
series: [
{
type: 'bar',
itemStyle: {
normal: {
color: '#3F85FF',
},
},
},
]
折线图中折线的颜色
series: [
{
type: 'line',
itemStyle: {
normal: {
color: '#FFB72F',
},
},
},
]
折线图中折线的宽度
series: [
{
type: 'line',
itemStyle: {
normal: {
lineStyle: {
width: 4, // 折线宽度
},
},
},
},
]
最终效果如下
柱状图中柱子之间的间距
series: [
{
type: 'line',
barGap:"0",//柱图间距
},
]
这条属性前后的差异
没加:
加后: