Echarts字型和線條顏色設定操作筆記

Eastmount發表於2016-11-07

這篇文章主要講述Echarts設定字型和線條的顏色相關操作筆記，希望文章對你有所幫助，主要是自己的線上筆記吧。我在前面先放各種修改前後圖片顏色的對照，後面再詳細介紹程式碼。這樣更方便閱讀及讀者知道，是否對自己有所幫助，其重點是如何在模板動態網頁或JSP網站中插入Echarts圖片。

1.修改標題及背景顏色

2.設定柱形圖顏色

3.修改座標軸字型顏色
4.設定Legend顏色

5.修改折線顏色

6.修改油表盤字型大小及顏色

7.柱狀圖文字滑鼠浮動上的顏色設定

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.修改座標字型顏色

完整程式碼：

<!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();
});

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

設定toast的字型顏色和背景顏色
2019-12-04
AST
markdown字型顏色和背景設定
2020-10-25
CSS 設定字型顏色和大小
2018-05-24
CSS
echarts調節字型顏色
2020-12-24
Echarts
matlab學習筆記二：plot畫圖怎麼設定線條型別和顏色
2018-03-27
Matlab筆記型別
win10修改字型顏色怎麼操作 windows10字型顏色設定方法
2020-10-10
Win10Windows
word字型顏色怎麼快速設定？
2021-12-14
matplotlib設定顏色、標記、線條，讓你的影像更加豐富
2020-09-24
ECharts柱條漸變色設定以及常用漸變色
2019-02-12
Echarts
Android開發筆記——TextView文字設定不同顏色
2021-09-09
Android筆記TextView
Markdown(入門)——文字設定 -＞(字型、字號、顏色和背景色)
2020-10-23
XMind怎麼更改線條顏色？XMind更改線條顏色的方法
2020-12-27
AUTOCAD——設定顏色
2021-11-08
CSS 顏色與字型
2024-03-25
CSS
直播帶貨系統原始碼利用TextView設定部分字型的顏色和大小
2021-09-28
原始碼TextView
JavaScript WebGL 設定顏色
2022-01-01
JavaScriptWeb
CAD如何設定顏色
2021-08-20
UE富文字框RichTextBlock的內容設定不同的字型顏色
2024-07-20
BloC
短視訊直播系統，Android狀態列設定顏色字型
2022-06-10
Android
echarts的漸變色的設定
2019-02-28
Echarts
win10 windows顏色還原怎麼操作_Win10怎麼恢復/設定系統預設顏色設定
2020-05-16
Win10Windows
echarts 設定X軸最底部那條線的樣式
2024-03-15
Echarts
我的SCRT顏色設定
2024-04-20
NGUI和UGUI改變字型顏色的寫法
2018-05-17
NGUIUGUI
Print輸出顏色字型方法
2018-08-19
ECHARTS-折線圖不顯示資料控制折線圖顏色
2024-11-01
Echarts
echarts設定多條折線不是你想的那樣簡單
2023-12-14
Echarts
svg 圖示設定背景顏色
2024-08-13
SVG
CSS設定元素的背景顏色
2018-07-16
CSS
CSS 實現字型顏色漸變
2024-12-06
CSS
word 中批次替換字型顏色
2024-05-05
ProgressBar進度條顏色
2018-05-21
【HarmonyOS NEXT】氣泡預設顏色和API 10不同，設定popupColor屬性無法修改氣泡顏色
2024-03-21
API
短視訊系統，不改變背景顏色的基礎上更改邊框和字型顏色
2021-10-19
CSS 設定文字框游標顏色
2018-12-11
CSS
如何決定介面設計中顏色
2018-10-07
調整Aplayer的歌詞顏色和字型大小顯示
2024-06-12
Flutter Theme應用主題共享顏色和字型樣式
2019-12-10
Flutter
CSS設定選中網頁文字時的背景和顏色
2018-12-06
CSS網頁

Echarts字型和線條顏色設定操作筆記

1.修改標題的顏色及背景

2.設定柱形圖顏色

3.修改座標字型顏色

4.設定了legend顏色

5.修改折現顏色

6.修改油表盤字型大小及顏色

7.柱狀圖文字滑鼠浮動上的顏色設定

相關文章