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

2022-06-03 08:44:51

这篇文章主要讲述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点半 )

码农公寓

1.修改标题的颜色及背景

2.设置柱形图颜色

3.修改坐标字体颜色

4.设置了legend颜色

5.修改折现颜色

6.修改油表盘字体大小及颜色

7.柱状图文本鼠标浮动上的颜色设置

相关文章