echarts各類字體顏色的修改
這篇文章主要講述Echarts設置字體和線條的顏色相關操做筆記，但願文章對你有所幫助，主要是本身的在線筆記吧。我在前面先放各類修改先後圖片顏色的對照，後面再詳細介紹代碼。這樣更方便閱讀及讀者知道，是否對本身有所幫助，其重點是如何在模板動態網頁或JSP網站中插入Echarts圖片。
1.修改標題及背景顏色javascript
2.設置柱形圖顏色html
3.修改座標軸字體顏色
4.設置Legend顏色java
5.修改折線顏色app
6.修改油表盤字體大小及顏色echarts
7.柱狀圖文本鼠標浮動上的顏色設置dom
推薦文章：
http://echarts.baidu.com/echarts2/doc/example/bar14.html
ide
http://echarts.baidu.com/echarts2/doc/example/bar15.html
字體
官方文檔：
http://echarts.baidu.com/echarts2/doc/example.html
http://echarts.baidu.com/demo.html#gauge-car
ECharts系列 - 柱狀圖（條形圖）實例一 JSP
網站
1.修改標題的顏色及背景
Echarts繪製柱狀圖及修改標題顏色的代碼以下所示：.net
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById(‘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 : {
// 座標軸指示器，座標軸觸發有效
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,itemStyle:{ 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() {
myChart.resize();
});
</script>
<div id="main2" style="width: 600px;height:400px;">
</div>
</body>
</html>
其中設置顏色標題的核心代碼：
title: {
text: ‘十大高耗水行業用水量八減兩增 ‘, //標題
backgroundColor: ‘#ff0000‘, //背景
subtext: ‘同比百分比(%)‘, //子標題
textStyle: {
fontWeight: ‘normal‘, //標題顏色
color: ‘#408829‘
},
x:"center"
},
輸出以下圖所示：
2.設置柱形圖顏色
設置柱形圖顏色代碼以下所示，其中顏色表參考：RGB顏色查詢對照表
series : [
{
name: ‘幅度 ‘,
type: ‘bar‘,
stack: ‘總量‘,
label: {
normal: {
show: true,
formatter: ‘{b}‘
}
},
data:[
{value: 0.2, label: labelRight,itemStyle:{ normal:{color:‘bule‘} } },
{value: 0.7, label: labelRight,itemStyle:{ normal:{color:‘green‘} }},
{value: -1.1, label: labelRight,itemStyle:{ normal:{color:‘red‘} }},
{value: -1.3, label: labelRight,itemStyle:{ normal:{color:‘#FFB6C1‘} }},
{value: -1.9, label: labelRight,itemStyle:{ normal:{color:‘#EE7AE9y‘} }},
{value: -2.9, label: labelRight,itemStyle:{ normal:{color:‘#C1FFC1‘} }},
{value: -3.0, label: labelRight,itemStyle:{ normal:{color:‘#AB82FF‘} }},
{value: -4.2, label: labelRight,itemStyle:{ normal:{color:‘#836FFF‘} }},
{value: -4.9, label: labelRight,itemStyle:{ normal:{color:‘#00FA9A‘} }},
{value: -5.8, label: labelRight,itemStyle:{ normal:{color:‘#CD00CD‘} }},
]
}
輸出以下圖所示：
3.修改座標字體顏色
完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
<div align="left" id="main" style="width: 900px;height:500px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById(‘main‘));
option = {
title: {
text: ‘2016年上半年全國規模以上工業企業用水狀況（單位：億立方米）‘,
subtext: ‘數據來源：國家統計局‘,
x: ‘center‘,
},
tooltip : {
trigger: ‘axis‘,
axisPointer : {
// 座標軸指示器，座標軸觸發有效
type : ‘shadow‘
// 默認爲直線，可選爲：‘line‘ | ‘shadow‘
}
},
legend: {
orient: ‘vertical‘,
x: ‘left‘,
y:"top",
padding:50,
data: [‘用水量‘, ‘減小量‘,]
},
grid: {
left: ‘10‘,
right: ‘60‘,
bottom: ‘3%‘,
height: ‘30%‘,
top: ‘20%‘,
containLabel: true
},
xAxis: {
type: ‘value‘,
//設置座標軸字體顏色和寬度
axisLine:{
lineStyle:{
color:‘yellow‘,
width:2
}
},
},
yAxis: {
type: ‘category‘,
//設置座標軸字體顏色和寬度
axisLine:{
lineStyle:{
color:‘yellow‘,
width:2
}
},
data: [‘東部地區‘,‘中部地區‘,‘西部地區‘,]
},
series: [
{
name: ‘用水量‘,
type: ‘bar‘,
stack: ‘總量‘,
label: {
normal: {
show: true,
position: ‘insidelift‘
}
},
data: [109.2, 48.2, 41 ]
},
{
name: ‘減小量‘,
type: ‘bar‘,
stack: ‘總量‘,
label: {
normal: {
show: true,
position: ‘insidelift‘
}
},
data: [1.638, 1.0122, 1.025]
},
]
};
myChart.setOption(option);
</script>
</body>
</html>
核心代碼以下所示：
yAxis: {
type: ‘category‘,
//設置座標軸字體顏色和寬度
axisLine:{
lineStyle:{
color:‘yellow‘,
width:2
}
},
data: [‘東部地區‘,‘中部地區‘,‘西部地區‘,]
},
輸出以下圖所示：
4.設置了legend顏色
核心代碼代碼以下：
legend: {
orient: ‘vertical‘,
//data:[‘用水量‘,‘減小量‘],
data:[ {name: ‘用水量‘,
textStyle:{color:"#25c36c"}
},
{name:‘減小量‘,
textStyle:{color:"#25c36c"}}
],
x: ‘left‘,
y:"top",
padding:50,
},
輸出以下圖所示：
5.修改折現顏色
代碼以下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById(‘main‘));
var timeData = [
‘海水‘,‘陸地苦鹹水‘,‘礦井水‘,
‘雨水‘,‘再生水‘,‘海水淡化水‘];
timeData = timeData.map(function (str) {
return str.replace(‘2016/‘, ‘‘);
});
option = {
title: {
text: ‘2016年上半年全國工業用水增加率‘,
x: ‘center‘
},
tooltip: {
trigger: ‘axis‘,
axisPointer: {
animation: false
}
},
legend: {
data:[‘常規用水量‘,‘很是規用水量‘],
x:"right",
y:"top",
padding: 50
},
grid: [{
left: 100,
right: 100,
height: ‘20%‘,
top: ‘25%‘
},
{
left: 100,
right: 100,
top: ‘65%‘,
height: ‘25%‘
}],
xAxis : [
{
type : ‘category‘,
boundaryGap : false,
axisLine: {onZero: true},
data:[‘地表淡水‘,‘地下淡水‘,‘自來水‘,‘其餘水‘]
},
{
gridIndex: 1,
type : ‘category‘,
boundaryGap : false,
axisLine: {onZero: true},
data: timeData,
position: ‘top‘
}
],
yAxis : [
{
name : ‘常規用水量(%)‘,
type : ‘value‘,
max : 5
},
{
gridIndex: 1,
name : ‘很是規用水量(%)‘,
type : ‘value‘,
inverse: true
}
],
series : [
{
name:‘常規用水量‘,
type:‘line‘,
symbolSize: 8,
//設置折線圖顏色
itemStyle : {
normal : {
lineStyle:{
color:‘#ff0000‘
}
}
},
hoverAnimation: false,
data:[-3.8,-9.0,0.0,4.5 ]
},
{
name:‘很是規用水量‘,
type:‘line‘,
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 8,
//設置折線圖顏色
itemStyle : {
normal : {
lineStyle:{
color:‘#0000ff‘
}
}
},
hoverAnimation: false,
data: [-5.8,-2.5,6.2,50.3,3.5,-3.3 ]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
其中修改折現顏色代碼以下所示：
series : [
{
name:‘常規用水量‘,
type:‘line‘,
symbolSize: 8,
itemStyle : {
normal : {
lineStyle:{
color:‘#ff0000‘
}
}
},
hoverAnimation: false,
data:[-3.8,-9.0,0.0,4.5 ]
},
{
name:‘很是規用水量‘,
type:‘line‘,
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle : {
normal : {
lineStyle:{
color:‘#ff0000‘
}
}
},
symbolSize: 8,
hoverAnimation: false,
data: [-5.8,-2.5,6.2,50.3,3.5,-3.3 ]
}
]
修改圖以下所示：
6.修改油表盤字體大小及顏色
核心代碼以下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById(‘main‘));
option = {
tooltip : {
formatter: "{a} <br/>{c}{b}"
},
toolbox: {
show: true,
feature: {
restore: {show: true},
saveAsImage: {show: true}
}
},
series : [
{
name: ‘東部地區‘,
type: ‘gauge‘,
z: 3,
min: 0,
max: 120,
splitNumber: 12,
radius: ‘50%‘,
axisLine: { // 座標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
width: 10
}
},
axisTick: { // 座標軸小標記
length: 15, // 屬性length控制線長
lineStyle: { // 屬性lineStyle控制線條樣式
color: ‘auto‘
}
},
splitLine: { // 分隔線
length: 20, // 屬性length控制線長
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
color: ‘auto‘
}
},
title : {
textStyle: { // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
fontWeight: ‘bolder‘,
fontSize: 20,
fontStyle: ‘italic‘,
color:"#25c36c"
}
},
detail : {
textStyle: { // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
fontWeight: ‘bolder‘
}
},
data:[{value: 109.2, textStyle:{color:"#25c36c"}, name: ‘ 東部地區\n 用水量‘}]
},
{
name: ‘降低‘,
type: ‘gauge‘,
center : [‘50%‘, ‘65%‘], // 默認全局居中
radius : ‘25%‘,
min: 0,
max: 2,
startAngle: 315,
endAngle: 225,
splitNumber: 2,
axisLine: { // 座標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
width: 8
}
},
axisTick: { // 座標軸小標記
show: false
},
axisLabel: {
formatter:function(v){
switch (v + ‘‘) {
case ‘0‘ : return ‘0‘;
case ‘1‘ : return ‘降低‘;
case ‘2‘ : return ‘1.5%‘;
}
}
},
splitLine: { // 分隔線
length: 15, // 屬性length控制線長
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
color: ‘auto‘
}
},
pointer: {
width:2
},
title: {
show: false
},
detail: {
show: false
},
data:[{value: 2, name: ‘降低‘}]
},
{
name: ‘中部地區‘,
type: ‘gauge‘,
center: [‘20%‘, ‘55%‘], // 默認全局居中
radius: ‘35%‘,
min:0,
max:72,
endAngle:45,
splitNumber:8,
axisLine: { // 座標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
width: 8
}
},
axisTick: { // 座標軸小標記
length:12, // 屬性length控制線長
lineStyle: { // 屬性lineStyle控制線條樣式
color: ‘auto‘
}
},
splitLine: { // 分隔線
length:20, // 屬性length控制線長
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
color: ‘auto‘
}
},
pointer: {
width:5
},
title: {
offsetCenter: [0, ‘-30%‘], // x, y，單位px
},
detail: {
textStyle: { // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
fontWeight: ‘bolder‘
}
},
data:[{value: 48.2, name: ‘ 中部地區ddd‘,textStyle:{color:"#ffff00"} }]
},
{
name: ‘降低‘,
type: ‘gauge‘,
center : [‘20%‘, ‘62%‘], // 默認全局居中
radius : ‘25%‘,
min: 0,
max: 2,
startAngle: 315,
endAngle: 225,
splitNumber: 2,
axisLine: { // 座標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
width: 8
}
},
axisTick: { // 座標軸小標記
show: false
},
axisLabel: {
formatter:function(v){
switch (v + ‘‘) {
case ‘0‘ : return ‘0‘;
case ‘1‘ : return ‘降低‘;
case ‘2‘ : return ‘2.1%‘;
}
}
},
splitLine: { // 分隔線
length: 15, // 屬性length控制線長
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
color: ‘auto‘
}
},
pointer: {
width:2
},
title: {
show: false
},
detail: {
show: false
},
data:[{value: 2, name: ‘降低‘}]
},
{
name: ‘西部地區‘,
type: ‘gauge‘,
center: [‘85%‘, ‘55%‘], // 默認全局居中
radius: ‘35%‘,
min:0,
max:72,
endAngle:45,
splitNumber:8,
axisLine: { // 座標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
width: 8
}
},
axisTick: { // 座標軸小標記
length:12, // 屬性length控制線長
lineStyle: { // 屬性lineStyle控制線條樣式
color: ‘auto‘
}
},
splitLine: { // 分隔線
length:20, // 屬性length控制線長
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
color: ‘auto‘
}
},
pointer: {
width:5
},
title: {
offsetCenter: [0, ‘-30%‘], // x, y，單位px
},
detail: {
textStyle: { // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
fontWeight: ‘bolder‘
}
},
data:[{value: 41, name: ‘ 西部地區\n 用水量‘,
textStyle:{color:"#ffff00"} }]
},
{
name: ‘降低‘,
type: ‘gauge‘,
center : [‘85%‘, ‘62%‘], // 默認全局居中
radius : ‘25%‘,
min: 0,
max: 2,
startAngle: 315,
endAngle: 225,
splitNumber: 2,
axisLine: { // 座標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
width: 8
}
},
axisTick: { // 座標軸小標記
show: false
},
axisLabel: {
formatter:function(v){
switch (v + ‘‘) {
case ‘0‘ : return ‘0‘;
case ‘1‘ : return ‘降低‘;
case ‘2‘ : return ‘2.5%‘;
}
}
},
splitLine: { // 分隔線
length: 15, // 屬性length控制線長
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
color: ‘auto‘
}
},
pointer: {
width:2
},
title: {
show: false
},
detail: {
show: false
},
data:[{value: 2, name: ‘降低‘}]
}
]
};
/*
app.timeTicket = setInterval(function (){
myChart.setOption(option,true);
},2000);
*/
myChart.setOption(option);
</script>
</body>
</html>
修改核心代碼：
title : {
textStyle: {
// 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
fontWeight: ‘bolder‘,
fontSize: 20,
color:"#7FFFD4"
}
},
detail : {
textStyle: {
// 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
fontWeight: ‘bolder‘
}
},
data: {
value: 109.2,
name: ‘\n\n 東部地區\n 用水量‘}]
},
核心代碼以下所示：
7.柱狀圖文本鼠標浮動上的顏色設置
須要修改的內容以下圖所示：
代碼以下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById(‘main‘));
var labelRight = {
normal: {
position: ‘right‘
}
};
var labelRight = {
normal: {
position: ‘right‘
}
};
var option = {
title: {
text: ‘ 十大高耗水行業用水量八減兩增 ‘,
subtext: ‘同比百分比(%)‘,
},
tooltip : {
trigger: ‘axis‘,
axisPointer : { // 座標軸指示器，座標軸觸發有效
type : ‘shadow‘ // 默認爲直線，可選爲：‘line‘ | ‘shadow‘
}
},
grid: {
top: 80,
bottom: 80
},
xAxis: {
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},
{value: -1.1, label: labelRight},
{value: -1.3, label: labelRight},
{value: -1.9, label: labelRight,
itemStyle:{
normal: {
color:‘#28c6de‘,
label: {textStyle:{color:‘#00ff00‘}}
}
}
},
{value: -2.9, label: labelRight},
{value: -3.0, label: labelRight},
{value: -4.2, label: labelRight},
{value: -4.9, label: labelRight},
{value: -5.8, label: labelRight},
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
核心代碼：
data:[
{value: 0.2, label: labelRight, itemStyle:{ normal:{color:‘gray‘} } },
{value: 0.7, label: labelRight},
{value: -1.1, label: labelRight},
{value: -1.3, label: labelRight},
{value: -1.9, label: labelRight,
itemStyle:{
normal: {
color:‘#28c6de‘,
label: {textStyle:{color:‘#00ff00‘}}
}
}
},
{value: -2.9, label: labelRight},
{value: -3.0, label: labelRight},
{value: -4.2, label: labelRight},
{value: -4.9, label: labelRight},
{value: -5.8, label: labelRight},
]
輸出結果：
自適應大小，添加以下代碼：
// 爲echarts對象加載數據 myChart.setOption(option); // 加上這一句便可 window.onresize = myChart.resize;
或者：
window.addEventListener("resize",function(){ option.chart.resize(); });
相關文章
- 1. echarts各類字體顏色的修改
- 2. echarts各類字體顏色修改
- 3. placeholer字體顏色修改
- 4. ActionBar修改字體顏色
- 5. MFC 修改各種控件的背景顏色、字顏色和字體
- 6. 修改UITextfield的Placeholder字體的顏色
- 7. 修改form 的字段背景顏色及字體顏色
- 8. Echarts餅圖字體顏色
- 9. 修改Navigationcontroller title 字體的顏色
- 10. echarts 修改legend圖例的顏色
- 更多相關文章...
- • Eclipse 修改字符集 - Eclipse 教程
- • ionic 顏色 - ionic 教程
- • Kotlin學習（二）基本類型
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
