echarts实现多个立体柱状图

最新推荐文章于 2024-04-08 10:29:42 发布
最新推荐文章于 2024-04-08 10:29:42 发布
阅读量4.2k 收藏 8
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SpringHASh/article/details/107387473
版权

效果图：

 

代码如下：

 

// 1.后台返回数据
{
	"resultCode": 200,
	"message": "操作成功",
	"data": {
		"items": [
			{
				"areaCode": "320115",
				"areaType": 2,
				"areaName": "江宁区",
				"recorddate": 201129,
				"rateHb": 1,
				"changeCountHb": 2,
				"changeCountMeter": 14,
				"changeCountPhase": 7,
				"rateHxb": 1,
				"changeCountBranch": 14,
				"ratePhase": 1,
				"rateMeter": 1,
				"provinceId": null,
				"cityId": null,
				"districtId": null,
				"courtId": null,
				"substainId": null,
				"type": null,
				"count": null,
				"subName": null,
				"assetNumber": null
			}
		]
	}
}



// 2.数据格式化
function renderAccuracyChart(data) {
    var legends = [];
    var hbData = [];
    var meterData = [];
    var phaseData = [];
    $(data).each(function (idx,itm) {
        legends.push(itm.areaName);
        hbData.push(fmtNumber(itm.rateHb,2)*100);
        meterData.push(fmtNumber(itm.rateMeter,2)*100);
        phaseData.push(fmtNumber(itm.ratePhase,2)*100)
    });
    drawDiscernRatio('discern-ratio',legends,hbData,meterData,phaseData);
}



