當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Echarts字体和线条颜色设置操作笔记

發布時間：2023/12/14 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 Echarts字体和线条颜色设置操作笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? ? ? ? 這篇文章主要講述Echarts設置字體和線條的顏色相關操作筆記，希望文章對你有所幫助，主要是自己的在線筆記吧。我在前面先放各種修改前后圖片顏色的對照，后面再詳細介紹代碼。這樣更方便閱讀及讀者知道，是否對自己有所幫助，其重點是如何在模板動態網頁或JSP網站中插入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/bar15.html

? ? ? ? 官方文檔：
? ? ? ??http://echarts.baidu.com/echarts2/doc/example.html
? ? ? ??http://echarts.baidu.com/demo.html#gauge-car
? ? ? ??ECharts系列 - 柱狀圖（條形圖）實例一 JSP

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: '十大高耗水行業用水量八減兩增 ', //標題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.修改坐標字體顏色

? ? ? ? 完整代碼：

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.修改折現顏色

? ? ? ? 代碼如下所示：

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><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} <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: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLEfontWeight: 'bolder',fontSize: 20,fontStyle: 'italic',color:"#25c36c"}},detail : {textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLEfontWeight: '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: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLEfontWeight: '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: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLEfontWeight: '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: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLEfontWeight: 'bolder',fontSize: 20,color:"#7FFFD4"}},detail : {textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLEfontWeight: '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(); });

? ? ? ? 最后文章對你有所幫助，和學生相處就是不錯，但enjoy myself~
? ? ? ??(By:Eastmount 2016-10-17 中午1點半?http://blog.csdn.net/eastmount/?)

總結

以上是生活随笔為你收集整理的Echarts字体和线条颜色设置操作笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：民航飞机因何频繁遭遇乱流？
下一篇：中国股市最“暴利”时代，而有的人活在15