ECharts 实现3D椭圆柱状图

最新推荐文章于 2024-06-02 12:02:03 发布

旭东怪

最新推荐文章于 2024-06-02 12:02:03 发布

阅读量3.6k

点赞数 7

分类专栏：图表库

本文链接：https://blog.csdn.net/qq_38974638/article/details/109058883

版权

图表库专栏收录该内容

65 篇文章 36 订阅

订阅专栏

1 实现代码（3D椭圆柱状图）

<body>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <!-- 为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 xData = ["优良率", "达标率"];
		var yData = [50, 87.3];
		var color="#19dfdd";
		var shadowColor="#0b5767";
		var barWidth=50;
		var option = {
			backgroundColor: '#05233b',
			"grid": {
				"top": "25%",
				"left": "-5%",
				"bottom": "5%",
				"right": "5%",
				"containLabel": true
			},
			animation: false,
			"xAxis": [{
				"type": "category",
				"data": xData,
				"axisTick": {
					"alignWithLabel": true
				},
				"nameTextStyle": {
					"color": "#82b0ec"
				},
				"axisLine": {
					show: false,
					"lineStyle": {
						"color": "#82b0ec"
					}
				},
				"axisLabel": {
					"textStyle": {
						"color": color
					},
					margin: 30
				}
			}],
			"yAxis": [{
				show: false,
				"type": "value",
				"axisLabel": {
					"textStyle": {
						"color": "#fff"
					},
				},
				"splitLine": {
					"lineStyle": {
						"color": "#0c2c5a"
					}
				},
				"axisLine": {
					"show": false
				}
			}],
			"series": [
				{
					"name": "数据上椭圆",
					type: 'pictorialBar',
					symbolSize: [barWidth, 10],
					symbolOffset: [0, -6],
					symbolPosition: 'end',
					z: 12,
					"label": {
						"normal": {
							"show": true,
							"position": "top",
							fontSize: 14,
							color: color,
							formatter:function(params,index){
								return params.value+"%";
							}
						}
					},
					color: "#2DB1EF",
					data: yData
				},
				{
					name: '下椭圆',
					type: 'pictorialBar',
					symbolSize: [barWidth, 10],
					symbolOffset: [0, 7],
					z: 12,
					"color": color,
					"data": yData
				},
				{
					type: 'bar',
					"barWidth": barWidth,
					barGap: '10%', // Make series be overlap
					barCateGoryGap: '10%',
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
									offset: 0,
									color: "rgba(25,223,221,.7)"
								},
								{
									offset: 1,
									color: "rgba(25,223,221,.3)"
								}
							]),
						},
					},
					data: yData
				},
			]
		};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

2 最终效果图（3D椭圆柱状图）

旭东怪

关注

7
点赞
踩
9

收藏

觉得还不错? 一键收藏
11
评论
ECharts 实现3D椭圆柱状图

1 实现代码（3D椭圆柱状图）<body>  <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.i.
复制链接

扫一扫