Echarts实现3D柱状图

Echarts实现3D柱状图

    • 效果图
    • 代码

效果图

在这里插入图片描述

代码

<!--此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=bar3d-dataset&gl=1
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head><meta charset="utf-8"><title>Echarts实现3D柱状图 - qipa250</title>
</head>
<body style="height: 100%; margin: 0">
<div id="qipa250" style="height: 100%"></div><script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.7.1/jquery.min.js"></script>
<!--
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>
-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
<!--  www.qipa250.com 奇葩天地网--><script type="text/javascript">var chartDom = document.getElementById('qipa250');var myChart = echarts.init(chartDom);var option;const labels = ['春节', '元宵节', '端午节', '中秋节', '国庆节'];const seriesData = [{label: '春节',value: [32],},{label: '元宵节',value: [24],},{label: '端午节',value: [42],},{label: '中秋节',value: [20],},{label: '国庆节',value: [70],}]const colors = [[{offset: 0, color: 'rgba(126, 132, 191, 1)'},{offset: 1, color: 'rgba(126, 132, 191, 0.08)'},],[{offset: 0, color: 'rgba(137, 163, 164, 1)'},{offset: 1, color: 'rgba(137, 163, 164, 0.09)'},],[{offset: 0, color: 'rgba(44, 166, 166, 1)'},{offset: 1, color: 'rgba(44, 166, 166, 0.08)'},],[{offset: 0, color: 'rgba(34, 66, 186, 1)'},{offset: 1, color: 'rgba(34, 66, 186, 0.08)'},],[{offset: 0, color: 'rgba(34, 66, 186, 1)'},{offset: 1, color: 'rgba(34, 66, 186, 0.08)'},],];option = {xAxis: {axisTick: {show: false},nameTextStyle: {color: '#fff'},data: labels,},legend: {data: getlegendData(),right: '25',top: '18',icon: 'rect',itemHeight: 10,itemWidth: 10,textStyle: {color: '#000'}},yAxis: {type: 'value',axisLabel: {color: '#000'},splitLine: {show: true,lineStyle: {type: 'dashed',color: ['#ccc']}}},series: getSeriesData()};// 定义柱状图左侧图形元素const leftRect = echarts.graphic.extendShape({shape: {x: 0,y: 0,width: 19, //柱状图宽zWidth: 8, //阴影折角宽zHeight: 4 //阴影折角高},buildPath: function (ctx, shape) {const api = shape.api;const xAxisPoint = api.coord([shape.xValue, 0]);const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];const p4 = [shape.x + shape.width / 2, shape.y];ctx.moveTo(p0[0], p0[1]);ctx.lineTo(p1[0], p1[1]);ctx.lineTo(p2[0], p2[1]);ctx.lineTo(p3[0], p3[1]);ctx.lineTo(p4[0], p4[1]);ctx.lineTo(p0[0], p0[1]);ctx.closePath();}});// 定义柱状图右侧以及顶部图形元素const rightRect = echarts.graphic.extendShape({shape: {x: 0,y: 0,width: 18,zWidth: 15,zHeight: 8},buildPath: function (ctx, shape) {const api = shape.api;const xAxisPoint = api.coord([shape.xValue, 0]);const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];const p4 = [shape.x + shape.width / 2, shape.y];const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];const p6 = [shape.x + shape.width / 2 + shape.zWidth,shape.y - shape.zHeight / 2];const p7 = [shape.x - shape.width / 2 + shape.zWidth,shape.y - shape.zHeight];ctx.moveTo(p4[0], p4[1]);ctx.lineTo(p3[0], p3[1]);ctx.lineTo(p5[0], p5[1]);ctx.lineTo(p6[0], p6[1]);ctx.lineTo(p4[0], p4[1]);ctx.moveTo(p4[0], p4[1]);ctx.lineTo(p6[0], p6[1]);ctx.lineTo(p7[0], p7[1]);ctx.lineTo(p1[0], p1[1]);ctx.lineTo(p4[0], p4[1]);ctx.closePath();}});// 注册图形元素echarts.graphic.registerShape('leftRect', leftRect);echarts.graphic.registerShape('rightRect', rightRect);function getlegendData() {const data = [];labels.forEach((item, index) => {data.push({name: item,itemStyle: {color: new echarts.graphic.LinearGradient(1, 0, 0, 0, colors[index]),},})})return data}function getSeriesData() {const data = [];seriesData.forEach((item, index) => {data.push({type: 'custom',name: item.label,renderItem: function (params, api) {return getRenderItem(params, api);},data: item.value,itemStyle: {color: () => {return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index]);},},})})return data}function getRenderItem(params, api) {const index = params.seriesIndex;let location = api.coord([api.value(0) + index, api.value(1)]);var extent = api.size([0, api.value(1)]);return {type: 'group',children: [{type: 'leftRect',shape: {api,xValue: api.value(0) + index,yValue: api.value(1),x: location[0],y: location[1]},style: api.style()},{type: 'rightRect',shape: {api,xValue: api.value(0) + index,yValue: api.value(1),x: location[0],y: location[1]},style: api.style()}]};}option && myChart.setOption(option);window.addEventListener('resize', myChart.resize);</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/285990.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

新年跨年烟花超酷炫合集【内含十八个烟花酷炫效果源码】

新年跨年烟花超酷炫合集【内含十八个烟花酷炫效果源码】

