這篇文章主要講述Echarts設置字體和線條的顏色相關(guān)操作筆記涩嚣，希望文章對你有所幫助玫坛，主要是自己的在線筆記吧滋觉。我在前面先放各種修改前后圖片顏色的對照，后面再詳細介紹代碼嘲碧。這樣更方便閱讀及讀者知道稻励，是否對自己有所幫助父阻，其重點是如何在模板動態(tài)網(wǎng)頁或JSP網(wǎng)站中插入Echarts圖片愈涩。** 1.修改標題及背景顏色**
**2.設置柱形圖顏色**
3.修改坐標軸字體顏色 4.設置Legend顏色
**5.修改折線顏色**
**6.修改油表盤字體大小及顏色**
**7.柱狀圖文本鼠標浮動上的顏色設置**
推薦文章： [http://echarts.baidu.com/echarts2/doc/example/bar14.html](http://echarts.baidu.com/echarts2/doc/example/bar14.html)
http://echarts.baidu.com/echarts2/doc/example/bar15.html
官方文檔： [http://echarts.baidu.com/echarts2/doc/example.html](http://echarts.baidu.com/echarts2/doc/example.html) [http://echarts.baidu.com/demo.html#gauge-car](http://echarts.baidu.com/demo.html#gauge-car) [ECharts系列 - 柱狀圖（條形圖）實例一 JSP](http://blog.csdn.net/zou128865/article/details/42802671)
1.修改標題的顏色及背景
Echarts繪制柱狀圖及修改標題顏色的代碼如下所示：
<!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: ‘十大高耗水行業(yè)用水量八減兩增 ‘, //標題 backgroundColor: ‘#ff0000‘, //背景 subtext: ‘同比百分比(%)‘, //子標題 textStyle: { fontWeight: ‘normal‘, //標題顏色 color: ‘#408829‘ }, x:"center" }, legend: { data:[‘蒸發(fā)量‘,‘降水量‘,‘最低氣溫‘,‘最高氣溫‘] }, tooltip : { trigger: ‘a(chǎn)xis‘, axisPointer : { // 坐標軸指示器，坐標軸觸發(fā)有效 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 : [‘石油加工履婉、煉焦和核燃料加工業(yè)‘ , ‘非金屬礦物制品業(yè)‘, ‘化學原料和化學制品制造業(yè)‘, ‘有色金屬冶煉和壓延加工業(yè)‘, ‘造紙和紙制品業(yè)‘, ‘紡織業(yè)‘, ‘電力、熱力生產(chǎn)和供應業(yè)‘, ‘非金屬礦采選業(yè)‘, ‘黑色金屬冶煉和壓延加工業(yè)‘, ‘煤炭開采和洗選業(yè)‘ ] }, series : [ { name: ‘幅度 ‘, type: ‘bar‘, stack: ‘總量‘, label: { normal: { show: true, formatter: ‘斟览‘ } }, 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: ‘十大高耗水行業(yè)用水量八減兩增 ‘, //標題 backgroundColor: ‘#ff0000‘, //背景 subtext: ‘同比百分比(%)‘, //子標題 textStyle: { fontWeight: ‘normal‘, //標題顏色 color: ‘#408829‘ }, x:"center" },
輸出如下圖所示：
2.設置柱形圖顏色
設置柱形圖顏色代碼如下所示毁腿，其中顏色表參考：[RGB顏色查詢對照表](http://www.114la.com/other/rgb.htm)
series : [{ name: ‘幅度 ‘, type: ‘bar‘, stack: ‘總量‘, label: { normal: { show: true, formatter: ‘‘ } }, 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> <script src="echarts.min.js"></script></head><body> <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年上半年全國規(guī)模以上工業(yè)企業(yè)用水情況（單位：億立方米）‘, subtext: ‘數(shù)據(jù)來源：國家統(tǒng)計局‘, x: ‘center‘, }, tooltip : { trigger: ‘a(chǎn)xis‘, axisPointer : { // 坐標軸指示器已烤，坐標軸觸發(fā)有效 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: [‘東部地區(qū)‘,‘中部地區(qū)‘,‘西部地區(qū)‘,] }, 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: [‘東部地區(qū)‘,‘中部地區(qū)‘,‘西部地區(qū)‘,] },
輸出如下圖所示：
4.設置了legend顏色
核心代碼代碼如下：
legend: { orient: ‘vertical‘, //data:[‘用水量‘,‘減少量‘], data:[ {name: ‘用水量‘, textStyle:{color:"#25c36c"} }, {name:‘減少量‘, textStyle:{color:"#25c36c"}} ], x: ‘left‘, y:"top", padding:50, },
輸出如下圖所示：
5.修改折現(xiàn)顏色
代碼如下所示：
<!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"> // 基于準備好的dom妓羊，初始化echarts實例 var myChart = echarts.init(document.getElementById(‘main‘)); var timeData = [ ‘海水‘,‘陸地苦咸水‘,‘礦井水‘, ‘雨水‘,‘再生水‘,‘海水淡化水‘]; timeData = timeData.map(function (str) { return str.replace(‘2016/‘, ‘‘); }); option = { title: { text: ‘2016年上半年全國工業(yè)用水增長率‘, x: ‘center‘ }, tooltip: { trigger: ‘a(chǎn)xis‘, axisPointer: { animation: false } }, legend: { data:[‘常規(guī)用水量‘,‘非常規(guī)用水量‘], 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 : ‘常規(guī)用水量(%)‘, type : ‘value‘, max : 5 }, { gridIndex: 1, name : ‘非常規(guī)用水量(%)‘, type : ‘value‘, inverse: true } ], series : [ { name:‘常規(guī)用水量‘, type:‘line‘, symbolSize: 8, //設置折線圖顏色 itemStyle : { normal : { lineStyle:{ color:‘#ff0000‘ } } }, hoverAnimation: false, data:[-3.8,-9.0,0.0,4.5 ] }, { name:‘非常規(guī)用水量‘, 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>
其中修改折現(xiàn)顏色代碼如下所示：
series : [ { name:‘常規(guī)用水量‘, type:‘line‘, symbolSize: 8, itemStyle : { normal : { lineStyle:{ color:‘#ff0000‘ } } }, hoverAnimation: false, data:[-3.8,-9.0,0.0,4.5 ] }, { name:‘非常規(guī)用水量‘, 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> <script src="echarts.min.js"></script></head><body> <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}
{c}" }, toolbox: { show: true, feature: { restore: {show: true}, saveAsImage: {show: true} } }, series : [ { name: ‘東部地區(qū)‘, type: ‘gauge‘, z: 3, min: 0, max: 120, splitNumber: 12, radius: ‘50%‘, axisLine: { // 坐標軸線 lineStyle: { // 屬性lineStyle控制線條樣式 width: 10 } }, axisTick: { // 坐標軸小標記 length: 15, // 屬性length控制線長 lineStyle: { // 屬性lineStyle控制線條樣式 color: ‘a(chǎn)uto‘ } }, splitLine: { // 分隔線 length: 20, // 屬性length控制線長 lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式 color: ‘a(chǎn)uto‘ } }, title : { textStyle: { // 其余屬性默認使用全局文本樣式躁绸，詳見TEXTSTYLE fontWeight: ‘bolder‘, fontSize: 20, fontStyle: ‘italic‘, color:"#25c36c" } }, detail : { textStyle: { // 其余屬性默認使用全局文本樣式裕循，詳見TEXTSTYLE fontWeight: ‘bolder‘ } }, data:[{value: 109.2, textStyle:{color:"#25c36c"}, name: ‘ 東部地區(qū)\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: ‘a(chǎn)uto‘ } }, pointer: { width:2 }, title: { show: false }, detail: { show: false }, data:[{value: 2, name: ‘下降‘}] }, { name: ‘中部地區(qū)‘, 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: ‘a(chǎn)uto‘ } }, splitLine: { // 分隔線 length:20, // 屬性length控制線長 lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式 color: ‘a(chǎn)uto‘ } }, pointer: { width:5 }, title: { offsetCenter: [0, ‘-30%‘], // x, y，單位px }, detail: { textStyle: { // 其余屬性默認使用全局文本樣式净刮，詳見TEXTSTYLE fontWeight: ‘bolder‘ } }, data:[{value: 48.2, name: ‘ 中部地區(qū)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: ‘a(chǎn)uto‘ } }, pointer: { width:2 }, title: { show: false }, detail: { show: false }, data:[{value: 2, name: ‘下降‘}] }, { name: ‘西部地區(qū)‘, 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: ‘a(chǎn)uto‘ } }, splitLine: { // 分隔線 length:20, // 屬性length控制線長 lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式 color: ‘a(chǎn)uto‘ } }, pointer: { width:5 }, title: { offsetCenter: [0, ‘-30%‘], // x, y剥哑，單位px }, detail: { textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLE fontWeight: ‘bolder‘ } }, data:[{value: 41, name: ‘ 西部地區(qū)\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: ‘a(chǎn)uto‘ } }, 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 東部地區(qū)\n 用水量‘}] },
核心代碼如下所示：
7.柱狀圖文本鼠標浮動上的顏色設置
需要修改的內(nèi)容如下圖所示：
代碼如下所示：
<!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: ‘ 十大高耗水行業(yè)用水量八減兩增 ‘, subtext: ‘同比百分比(%)‘, }, tooltip : { trigger: ‘a(chǎn)xis‘, axisPointer : { // 坐標軸指示器，坐標軸觸發(fā)有效 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 : [‘石油加工困介、煉焦和核燃料加工業(yè)‘ , ‘非金屬礦物制品業(yè)‘, ‘化學原料和化學制品制造業(yè)‘, ‘有色金屬冶煉和壓延加工業(yè)‘, ‘造紙和紙制品業(yè)‘, ‘紡織業(yè)‘, ‘電力、熱力生產(chǎn)和供應業(yè)‘, ‘非金屬礦采選業(yè)‘, ‘黑色金屬冶煉和壓延加工業(yè)‘, ‘煤炭開采和洗選業(yè)‘] }, series : [ { name:‘幅度 ‘, type:‘bar‘, stack: ‘總量‘, label: { normal: { show: true, formatter: ‘穷吮‘ } }, 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},]
輸出結(jié)果：
自適應大小逻翁，添加如下代碼：
// 為echarts對象加載數(shù)據(jù)myChart.setOption(option);// 加上這一句即可window.onresize = myChart.resize;
或者：
window.addEventListener("resize",function(){ option.chart.resize();});
