【echarts】3D双柱形图

已于 2023-11-28 11:16:22 修改
阅读量472 收藏 3
点赞数 3
文章标签： echarts javascript
于 2023-11-06 14:23:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42122434/article/details/134245515
版权

在这里插入图片描述

const offsetX = 16;
const offsetY = 8;
[-18, 18].forEach((customOffset, index) => {
	const CubeLeft = echarts.graphic.extendShape({
		shape: {
			x: 0,
			y: 0,
		},
		buildPath: function (ctx, shape) {
			const xAxisPoint = shape.xAxisPoint;
			const c0 = [shape.x - customOffset, shape.y];
			const c1 = [shape.x - offsetX - customOffset, shape.y - offsetY];
			const c2 = [xAxisPoint[0] - offsetX - customOffset, xAxisPoint[1] - offsetY];
			const c3 = [xAxisPoint[0] - customOffset, xAxisPoint[1]];
			ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
		},
	});
	const CubeRight = echarts.graphic.extendShape({
		shape: {
			x: 0,
			y: 0,
		},
		buildPath: function (ctx, shape) {
			const xAxisPoint = shape.xAxisPoint;
			const c1 = [shape.x - customOffset, shape.y];
			const c2 = [xAxisPoint[0] - customOffset, xAxisPoint[1]];
			const c3 = [xAxisPoint[0] + offsetX - customOffset, xAxisPoint[1] - offsetY];
			const c4 = [shape.x + offsetX - customOffset, shape.y - offsetY];
			ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
		},
	});
	const CubeTop = echarts.graphic.extendShape({
		shape: {
			x: 0,
			y: 0,
		},
		buildPath: function (ctx, shape) {
			const c1 = [shape.x  - customOffset, shape.y];
			const c2 = [shape.x + offsetX - customOffset, shape.y - offsetY];
			const c3 = [shape.x  - customOffset, shape.y - offsetX];
			const c4 = [shape.x - offsetX - customOffset, shape.y - offsetY];
			ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
		},
	});
	echarts.graphic.registerShape('CubeLeft' + index, CubeLeft);
	echarts.graphic.registerShape('CubeRight' + index, CubeRight);
	echarts.graphic.registerShape('CubeTop' + index, CubeTop);
});
const MAX =[ 800, 800, 800, 800, 800, 800, 800];
const NAME = [2015, 2016, 2017, 2018, 2019, 2020, 2021];
const VALUE = [200, 400, 300, 500, 700, 300, 100];
const VALUE2 = [500, 200, 700, 400, 300, 600, 400];
option = {
	backgroundColor: '#012366',
	grid: {
		left: '5%',
		right: 0,
		bottom: '5%',
		top: '5%',
		containLabel: true,
	},
	tooltip: {
		trigger: 'axis',
		axisPointer : {            // 坐标轴指示器，坐标轴触发有效
			type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		},
		formatter: function(e) {
			var str =
					e[2].axisValue +
					"<br>" +
					"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
					"rgba(225,155,172, 1)" +
					";'></span>" +
					"课程数量 : " +
					e[2].value +
					"<br>" +
					"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
					"rgba(25,155,172, 1)" +
					";'></span>" +
					"完成数量 : " +
					e[3].value;
			return str;
		},
	},
	legend: {
		orient: 'vertical',
		x: 'right',
		y: 'center',
		data: ['课程数量', '完成数量', ]
	},
	xAxis: {
		type: 'category',
		data: NAME,
		axisLine: {
			show: true,
			lineStyle: {
				width: 2,
			color: '#7ca7d9',
			},
		},
		axisTick: {
			show: false,
		},
		axisLabel: {
			fontSize: 14,
		},
	},
	yAxis: {
		type: 'value',
		minInterval: 1,
		axisLine: {
			show: true,
			lineStyle: {
				width: 2,
		    	color: '#2B7BD6',
			},
		},
		splitLine: {
			show: true,
			lineStyle: {
				color: 'rgba(201,217,241,0.23)',
			},
		},
		axisTick: {
			show: false,
		},
		axisLabel: {
			fontSize: 14,
		},
	},
	
 dataZoom: [{
    show: true,
    height: 30,
    xAxisIndex: [
        0
    ],
    bottom: 30,
    start: 10,
    end: 50,
    handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
    handleSize: '110%',
    handleStyle:{
        color:"#d3dee5",
        
    },
       textStyle:{
        color:"#fff"},
       borderColor:"#90979c"
    
    
}, {
    type: "inside",
    show: true,
    height: 15,
    start: 1,
    end: 10
}],
	series: [
		{
			// 最大高度
			type: 'custom',
			renderItem: function(params, api) {
				const location = api.coord([api.value(0), api.value(1)])
				return {
					type: 'group',
					children: [{
						type: 'CubeLeft0',
						shape: {
							api,
							x: location[0],
							y: location[1],
							xAxisPoint: api.coord([api.value(0), 0])
						},
						style: {
							fill: `rgba(25,155,172, .1)`
						}
					}, {
						type: 'CubeRight0',
						shape: {
							api,
							x: location[0],
							y: location[1],
							xAxisPoint: api.coord([api.value(0), 0])
						},
						style: {
							fill: `rgba(25,155,172, .3)`
						}
					}, {
						type: 'CubeTop0',
						shape: {
							api,
							x: location[0],
							y: location[1],
							xAxisPoint: api.coord([api.value(0), 0])
						},
						style: {
							fill: `rgba(25,155,172, .4)`
						}
					}]
				}
			},
			data: MAX
		} ,

		{
			// 最大高度
			type: 'custom',
			renderItem: function(params, api) {
				const location = api.coord([api.value(0), api.value(1)])
				return {
					type: 'group',
					children: [{
						type: 'CubeLeft1',
						shape: {
							api,
							x: location[0],
							y: location[1],
							xAxisPoint: api.coord([api.value(0), 0])
						},
						style: {
							fill: `rgba(225,155,172, .1)`
						}
					}, {
						type: 'CubeRight1',
						shape: {
							api,
							x: location[0],
							y: location[1],
							xAxisPoint: api.coord([api.value(0), 0])
						},
						style: {
							fill: `rgba(225,155,172, .3)`
						}
					}, {
						type: 'CubeTop1',
						shape: {
							api,
							x: location[0],
							y: location[1],
							xAxisPoint: api.coord([api.value(0), 0])
						},
						style: {
							fill: `rgba(225,155,172, .4)`
						}
					}]
				}
			},
			data: MAX
		} ,
		{
			type: 'custom',

			renderItem: (params, api) => {
				const location = api.coord([api.value(0), api.value(1)]);
				return {
					type: 'group',
					children: [
						{
							type: 'CubeLeft0',
							shape: {
								api,
								xValue: api.value(0),
								yValue: api.value(1),
								x: location[0] - 0,
								y: location[1],
								xAxisPoint: api.coord([api.value(0), 0]),
							},
							style: {
								fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: 'rgba(25,155,172, .5)',
									},
									{
										offset: 1,
										color: 'rgba(25,155,172, .5)',
									},
								]),
							},
						},
						{
							type: 'CubeRight0',
							shape: {
								api,
								xValue: api.value(0),
								yValue: api.value(1),
								x: location[0] - 0,
								y: location[1],
								xAxisPoint: api.coord([api.value(0), 0]),
							},
							style: {
								fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: 'rgba(25,155,172, 1)',
									},
									{
										offset: 1,
										color: 'rgba(25,155,172, .5)',
									},
								]),
							},
						},
						{
							type: 'CubeTop0',
							shape: {
								api,
								xValue: api.value(0),
								yValue: api.value(1),
								x: location[0] - 0,
								y: location[1],
								xAxisPoint: api.coord([api.value(0), 0]),
							},
							style: {
								fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: 'rgba(25,155,172, .8)',
									},
									{
										offset: 1,
										color: 'rgba(25,155,172, .8)',
									},
								]),
							},
						},
					],
				};
			},
			data: VALUE,
		},
		{
			type: 'custom',
			renderItem: (params, api) => {
				const location = api.coord([api.value(0), api.value(1)]);
				return {
					type: 'group',
					children: [
						{
							type: 'CubeLeft1',
							shape: {
								api,
								xValue: api.value(0),
								yValue: api.value(1),
								x: location[0] - 0,
								y: location[1],
								xAxisPoint: api.coord([api.value(0), 0]),
							},
							style: {
								fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: 'rgba(225,155,172, .5)',
									},
									{
										offset: 1,
										color: 'rgba(225,155,172, .5)',
									},
								]),
							},
						},
						{
							type: 'CubeRight1',
							shape: {
								api,
								xValue: api.value(0),
								yValue: api.value(1),
								x: location[0] - 0,
								y: location[1],
								xAxisPoint: api.coord([api.value(0), 0]),
							},
							style: {
								fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: 'rgba(225,155,172, 1)',
									},
									{
										offset: 1,
										color: 'rgba(225,155,172, .5)',
									},
								]),
							},
						},
						{
							type: 'CubeTop1',
							shape: {
								api,
								xValue: api.value(0),
								yValue: api.value(1),
								x: location[0] - 0,
								y: location[1],
								xAxisPoint: api.coord([api.value(0), 0]),
							},
							style: {
								fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: 'rgba(225,155,172, .8)',
									},
									{
										offset: 1,
										color: 'rgba(225,155,172, .8)',
									},
								]),
							},
						},
					],
				};
			},
			data: VALUE2,
		},
	],
};
公羽www
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
echarts-多柱子柱状图
牛栏山矿泉水
06-06 1484
1、问题背景 利用ECharts制作一个多柱子柱状图，其中数据源模拟动态获取 2、实现源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;echarts-多柱子柱状图&lt;/title&gt; &lt;link rel="
echart实现3D柱状图效果
01-31
echart.js实现动态3D效果，酷炫的效果，值得研究看看哈
基于Echarts的横向双3D柱形图
最新发布
qq_42267856的博客
06-19 181
【代码】基于Echarts的横向双3D柱形图。
echarts 双立体柱状图
qq_40279395的博客
06-15 1182
const xData = ['南京', '苏州', '连云港', '扬州', '无锡'];//data1存放背景条的数值，for循环使其数量与value一致。data: ['市政管道', '庭院管道', '立管'],show: true, // 是否显示坐标轴轴线。name: '单位（公里）',name: '市政管道',name: '庭院管道',name: '市政管道',name: '庭院管道',name: '立管',name: '立管',
Echarts 3D柱形图和3D堆叠柱形图实现
z1076233241的博客
05-28 3921
这个图本身组成部分多样，一组双柱图（蓝绿柱子），由10个部分构成，解释其中一个（蓝色），一个由3个菱形，2个直边构成。3个菱形为上、中、底部，2个直边为背景虚化的柱子，和蓝颜色柱子，绿色柱子同理。其中，直边的图形利用两种颜色，深浅不一进行渲染，出现了类似于直边的效果。最后吐槽，我原本想实现的柱形图，是上方为平行四边形的类型的柱形图，但发现，Echarts自带的图形中，没有平行四边形，得自己画或者去官方那里放入图片进行代码的生成导出，于是放弃，使用这种网上查找的大多数人使用的菱形进行操作。
使用Echarts结合Canvas实现立体双柱一折线图表
Jnsone的博客
01-24 567
echarts自定义立体双柱一折线图表
双立体柱状图/双y轴
Xiang_Gong_Ya_的博客
06-30 269
立体柱状图
echarts3D热力图配置文件
10-08
echarts3D热力图配置文件
echarts 3D饼图组件
09-26
import PieChart3D from "@/components/PieChart3D" <PieChart3D values={[ { name: "整租", value: 3, color: [5, 140, 198, 1] }, { name: "散租", value: 2, color: [255, 137, 0, 1] } ]} />
echarts3D地球素材
03-16
**ECharts 3D地球素材详解** ECharts是一款由百度开发的开源JavaScript数据可视化库，它基于HTML5 Canvas，能够创建丰富的交互式图表和可视化应用。在ECharts 3D中，用户可以构建出立体、动态的3D图表，其中包括3D...
echarts 3d饼图资源
05-12
总之，这个 "echarts 3d饼图资源" 包含了构建 ECharts 3D 饼图所需的数据和配置，是进行数据可视化的有力工具。通过深入理解和灵活运用这些资源，开发者可以创建出既美观又实用的 3D 数据展示效果，提升数据分析和...
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
使用echarts实现双向柱状图
09-02
1、文件夹下载下来后直接双击html文件即可... 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、echarts基本图例里面不存这个图形; 6、有问题欢迎留言，看到会解答；
echarts实现3D柱状图（视觉层面）和3D饼图
布克吉的博客
06-06 1万+
立体图形从一个方向只能看到三个面，于是我们通过echarts图表实现 顶部，明面，和暗面。更多参数配置，前往echarts官网查询，
echarts 3d柱状图
徐___L
02-16 3361
echarts 3d柱状图
Echarts立体柱状图
Summer_JK的博客
11-07 1万+
echarts绘制漂亮的立体柱状图（超详细） 为了做一个漂亮的立体柱状图，几乎吧echarts所有的柱状图都看了一遍，一遍遍的改，终于绘制出我想要的效果，下面是代码： HTML： <div class="content bgBox"> <div class="firstTitle"> <p class="titleName">购买力最强</p> </div> <div id="buyTop" style="width: 100%;h
echarts实现多3D立体柱状图
Dalin0929的博客
11-26 1万+
效果图： 实现代码： // 立体多柱状图 function getSolidOption(data1, data2, data3) { // 月份坐标轴 var nowMonth = new Date().getMonth() + 1; var lineXAxisData = []; for (var i = 5; i >= 0; i--) { var month = nowMonth - i; if (month < 1) { lineXAxisD
echarts 3D柱形图
Hooray_HU的博客
10-26 212
echarts 3D柱形图
Echarts 双柱状图+折线图合并---实现效果详解(vue+Echarts实现)
热门推荐
黑木令之佛性
07-06 1万+
此文章讲解 Echarts 在 vue 开发中的使用方式以及实现效果的 demo 示例展示; 如有疑问或者不清楚的欢迎随时提问 。 废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。 1. 使用 echarts 版本: “echarts”: “^4.3.0” 2. 安装方式: cnpm install echarts --save 或者 cnpm install echarts -S 3. 在 main.js 入口文件中全局引入: 1. impo
echarts双柱状图
10-14
好的，关于echarts双柱状图，你可以参考以下代码实现： ```javascript // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { tooltip: {}, legend: { data:['销量', '利润'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] },{ name: '利润', type: 'bar', data: [2, 10, 18, 4, 5, 10] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值