Echarts柱状图自定义立体图形

已于 2024-04-18 15:35:01 修改
阅读量309 收藏 1
点赞数 1
文章标签： echarts 前端 javascript
于 2024-04-18 14:04:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45609680/article/details/137919158
版权

例一：

参考这个大佬：https://zhuanlan.zhihu.com/p/608402859

效果图：

js：

var chartDom = document.getElementById('idName');
        var myChart = echarts.init(chartDom);
        var option;
        const labels = ['<20','20-70','70-160', '160-320','>320'];
        const seriesData = [
            {
                label: '<20',
                value: [32],
            },
            {
                label: '20-70',
                value: [24],
            },
            {
                label: '70-160',
                value: [42],
            },
            {
                label: '160-320',
                value: [20],
            },
            {
                label: '>320',
                value: [20],
            }
        ]
        const colors = [
            [
                { offset: 0, color: 'rgba(52, 163, 224, 1)' },
                { offset: 1, color: 'rgba(52, 163, 224, 0.08)' },
            ],
            [
                { offset: 0, color: 'rgba(255, 209, 92, 1)' },
                { offset: 1, color: 'rgba(137, 163, 164, 0.08)' },
            ],
            [
                { offset: 0, color: 'rgba(255, 157, 59, 1)' },
                { offset: 1, color: 'rgba(44, 166, 166, 0.08)' },
            ],
            [
                { offset: 0, color: 'rgba(236,82,51,1)' },
                { offset: 1, color: 'rgba(34, 66, 186, 0.08)' },
            ],
            [
                { offset: 0, color: 'rgba(117,22,34, 1)' },
                { offset: 1, color: 'rgba(34, 66, 186, 0.08)' },
            ],
        ];

        option = {
            xAxis: {
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#EEEEEE'
                },
                nameTextStyle: {
                    color: '#fff'
                },
                data: labels,
            },
            legend: {
                data: getlegendData(),
                right: '25',
                top: '18',
                icon: 'rect',
                itemHeight: 10,
                itemWidth: 10,
                textStyle: {
                    color: '#EEEEEE'
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#EEEEEE'
                },
                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);

例二：

第二种方法就是用两个柱或者三个柱拼接出立体图形

效果图：

js：

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

const dataList = [
  { name: '周一', value: '50' },
  { name: '周二', value: '70' },
  { name: '周三', value: '60' },
  { name: '周四', value: '51' },
  { name: '周五', value: '40' },
  { name: '周六', value: '80' },
  { name: '周天', value: '70' }
];

option = {
  xAxis: {
    type: 'category',
    data: dataList.map((item) => item.name),
    axisLabel: {
      margin: 20
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      // /数据图
      data: dataList.map((item) => item.value),
      type: 'bar',
      barWidth: 40,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
          { offset: 0, color: '#3398BC' },
          { offset: 1, color: '#3C7AB9' }
        ])
      },
      z: 1
    },
    {
      // 最上面菱形
      data: dataList.map((item) => item.value),
      type: 'pictorialBar',
      symbol: 'diamond',
      symbolSize: ['40', '10'],
      symbolPosition: 'end',
      symbolOffset: ['', '-50%'],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#3391BC' },
          { offset: 1, color: '#3C71B9' }
        ])
      },
      z: 2
    }
  ]
};

option && myChart.setOption(option);

