echarts实现多个立体柱状图

智能电表识别率可视化

最新推荐文章于 2025-09-21 23:43:28 发布

原创

最新推荐文章于 2025-09-21 23:43:28 发布 · 4.4k 阅读

9 ·

CC 4.0 BY-SA版权

本文介绍了一种使用ECharts库实现的智能电表识别率可视化方法，包括户变关系、电表资产和电表相位识别完成度的三维柱状图展示。通过自定义图形和颜色渐变，实现了美观且直观的数据呈现。

效果图：

代码如下：

// 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]