❤️以下展示为全部烟花特效效果 ❤️下方仅展示部分代码 ❤️源码获取见文末 🎀HTML5烟花喷泉 <style> * {padding:0;margin:0; } html,body {positi
阅读更多...
oracle与gbase8s迁移数据类型对照

oracle与gbase8s迁移数据类型对照

声明&#xff1a;以下为笔者阅读gbase官方文档和oracle官方文档的理解&#xff0c;如有错误&#xff0c;敬请指正。oracle与gbase8s迁移数据类型对照及举例说明 最终结论&#xff1a;oracle与gbase8s数据类型对应关系关于单精度与双精度的区别关于定点与浮点定义的区别精度的定…
阅读更多...
＜软考高项备考＞《论文专题 - 16 资源管理（二） 》

＜软考高项备考＞《论文专题 - 16 资源管理（二） 》

4 过程2-估算活动资源 4.1 提出问题 问题过程2-活动资源估算做什么估算执行项目所需的团队资源&#xff0c;以及材料、设备和用品的类型和数量的过程&#xff1b;作用&#xff1a;明确完成项目所需的资源种类、数量和特性为什么做资源不同影响项目进度也不同。活动估算资源是…
阅读更多...
【ranger】CDP环境 更新 ranger 权限策略会发生低概率丢失权限策略的解决方法

【ranger】CDP环境 更新 ranger 权限策略会发生低概率丢失权限策略的解决方法

一、问题描述&#xff1a; 我们的 kafka 服务在更新&#xff08;添加&#xff09; ranger 权限时&#xff0c;会有极低的概率导致 MM2 同步服务报错&#xff0c;报错内容 Not Authorized。但是查看 ranger 权限是赋予的&#xff0c;并且很早配置的权限策略也会报错。 相关组件…
阅读更多...
干货分享 | 如何在TSMaster中对常用总线报文信号进行过滤？

干货分享 | 如何在TSMaster中对常用总线报文信号进行过滤？

TSMaster软件平台支持对不同总线&#xff08;CAN、LIN、FlexRay&#xff09;的报文和信号过滤&#xff0c;过滤方法一般有全局接收过滤、数据流过滤、窗口过滤、字符串过滤、可编程过滤&#xff0c;针对不同的总线信号过滤器的使用方法也基本相同。今天重点和大家分享一下关于T…
阅读更多...
() 括号

() 括号

命令说明&#xff1a; 小括号在批处理编程中有特殊的作用&#xff0c;左右括号必须成对使用&#xff0c;括号中可以包括多行命令&#xff0c;这些命令将被看成一个整体&#xff0c;视为一条命令行。 括号在for语句和if语句中常见&#xff0c;用来嵌套使用循环或条件语句&#x…
阅读更多...
C#调用阿里云接口实现动态域名解析，支持IPv6（Windows系统下载可用）

C#调用阿里云接口实现动态域名解析，支持IPv6（Windows系统下载可用）

电信宽带一般能申请到公网IP&#xff0c;但是是动态的&#xff0c;基本上每天都要变&#xff0c;所以想到做一个定时任务&#xff0c;随系统启动&#xff0c;网上看了不少博文很多都支持IPv4&#xff0c;自己动手写了一个。 &#xff08;私信可全程指导&#xff09; 部署步骤…
阅读更多...
ServletFilterListenerMybatis预编译生命周期

ServletFilterListenerMybatis预编译生命周期

目录 0x00 前言 0x01 Servlet&路由&生命周期 0x02 JDBC&Mybatis 0x03 预编译 SQL 0x04 Filter 过滤器 0x05 Listener 监听器 0x00 前言 很久没有更新 CSDN 博客了&#xff0c;原因是搭建了个人博客网站&#xff0c;但现在决定还是同步到 CSDN 希望和各位大…
阅读更多...
轻量级购物小程序H5产品设计经典样例

轻量级购物小程序H5产品设计经典样例

主要是看到这个产品设计的不错值得借鉴特记录如下&#xff1a; 不过大多数购物app都大致相同&#xff0c;这个算是经典样例&#xff0c;几乎都可以复制&#xff0c;我第一次使用&#xff0c;感觉和顺畅。看上去产品是经过打磨的&#xff0c;布局非常好。内容也很丰富。支持异业…
阅读更多...
强大的电子书阅读器:OmniReader Pro for mac

强大的电子书阅读器:OmniReader Pro for mac

&#x1f50d; OmniReader Pro 是一款专为 Mac 设计的强大阅读工具&#xff0c;它能够帮助你更高效地阅读和处理各种文本内容。无论是电子书、新闻文章、网页文本还是文件资料&#xff0c;OmniReader Pro 都能胜任&#xff01; ✅ OmniReader Pro 提供了丰富的功能&#xff0c…
阅读更多...
如何在华为云上购买ECS及以镜像的方式部署华为云欧拉操作系统 (HCE OS)

如何在华为云上购买ECS及以镜像的方式部署华为云欧拉操作系统 (HCE OS)

写在前面 工作中遇到&#xff0c;简单整理博文内容为 华为云开发者认证 实验笔记https://edu.huaweicloud.com/certificationindex/developer/9bf91efb086a448ab4331a2f53a4d3a1理解不足小伙伴帮忙指正 对每个人而言&#xff0c;真正的职责只有一个&#xff1a;找到自我。然后在…
阅读更多...
时序图聚类关联算法

时序图聚类关联算法

时序图聚类关联算法 A time resolved clustering method revealing longterm structures and their short-term internal dynamics 一种揭示长期结构及其短期内动力学的时间分辨聚类方法 arxiv2019 源码&#xff1a; https://github.com/t4d-gmbh/MajorTrack/tree/master https…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023