为echarts的叠加柱状图设置颜色

1、废话少说,直接上代码(前提先引入echarts先关文件)

				var myChart = echarts.init(document.getElementById('chartOne'));
					// 指定图表的配置项和数据
					var option = {
						title: {
							text: '近'+days+'天各类型通知发布数量',
							textStyle: {
								color: '#c23531',
								fontSize: 14
							}
						},
						tooltip : {
							trigger: 'axis',
							axisPointer : {
								type : 'shadow'
							}
						},
						legend: {
							data:['扶贫局通知','云平台通知','其他']
						},
						grid: {
							left: '3%',
							right: '2%',
							bottom: '3%',
							containLabel: true
						},
						xAxis : [
							{
								type : 'category',
								data : xAData //X轴坐标
							}
						],
						yAxis : [
							{
								type : 'value'
							}
						],
						series : [
							{
								name:'扶贫局通知',
								type:'bar',
								//data:fu,
								data:[11,33,45],
								//设置柱体颜色
								itemStyle:{
									normal:{color:'#ab78ba'}
								}
							},
							{
								name:'云平台通知',
								type:'bar',
								//data:yun,
								data:[11,28,45],
								//设置柱体颜色
								itemStyle:{
									normal:{color:'#72b201'}
								}
							},
							{
								name:'其他',
								type:'bar',
								//data:qi,
								data:[22,33,66],
								//设置柱体颜色
								itemStyle:{
									normal:{color:'#08a9f2'}
								}
							}

						]
					};
					myChart.setOption(option);

2、效果截图


  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
根据引用\[1\]和引用\[2\]的内容,可以使用tooltip的formatter属性来自定义echarts叠加的tooltip样式。具体的设置如下: ```javascript tooltip: { formatter: (params) => { let str = ''; str = ` <div class="ehover" style="width:80px;background: #FFFFFF;font-family: Microsoft YaHei;"> <h3 style="height:14px;font-size:14px;font-weight:400;line-height:14px;color:#333333;"> ${params\[0\].name} </h3> <ul style="margin:0;paddding:0;list-style:none;color: #333333;font-size: 14px;"> `; for (let i = params.length - 1; i > 0; i--) { str += ` <li style="display:flex;justify-content:space-between;margin-top:6px;height: 15px;"> <p>${params\[i\].marker} ${params\[i\].seriesName}</p> <p style="font-weight: 400;">${params\[i\].value}</p> </li> `; } str += ` </ul> </div> `; return str; }, padding: 20, extraCssText: 'box-shadow:-2px 0px 9px 2px rgba(61,126,255,0.45)', color: '#333333', } ``` 以上代码中,formatter函数用于自定义tooltip的内容和样式。通过遍历params数组,可以获取到每个series的名称、标记和数值,并将其以自定义的样式展示在tooltip中。padding属性用于设置tooltip的内边距,extraCssText属性用于设置tooltip的阴影效果,color属性用于设置文字颜色。 同时,根据引用\[3\]的内容,还可以使用trigger和axisPointer属性来设置tooltip的触发方式和指示器样式。例如,可以将trigger设置为'axis',axisPointer设置为'shadow',以实现在鼠标悬停在柱上时显示tooltip,并且tooltip的指示器为阴影效果。 此外,根据引用\[3\]的内容,还可以通过设置xAxis和yAxis属性来配置x轴和y轴的相关设置,通过设置series属性来配置柱的数据系列。 综上所述,以上代码提供了一种设置echarts叠加tooltip的方法。 #### 引用[.reference_title] - *1* *2* [echarts 堆叠柱 tooltip倒序展示数据](https://blog.csdn.net/m0_48571414/article/details/127734130)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [echarts tooltip 加单位](https://blog.csdn.net/qq_43780814/article/details/120762738)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值