echarts 各种字体颜⾊的修改
这篇⽂章主要讲述Echarts设置字体和线条的颜⾊相关操作笔记，希望⽂章对你有所帮助，主要是⾃⼰的在线笔记吧。我在前⾯先放各种修改前后图⽚颜⾊的对照，后⾯再详细介绍代码。这样更⽅便阅读及读者知道，是否对⾃⼰有所帮助，其重点是如何在模板动态⽹页或JSP⽹站中插⼊Echarts图⽚。        1.修改标题及背景颜⾊
2.设置柱形图颜⾊
3.修改坐标轴字体颜⾊
4.设置Legend颜⾊
5.修改折线颜⾊
6.修改油表盘字体⼤⼩及颜⾊
7.柱状图⽂本⿏标浮动上的颜⾊设置
推荐⽂章：
官⽅⽂档：
1.修改标题的颜⾊及背景
Echarts绘制柱状图及修改标题颜⾊的代码如下所⽰：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" ></div>
<script type="text/javascript">
var myChart = echarts.ElementById(‘main‘));
var labelRight = {
normal: { position: ‘right‘ }
var labelRight = {
normal: { position: ‘right‘ }
};
var option = {
title: {
text: ‘⼗⼤⾼耗⽔⾏业⽤⽔量⼋减两增 ‘,    //标题        backgroundColor: ‘#ff0000‘,            //背景
subtext: ‘同⽐百分⽐(%)‘,              //⼦标题
textStyle: {
fontWeight: ‘normal‘,              //标题颜⾊
color: ‘#408829‘
},
x:"center"
},
legend: {
data:[‘蒸发量‘,‘降⽔量‘,‘最低⽓温‘,‘最⾼⽓温‘]
},
tooltip : {
trigger: ‘axis‘,
axisPointer : {jsp帮助文档
/
/ 坐标轴指⽰器，坐标轴触发有效
type : ‘shadow‘
// 默认为直线，可选为：‘line‘ | ‘shadow‘
}
},
grid: {
top: 80,
bottom: 80
},
xAxis: {    //设置x轴
type : ‘value‘,
position: ‘top‘,
splitLine: {lineStyle:{type:‘dashed‘}},
max:‘4‘,
},
yAxis: {
type : ‘category‘,
axisLine: {show: false},
axisLabel: {show: false},
axisTick: {show: false},
splitLine: {show: false},
data : [‘⽯油加⼯、炼焦和核燃料加⼯业‘ ,
‘⾮⾦属矿物制品业‘,
‘化学原料和化学制品制造业‘,
‘有⾊⾦属冶炼和压延加⼯业‘,
‘造纸和纸制品业‘, ‘纺织业‘,
‘电⼒、热⼒⽣产和供应业‘,
‘⾮⾦属矿采选业‘,
‘⿊⾊⾦属冶炼和压延加⼯业‘,
‘煤炭开采和洗选业‘
]
series : [
{
name: ‘幅度 ‘,
type: ‘bar‘,
stack: ‘总量‘,
label: {
normal: {
show: true,
formatter: ‘{b}‘
}
},
data:[
{value: 0.2, label: labelRight,itemStyle:{ normal:{color:‘gray‘} } },    {value: 0.7, label: labelRight,itemSt
yle:{ normal:{color:‘gray‘} }},  {value: -1.1, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},  {value: -1.3, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},  {value: -1.9, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},    {value: -2.9, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},      {value: -3.0, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},    {value: -4.2, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},  {value: -4.9, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},
{value: -5.8, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},            ]
}
]
};
myChart.setOption(option);
window.addEventListener("resize",function() {
});
</script>
<div id="main2" >
</div>
</body>
</html>
其中设置颜⾊标题的核⼼代码：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。