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.修改坐标字体颜色

完整代码：

<!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/ )

时间： 2024-12-09 10:05:48

Echarts字体和线条颜色设置操作笔记的相关文章

CAD打印线条太粗、线条颜色设置

不管你是使用打印机,还是将CAD转换为PDF文件,如果出现以下情况,线条太粗,根本看不清楚,怎么解决呢? 或者,不想通过图层复杂.繁琐的设置,想将各种颜色线条的CAD全部打印成黑白,或者指定某一种颜色,或者只将某一种颜色打印成彩色其它颜色为黑白,怎么办? 方法其实非常简单,就在CAD的打印设置里面,只是平时你可能没有注意. 改变CAD线条粗细的方法: 改变线条颜色的方法(和上述方法前面步骤相同):

TextView字体大小及颜色设置

TextView设置文字大小及颜色: 1.1)通过xml配置 <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#FF0000" android:textSize="18sp"/> 1.2)通过代码设置(方式一) TextView textView = new T

MFC 控件字体样式和颜色设置

因为默认的字体大小比较小,且有时为了美观,MFC控件的字体样式更改有时显得比较重要.这一修改并不是很直观,需要经由代码来完成,代码如下: CFont *m_pFont;//创建新的字体 m_pFont = new CFont; m_pFont->CreateFont(32, // 字体高度 0, // 字体宽度 0, // 字体倾斜角 0, // 字体倾斜角 FW_EXTRALIGHT, // 字体的粗细 FALSE, // 字体是否为斜体 FALSE, // 字体是否有下划线 0, // 字体

Spring Tool Suite 字体大小和颜色设置

设置方法如下: Spring Tool Suite 颜色配置: 1.打开window->Preference,弹出Preference面板 2.展开General标签,选中Editors选项,展开. 3.选中 Test Editors,右边出现Test Editors面板. 面板中有这样一个选项:Appearance color options: 其中是各种板块颜色的设置,其中有一项是background color,根据自己的喜好选择颜色. 4. 选中background color,勾掉Sy

【pycharm-基本操作】项目创建、切换、运行、字体颜色设置，常见包的安装步骤

创建新项目 退出项目 怎样区别虚拟环境和系统环境? 虚拟环境和系统环境切换:进入项目切换解释器 切换项目 创建python目录和文件 代码运行方式一: 还可以这样执行代码方式二: 文件的剪切.复制.删除 设置字体大小.颜色与背景颜色 主题颜色,字体颜色设置 手动安装相关第三方模块方法: 方式一:代码安装 安装太慢:解决方式 查看安装包明细 第二种方式: 原文地址:https://www.cnblogs.com/python-test001/p/12332437.html

UITableViewCell背景色.选中背景色,分割线,字体颜色设置

[cpp] view plain copy 1.系统默认的颜色设置 [cpp] view plain copy //无色 cell.selectionStyle = UITableViewCellSelectionStyleNone; //蓝色 cell.selectionStyle = UITableViewCellSelectionStyleBlue; //灰色 cell.selectionStyle = UITableViewCellSelectionStyleGray; 2.自定义颜色和

linux BASH shell下设置字体及背景颜色

BASH shell下设置字体及背景颜色 echo -e "\e[31mtest\e[41m" \e[30m 将字符的显示颜色改为黑色 \e[31m 将字符的显示颜色改为红色 \e[32m 将字符的显示颜色改为绿色 \e[33m 将字符的显示颜色改为淡红色 \e[34m 将字符的显示颜色改为蓝色 \e[35m 将字符的显示颜色改为紫色 \e[36m 将字符的显示颜色改为淡蓝色 \e[37m 将字符的显示颜色改为灰色 \e[40m -- \e[47m 设置背景色 \e[40m 将背景色设

超链接字体颜色设置(通过html/css的设置方法)

超链接字体颜色设置是通过css来设置,a链接的颜色设置常用的有以下两种,1.超链接a的初始状态颜色,2.超链接字体的鼠标滑过颜色,还有两种病不常用:3.超链接字体的已访问颜色,4.超链接字体在按下鼠标时的颜色 四中超链接状态分别对应的css属性:a{}.a:hover{} .a:visited{}.a:active{},通常只写a{}.a:hover{}即可,如果你需要其他两种字体颜色设置请参照一下顺序来书写 a{color:red;} a:visited{color:green;} a:hov

HTML字体及颜色设置

字体(FONT)标记(TAGS) 标题字体(Header) <h#> ... </h#> #=1, 2, 3, 4, 5, 6<h1>今天天气真好!</h1> 今天天气真好!<h2>今天天气真好!</h2> 今天天气真好!<h3>今天天气真好!</h3> 今天天气真好!<h4>今天天气真好!</h4> 今天天气真好!<h5>今天天气真好!</h5> 今天天气真好!