echarts自定义柱状图和legend颜色 以及自定义legend形状

需求
1、echarts柱状图中一共有四根柱子 其中每根柱子颜色都不一样
2、显示legend 并且图标为正方形

实现
1、设置legend中"itemWidth"和"itemHeight" 两个参数 可实现需求2
2、设置color:[‘#F9A300’,‘#0E5FFF’,‘#50D682’,‘#6236FF’] 以及series中的data和stack参数 可实现需求1

this.chartEquipmentAlerts.setOption({
    title: {
    	text: '预警总数40',
    	top: "3%",
    	left: "2%",
    	textStyle: {
        	color: 'rgba(255,255,255,0.75)',
           	fontWeight: 'bold',
            fontSize: 13
        }
  	},
  	color:['#F9A300','#0E5FFF','#50D682','#6236FF'],
  	legend: {
		orient: "vertical",
		top: "10%",
		x: "81%", 
		y: "center",
		itemWidth: 10,
		itemHeight: 10,
		data:['预警类型一','预警类型二','预警类型三','预警类型四'],
		textStyle:{
        	fontSize: 10,//字体大小
            color: 'rgba(255,255,255,0.65)'//字体颜色
        }
   	},   
    grid: {
  		top:'15%',
    	left: '11%',
    	right: '22%',
    	bottom: '8%',
    	containLabel: true
  	},
  	xAxis: {
	    type: 'category',
	    axisLabel: {
		  	textStyle: {
		  		fontSize: 10,//字体大小
		      	color: 'rgba(255,255,255,0.65)'
		  	}
		},
	    data: ['预警类型一', '预警类型二', '预警类型三', '预警类型四']
	},
	yAxis: {
	    type: 'value',
	    axisLabel: {
		  	textStyle: {
		      	color: 'rgba(255,255,255,0.45)'
		  	}
		}
	},
	series: [
	{
        name:'预警类型一',
        stack: '设备', 
        type:'bar',
        barWidth: 30,
        data:[28]
    },
  	{
		name:'预警类型二',
		type:'bar',
		barWidth: 30,
		stack: '设备',
		data:[0, 27]
   },
   {
		name:'预警类型三',
		type:'bar',
		barWidth: 30,
		stack: '设备',
		data:[0, 0, 7]
   },
   {
		name:'预警类型四',
		type:'bar',
		barWidth: 30,
		stack: '设备',
		data:[0, 0, 0, 6]
   }]});

效果图
在这里插入图片描述

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts是一个基于JavaScript的开源可视化库,用于构建交互式的图表和数据可视化界面。它提供了丰富的图表类型和配置选项,可以满足各种数据可视化需求。 要实现ECharts自定义柱状图渐变色,可以通过设置渐变色的方式来实现。具体步骤如下: 1. 首先,在ECharts的配置项中找到柱状图的系列(series)配置项。 2. 在系列配置项中,找到柱状图的样式配置项(itemStyle)。 3. 在样式配置项中,找到渐变色配置项(color)。 4. 将渐变色配置项设置为一个数组,数组中每个元素表示一个渐变色。 5. 每个渐变色可以使用对象来表示,对象包含起始颜色(colorStops)和结束颜色(colorStops)。 6. 在起始颜色和结束颜色中,可以设置颜色值和位置(offset),用于控制渐变的起始和结束位置。 以下是一个示例代码,演示了如何实现ECharts自定义柱状图渐变色: ```javascript option = { // 其他配置项... series: [{ type: 'bar', data: [10, 20, 30, 40, 50], itemStyle: { color: [ { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: 'red' // 起始颜色 }, { offset: 1, color: 'blue' // 结束颜色 } ] } ] } }] }; ``` 关于EChartslegend渐变色,目前ECharts官方并没有直接提供设置legend渐变色的配置项。但是你可以通过自定义legend的方式来实现渐变色效果。 以下是一个示例代码,演示了如何通过自定义legend来实现渐变色效果: ```javascript option = { // 其他配置项... legend: { data: ['柱状图'], formatter: function (name) { return '{a|' + name + '}'; }, textStyle: { rich: { a: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [ { offset: 0, color: 'red' // 起始颜色 }, { offset: 1, color: 'blue' // 结束颜色 } ] } } } } }, series: [{ type: 'bar', name: '柱状图', data: [10, 20, 30, 40, 50] }] }; ``` 通过上述代码,你可以将legend的文本设置为渐变色,从而实现legend的渐变色效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值