// 3.主方法
function drawDiscernRatio(elId,legends,hbData,meterData,phaseData) {
    // 绘制左侧面
    const wid = 20;
    const w1 = Math.sin(Math.PI/6) * wid; //4
    const w2 = Math.sin(Math.PI/3) * wid; // 6.8
    const snapHeight = wid / 4;
    const CubeLeft = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function(ctx, shape) {
            // 会canvas的应该都能看得懂，shape是从custom传入的
            const xAxisPoint = shape.xAxisPoint
            const c0 = [shape.x, shape.y - 2]
            const c1 = [shape.x - w2, shape.y - w1 + snapHeight - 2]
            const c2 = [shape.x - w2, xAxisPoint[1] -w1 + snapHeight - 2]
            const c3 = [shape.x, xAxisPoint[1] - 2]
            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, shape.y - 2]
            const c2 = [shape.x, xAxisPoint[1] - 2]
            const c3 = [shape.x + w1, xAxisPoint[1] - w2 + snapHeight -2]
            const c4 = [shape.x + w1, shape.y - w2 + snapHeight - 2]
            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, shape.y - 2]
            const c2 = [shape.x + w1, shape.y - w2 + snapHeight - 2] //右点
            const c3 = [shape.x - w2 + w1, shape.y - w1-w2 +  + snapHeight*2 - 2]
            const c4 = [shape.x - w2, shape.y - w1 + snapHeight - 2]
            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', CubeLeft)
    echarts.graphic.registerShape('CubeRight', CubeRight)
    echarts.graphic.registerShape('CubeTop', CubeTop)

    let option = {
        legend:{
            data: ['户变关系识别完成度','电表资产识别完成度','电表相位识别完成度'],
            selectedMode:false
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function(params){
                let item ='';
                item += params[0].name+'<br>'
                $(params).each(function (idx,itm) {
                    item += itm.seriesName+':'+itm.value +'<br>'
                });
                return item;
            }
        },
        grid: {
            left: '5%',
            right: '5%',
            top: '15%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: legends,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#AAA'
                }
            },
            axisTick: {
                show: false,
                length: 9,
                alignWithLabel: true,
                lineStyle: {
                    color: '#AAA'
                }
            },
            axisLabel: {
                fontSize: 20
            }
        },
        yAxis: {
            name:'识别完成度/%',
            type: 'value',
            nameTextStyle:{
                color:'#707e98'
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#AAA'
                }
            },
            axisLabel: {
                color: '#AAA'
            }
        },
        series: [{
            name:"户变关系识别完成度",
            type: 'custom',
            renderItem: (params, api) => {
                const location = api.coord([api.value(0), api.value(1)])
                location[0] = location[0] + wid*(-2);
                const xlocation = api.coord([api.value(0), 0]);
                xlocation[0] = xlocation[0] + wid*(-2);
                return {
                    type: 'group',
                    children: [{
                        type: 'CubeLeft',
                        shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: xlocation
                        },
                        style: {
                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#55B6F8'
                            },
                                {
                                    offset: 1,
                                    color: '#55B6F8'
                                }
                            ])
                        }
                    }, {
                        type: 'CubeRight',
                        shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: xlocation
                        },
                        style: {
                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#55B6F8'
                            },
                                {
                                    offset: 1,
                                    color: '#55B6F8'
                                }
                            ])
                        }
                    }, {
                        type: 'CubeTop',
                        shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: xlocation
                        },
                        style: {
                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#55B6F8'
                            },
                                {
                                    offset: 1,
                                    color: '#55B6F8'
                                }
                            ])
                        }
                    }]
                }
            },
            color:'#55B6F8',
            data: hbData
        },{
            name:"电表资产识别完成度",
            type: 'custom',
            renderItem: (params, api) => {
                const location = api.coord([api.value(0), api.value(1)]);
                location[0] = location[0] + wid*0;
                const xlocation = api.coord([api.value(0), 0]);
                xlocation[0] = xlocation[0] + wid*0;
                return {
                    type: 'group',
                    children: [{
                        type: 'CubeLeft',
                        shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: xlocation
                        },
                        style: {
                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#FB8C91'
                            },
                                {
                                    offset: 1,
                                    color: '#FB8C91'
                                }
                            ])
                        }
                    }, {
                        type: 'CubeRight',
                        shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: xlocation
                        },
                        style: {
                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#FB8C91'
                            },
                                {
                                    offset: 1,
                                    color: '#FB8C91'
                                }
                            ])
                        }
                    }, {
                        type: 'CubeTop',
                        shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: xlocation
                        },
                        style: {
                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#FB8C91'
                            },
                                {
                                    offset: 1,
                                    color: '#FB8C91'
                                }
                            ])
                        }
                    }]
                }
            },
            color:'#FB8C91',
            data: meterData
        },{
            name:"电表相位识别完成度",
            type: 'custom',
            renderItem: (params, api) => {
                const location = api.coord([api.value(0), api.value(1)]);
                location[0] = location[0] + wid*2;
                const xlocation = api.coord([api.value(0), 0]);
                xlocation[0] = xlocation[0] + wid*2;
                return {
                    type: 'group',
                    children: [{
                        type: 'CubeLeft',
                        shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: xlocation
                        },
                        style: {
                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#36D6D7'
                            },
                                {
                                    offset: 1,
                                    color: '#36D6D7'
                                }
                            ])
                        }
                    }, {
                        type: 'CubeRight',
                        shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: xlocation
                        },
                        style: {
                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#36D6D7'
                            },
                                {
                                    offset: 1,
                                    color: '#36D6D7'
                                }
                            ])
                        }
                    }, {
                        type: 'CubeTop',
                        shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: xlocation
                        },
                        style: {
                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#36D6D7'
                            },
                                {
                                    offset: 1,
                                    color: '#36D6D7'
                                }
                            ])
                        }
                    }]
                }
            },
            color:'#36D6D7',
            data:phaseData
        }]
    }

    _WOO.c.drawEchart(elId,option);
}

 

