接触到一个大数据可视化项目，需要用到echarts图标，在使用中会需要对部分图标或字体做自定义设定，这些设定虽然不是太难，设定方法也仅在官网上的配置文档中
修改折线图坐标轴字体颜色
xAxis: {
type: 'category',
boundaryGap: false,
data: ['08/21', '08/22', '08/23', '08/24', '08/25', '08/26', '08/27'],
axisLabel:{//修改坐标系字体颜色
show:true,
textStyle:{
color:"#8DB6DB"
}
},
},
yAxis: {
type: 'value',
axisLabel:{//修改坐标系字体颜色
show:true,
textStyle:{
color:"#8DB6DB"
}
},
},
修改图例字体颜色
legend: {
data: ['人员凌晨高频出入', '人员低频外出'],
textStyle:{
color:"#fff"
}
},
修改标题的字体颜色
title: {
text: '预警次数/次',
textStyle:{
color:"#fff"
}
},
完整
option = {
title: {
text: '预警次数/次',
textStyle:{
color:"#fff"
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['人员凌晨高频出入', '人员低频外出'],
textStyle:{
color:"#fff"
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['08/21', '08/22', '08/23', '08/24', '08/25', '08/26', '08/27'],
axisLabel:{//修改坐标系字体颜色
show:true,
textStyle:{
color:"#8DB6DB"
}
},
},
yAxis: {
type: 'value',
axisLabel:{//修改坐标系字体颜色
show:true,
textStyle:{
color:"#8DB6DB"
}
},
},
series: [
{
name: '人员凌晨高频出入',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210],
itemStyle: {
normal: {
color: "#00F3FF", //改变折线点的颜色
lineStyle: {
color: "#00F3FF" //改变折线颜色
}
}
}
},
{
name: '人员低频外出',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310],
itemStyle: {
normal: {
color: "#FF7F00", //改变折线点的颜色
lineStyle: {
color: "#FF7F00" //改变折线颜色
}
}
}
}
]
};
