前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >echarts 特殊柱状图

echarts 特殊柱状图

作者头像
White feathe
发布2021-12-08 15:30:19
8560
发布2021-12-08 15:30:19
举报

特殊规则柱状图

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

如下代码实现:

代码语言:javascript
复制
option = {
	"backgroundColor": "#171A2A",
	"tooltip": {
		"trigger": "axis",
		"axisPointer": {
			"show": true,
			"type": "shadow",
			"lineStyle": {
				"type": "shadow"
			},
			"z": 0,
			"label": {
				"show": true,
				"color": "#ffffff",
				"shadowColor": "transparent",
				"shadowBlur": 0,
				"margin": 16,
				"padding": [12, 10, 12, 10],
				"fontSize": 11,
				"backgroundColor": "#171A2A",
				"opacity": 0.8
			},
			"shadowStyle": {
				"show": true,
				"color": "rgba(38, 42, 64, 1)",
				"opacity": 0.8
			}
		},
		"padding": [5, 7],
		"backgroundColor": "rgba(39, 43, 73, 1)",
		"extraCssText": "box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);z-index:1;"
	},
	"grid": {
		"top": "2%",
		"left": "2%",
		"right": "4%",
		"bottom": "4%",
		"containLabel": true
	},
	"xAxis": {
		"type": "category",
		"data": ["测试1", "测试2", "测试3", "测试4", "测试5", "测试6", "测试7", "测试8", "测试9", "测试10", "测试11"],
		"axisLabel": {
			"margin": 16,
			"textStyle": {
				"fontSize": 10,
				"color": "#6F728D"
			}
		},
		"axisLine": {
			"show": false
		},
		"axisTick": {
			"show": false
		},
		"splitLine": {
			"show": false
		}
	},
	"yAxis": {
		"type": "value",
		"axisLabel": {
			"margin": 16,
			"textStyle": {
				"fontSize": 10,
				"color": "#6F728D"
			},
			"formatter": "{value}%"
		},
		"axisLine": {
			"show": false
		},
		"axisTick": {
			"show": false
		},
		"splitLine": {
			"show": true,
			"lineStyle": {
				"color": "rgba(47, 49, 57, 0.5)"
			}
		}
	},
	"series": [{
		"name": "腾讯",
		"type": "bar",
		"barWidth": "20",
		"itemStyle": {
			"barBorderRadius": [4, 4, 0, 0],
			"color": {
				"x": 0,
				"y": 0,
				"x2": 0,
				"y2": 1,
				"type": "linear",
				"global": false,
				"colorStops": [{
					"offset": 0,
					"color": "#1DC6FF"
				}, {
					"offset": 1,
					"color": "#3042E3"
				}]
			}
		},
		"data": [{
			"name": "测试1",
			"value": "28.43",
			"value2": 557
		}, {
			"name": "测试2",
			"value": "8.01",
			"value2": 157
		}, {
			"name": "测试3",
			"value": "4.80",
			"value2": 94
		}, {
			"name": "测试4",
			"value": "1.68",
			"value2": 33
		}, {
			"name": "测试5",
			"value": "11.38",
			"value2": 223
		}, {
			"name": "测试6",
			"value": "7.55",
			"value2": 148
		}, {
			"name": "测试7",
			"value": "7.81",
			"value2": 153
		}, {
			"name": "测试8",
			"value": "1.79",
			"value2": 35
		}, {
			"name": "测试9",
			"value": "10.67",
			"value2": 209
		}, {
			"name": "测试10",
			"value": "10.72",
			"value2": 210
		}, {
			"name": "测试11",
			"value": "6.84",
			"value2": 134
		}]
	}]
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-08-14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档