宁漂打工仔
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
使用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：多组柱状-图
qq_41390184的博客
04-13 5718
本文介绍了如何使用Echarts绘制多组柱状图。首先需要准备好要绘制的数据，然后在HTML页面中创建一个图表容器，并引入Echarts库文件。接着，在JavaScript代码中使用Echarts的API来绘制图表，包括设置图表的各种属性和数据系列等。最后，将option配置项应用到图表容器中，即可完成图表的绘制。
echarts立方体柱状图
最新发布
qq_35381576的博客
04-08 227
在series加入自定义和原始的bar。
Echarts.js（二）：多系列柱状图
foreverzwl
07-30 5357
多系列柱状图大部分与多系列折线图相似 一、简单html布局 简单的html如下： <!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>多系列柱状图</title> </head> <st...
echarts多个柱状图
HuLuWa1997的博客
05-18 4246
option1: { color: [ '#2777EC', '#2EACFF', '#FFA61C', '#2EC054', '#F28685', '#8C64D7' ], legend: { show: true, right: '5%', itemWidth: 16, ...
echarts 一个表多个柱状图
weixin_47517731的博客
01-12 876
【代码】echarts 一个表多个柱状图。
echarts 柱状图【立体】
weixin_43957384的博客
04-28 1万+
立体柱状 echarts 柱状图上面显示文字 series: [ { name: 'a', tooltip: { show: false, }, data: this.data, type: 'bar', barWidth: 16, // 柱条的宽度，不设时自适应。 barGap: 200, // 不同系列的柱间距离
通过Echarts怎样实现立体柱状图
weixin_55123102的博客
02-22 6076
大家好，我是梁木由。之前在做大屏可视化项目时，UI设计了一个立体形状的柱状图，根据之前做的一些图表的项目没有能复用的，没有做过这种立体形状的图表，打开echarts也没看到有相关的demo，看下如何实现`
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: 绘制立体柱状图【圆柱体】
m0_58293192的博客
01-10 8708
ECharts: 绘制立体柱状图【圆柱体】
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的柱状图立体效果解决方案
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实现的地图关联柱状图
08-19
Echarts实现的地图关联柱状图
jQuery插件Echarts实现的渐变色柱状图
10-20
本文主要介绍了jQuery插件Echarts实现渐变色柱状图的实例。具有很好的参考价值。下面跟着小编一起来看下吧
ECharts单柱状图、多柱状图、堆叠柱状图
宸0313的博客
07-20 6777
数据格式 var data = { "personOwnList": [ 23, 28, 0, 28, 12, 13, 25 ], "hasBoardList": [ 8, 29, 34, 14, 0, 4, 8 ], "titleList":
echarts的图表立体感——实现立体柱状图和立体饼图的详细教程
杜永康的博客
11-01 7490
准备HTML结构和容器，用于容纳图表的展示。初始化Echarts实例，并将之前创建的容器关联起来。配置图表所需的数据，包括x轴和对应的柱状图的高度值（对于立体柱状图）或每个扇区的名称和对应的数值（对于立体饼图）。配置图表的选项，包括样式、颜色和其他属性。渲染图表并呈现在页面中，通过调用Echarts实例的setOption方法将之前配置好的选项应用到图表中，并通过调用Echarts实例的render方法将图表渲染出来。
echarts实现3D柱状图（视觉层面）和3D饼图
布克吉的博客
06-06 9482
立体图形从一个方向只能看到三个面，于是我们通过echarts图表实现 顶部，明面，和暗面。更多参数配置，前往echarts官网查询，
echarts实现3d柱状图的两种方式
热门推荐
weixin_69773376的博客
12-06 1万+
echarts实现3d柱状图效果
echarts实现多立体柱状图
08-24
要使用ECharts实现立体柱状图，你可以使用ECharts提供的bar3D系列。首先，你需要引入ECharts的库文件。你可以在这里下载ECharts的最新版本。接下来，你需要在HTML文件中创建一个容器，用于展示图表。然后，你可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

宁漂打工仔

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

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

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

打赏作者

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

抵扣说明：

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

余额充值