和风微凉
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
echarts实现立体柱状图
ʚ菲菲的博客ɞ
12-29 2108
基于象形柱图pictorialBar实现。 var rocket = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAeCAYAAACPOlitAAAAAXNSR0IArs4c6QAADOdJREFUaEPFmttvXNd1xn9r7TNnOBzeRIkSRetiW7Lk0q5tWXIcSS2qFrENFMlLADtNAyc24tZAC/ShL+1b1H+hQAuoqKvIjlvAfstLYSNFpCRO4tiMGsryTfcL
【JavaScript源代码】vue基于echarts实现立体柱形图.docx
12-29
vue基于echarts实现立体柱形图 　　立体柱形图是由前面、右面、上面三部分组成，绘制时需要先绘制前面为一个图形，右面和上面绘制为一个图形，然后在echats中注册，在option的series中renderItem中渲染　　代码如下：　　（1）注册绘制图形　　registry () {　　      let MyCubeRect = this.$echarts.graphic.extendShape({　　        shape: {　　          x: 0,　　          y: 0,　　          width: 20,　　          zWidth:
echarts实现单3D立体柱状图
Dalin0929的博客
11-26 1万+
效果图： 实现代码： function getEcharts3DBar (xAxisData, data, colorType) { var colorArr = []; if (colorType == '01') { colorArr = ["#2886c6", "#50bfda", "#89e3ec"]; } else { colorArr = ["#28c1c6", "#50dac0", "#87e8c7"]; } var c
Echarts柱状图每个柱子都设置不同的渐变色，达到视觉上的立体效果
最新发布
hunantai的博客
05-31 148
【代码】Echarts柱状图每个柱子都设置不同的渐变色，达到视觉上的立体效果。
echarts 柱状图【立体】
小菜张的博客
04-28 1万+
立体柱状 echarts 柱状图上面显示文字 series: [ { name: 'a', tooltip: { show: false, }, data: this.data, type: 'bar', barWidth: 16, // 柱条的宽度，不设时自适应。 barGap: 200, // 不同系列的柱间距离
记录下echarts立体柱形图实现的几种方式
qq_35438952的博客
03-24 2615
ecarts立体柱形图实现方法
echarts的图表立体感——实现立体柱状图和立体饼图的详细教程
杜永康的博客
11-01 1万+
准备HTML结构和容器，用于容纳图表的展示。初始化Echarts实例，并将之前创建的容器关联起来。配置图表所需的数据，包括x轴和对应的柱状图的高度值（对于立体柱状图）或每个扇区的名称和对应的数值（对于立体饼图）。配置图表的选项，包括样式、颜色和其他属性。渲染图表并呈现在页面中，通过调用Echarts实例的setOption方法将之前配置好的选项应用到图表中，并通过调用Echarts实例的render方法将图表渲染出来。
使用echarts实现立体-柱状图
07-21
效果图 https://mp.csdn.net/mp_blog/creation/editor/125918054 用echarts实现立体-柱状图ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多
echarts实现3d柱状图的两种方式
weixin_69773376的博客
12-06 1万+
echarts实现3d柱状图效果
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点
Web_chicken的博客
10-09 5234
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点 先看效果图 我们可以看到图中图表不仅有渐变色，同时柱状图顶部位置有一个不相同的顶部亮点(图片) 接下来，我们一起来实现一下这个效果 1. HTML部分 <div id="ParkingLotLoadRanking" ref="ParkingLotLoadRanking" style="height:16.875rem;width:25%;"></div> 2. JS部分 // 获取DOM元素 let m
echarts3D柱状图顶部设置指定图片
caiji_laoshen的博客
11-08 610
【代码】echarts3D柱状图顶部设置指定图片。
vue echart 立体柱状图 带阴影
Thekingyu的博客
11-14 1129
【代码】vue echart 立体柱状图 带阴影。
【大前端】ECharts 绘制立体柱状图
朝拜者
04-30 374
【大前端】ECharts 绘制立体柱状图。
cmd中安装tensorflow显示成功，在python shell里import失败
SunshineRain的博客
11-19 563
问题描述： 在cmd中安装tensorflow显示成功，在python shell里import失败，但是在anaconda里能够import 最后发现环境变量设置的是anaconda下Scripts，即就是之前在cmd中用的是anaconda下的pip安装，自然安装在anaconda下了 解决办法一： 找到自己的python安装目录下，在\Lib\site-packages新建文件 写入anaconda 下\Lib\site-packages的绝对路径 示例 路径换成自己的 这个前提是anaconda
eacharts地图加外边框阴影，增加立体效果
snow_cake的博客
11-21 9499
echarts中国地图上加边框阴影，是给每一级都加上了阴影 默认是这个样子的，很难看，也不清晰，想要实现只给地图外边框加阴影 在网上查说是echarts官方暂时还没有给地图外侧加阴影的设置 既然官方没有，在网上借阅了各位大神的解决办法 在不加任何阴影的情况下是这种的 加上阴影是这种的 两种结合，就能实现下面的 废话不多说，上代码 let option = { ...
Echarts实现3D柱状图（领导要的样子）
热门推荐
yucheng_1995的博客
05-13 3万+
3D柱状图
echarts柱状图自定义tooltip
08-04
回答: 要自定义echarts柱状图的tooltip，你可以使用tooltip_opts参数，并在其中设置formatter属性为一个函数。在这个函数中，你可以通过params参数获取到tooltip的数据。[2]具体来说，你可以使用params.data.text来获取到每个柱状图的文本数据。例如，你可以将以下代码添加到你的echarts柱状图配置中来实现自定义tooltip： ```python tooltip_opts=opts.TooltipOpts(formatter=JsCode(js_code_str)) ``` 其中，js_code_str是一个包含自定义函数的字符串，函数的参数是params，返回值是params.data.text。这样，你就可以在tooltip中显示自定义的文本数据了。[2]另外，你也可以参考官方的柱状图示例代码，其中也包含了自定义tooltip的配置。[3]希望这个回答对你有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

和风微凉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值