echarts自定义图表内字体颜色-属性设置

接触到一个大数据可视化项目,需要用到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" //改变折线颜色
                }
              }
            }
        }
    ]
};

 

posted @ 2023-06-20 16:54  JackieDYH  阅读(464)  评论(0编辑  收藏  举报  来源