echarts series nameMap 设置字体颜色 echarts改变颜色

转载

bingfeng 2024-04-15 12:23:41

最近在使用echart开发图标，api里面虽然有些设置，但是如果想让柱状图每个柱的颜色都不相同，简单的通过color设置是没有作用的，这里，就要用到其他的方式了

下面只是列举下我认为比较常用的，其他的比较简单，就不说了

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>EChartsTest</title>
    <!-- 引入 echarts.js -->
	<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:500px;"></div>

	<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));

	// 指定图表的配置项和数据
	var option = {
		title: {
			text: "ECharts 入门示例"
		},
		//提示框取默认值，即鼠标移动到柱状图会显示内容
		tooltip: {
	//触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
			trigger: 'axis', 
			axisPointer: { //坐标轴指示器，坐标轴触发有效，
				type: 'cross', //默认为line，line直线，cross十字准星，shadow阴影
				crossStyle: {
					color: '#fff'
				}
			}
		},

		//图例
		legend: {
			data: ['销量']
		},
		//X轴内容
		xAxis: [{
		type: 'category',
		//name:'额度',
		//这是设置的false，就不不显示下方的x轴，默认是true的
		show: false,
		//这里呢，就是每个柱的name了，根据实际情况下就好了，
		data: ['最多', '', '', '最少', '平均', '最少', '最多', '平均', '最少'],
		axisLabel: {
		    //这个是倾斜角度，也是考虑到文字过多的时候，方式覆盖采用倾斜
		    //rotate: 30,
					
			//这里是考虑到x轴文件过多的时候设置的，如果文字太多，默认是间隔显示，设置为0，
			//标示全部显示，当然，如果x轴都不显示，那也就没有意义了
			interval: 0
		}
		}
		],
		yAxis: [{
		type: 'value',
		name: '数量',
		//下面的就很简单了，最小是多少，最大是多少，默认一次增加多少
		min: 0,
		max: 30,
		interval: 6,
		//下面是显示格式化，一般来说还是用的上的
		axisLabel: {
			formatter: '{value} 包'
		}
		}
		],
		series: [{
		name: '数量',
		type: 'bar',
		itemStyle: {
			normal: {
			//好，这里就是重头戏了，定义一个list，然后根据索引取得不同的值，这样就实现了，
				color: function (params) {
					// build a color map as your need.
					var colorList = [
						'#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
						'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
						'#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
					];
					return colorList[params.dataIndex]
				},
				//以下为是否显示，显示位置和显示格式的设置了
				label: {
					show: true,
					position: 'top',
					//formatter: '{c}'
					formatter: '{b}\n{c}'
				}
			}
			},
			//设置柱的宽度，要是数据太少，柱子太宽不美观~
			barWidth: 70,
			data: [28, 15, 9, 4, 7, 8, 23, 11, 17]
			}
		]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);

</script>

</body>
</html>

echarts series nameMap 设置字体颜色 echarts改变颜色_柱状图

设置折线颜色部分

var option = {  
                    title: {  
                        text: ''  
                    },  
                    tooltip: {  
                        trigger: 'axis'  
                    },  
                    legend: {  
                        data:['销售量']  
                    },  
                    grid: {  
                        left: '3%',  
                        right: '4%',  
                        bottom: '3%',  
                        containLabel: true  
                    },  
                    toolbox: {  
                        feature: {  
                            saveAsImage: {}  
                        }  
                    },  
                    xAxis: {  
                        type: 'category',  
                        boundaryGap: false,  
                        data: ['周一','周二','周三','周四','周五','周六','周日']  
                    },  
                    yAxis: {  
                        type: 'value'  
                    },  
                    series: [  //统一设置圈圈与线的颜色
                        {  
                            name:'销售量',  
                            type:'line',  
                            stack: '销售量',  
                            itemStyle : {  
                                normal : {  
                                    color:'#00FF00',  //圈圈的颜色
                                    lineStyle:{  
                                        color:'#00FF00'  //线的颜色
                                    }  
                                }  
                            },  
                            data:[220, 132, 601, 314, 890, 230, 510]  
                        }  
                    ]  
                };  
                    
                echart.setOption(option);    
            });

最终效果代码：

app.title = '折柱混合';

option = {
    tooltip: {
        trigger: 'axis'
    },
    toolbox: {
        feature: {
            dataView: {show: false, readOnly: false},
            magicType: {show: false, type: ['line', 'bar']},
            restore: {show: false},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data:['分数','产业平均分']
    },
    xAxis: [
        {
            type: 'category',
            data: ['北京','昆明','重庆','贵阳','长沙','滨湖','宁波','罗源','北城','闽江']
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '分数',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
                formatter: '{value} 分'
            }
        },
        {
            type: 'value',
            name: '平均分数',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
                formatter: '{value} 分'
            }
        }
    ],
    series: [
        {
            name:'分数',
            type:'bar',
            itemStyle: {
                    normal: {
                        color: function(params) {
                            var colorList = [
                              '#5e7e54','#e44f2f','#81b6b2','#eba422','#5e7e54',
                               '#e44f2f','#81b6b2','#eba422','#5e7e54','#e44f2f'
                            ];
                            return colorList[params.dataIndex]
                        },
　　　　　　　　　　　　　
                    }
                },
            data:[60, 72, 80, 75, 91, 68, 88, 95, 72, 75]
        },
        {
            name:'产业平均分',
            type:'line',
            yAxisIndex: 1,
            itemStyle : {  
                normal : {  
                    color:'#58585a',  
                    lineStyle:{  
                        color:'#58585a'  
                    }  
                }  
            },  
            data:[70, 80, 60, 50, 90, 70, 65, 70, 50, 70]
        }
    ]
};

最终效果图展示：

echarts series nameMap 设置字体颜色 echarts改变颜色_5e_02