wordpress做视频播放网站,找个人合伙做网站,搜索网站的浏览器,大连建设网水电费缴费柱状图扩展 一、前言二、思路1、新增面①、在drawShape方法中#xff0c;新增一个实际左侧面#xff0c;②、 在drawShape方法中#xff0c;新增一个实际右侧面#xff0c;③ 绘制 2、新增series对象① 添加实际值的左侧面和右侧面 三、效果图 一、前言
事情是这样子的新增一个实际左侧面②、 在drawShape方法中新增一个实际右侧面③ 绘制 2、新增series对象① 添加实际值的左侧面和右侧面 三、效果图 一、前言
事情是这样子的收到一个粉丝的评论说想做一个这样的立体柱状图我没有写过但是我大概知道了一个思路然后给粉丝回复以后就开始尝试了
二、思路
这图我的想法是在原本的柱状图上在加两个面关于如何绘制柱状图的请看我的另一篇文章链接如下03-echarts如何画立体柱状图 说干就干
1、新增面
①、在drawShape方法中新增一个实际左侧面 const trueLeft echarts.graphic.extendShape({buildPath (ctx, shape) {const { topBasicsYAxis, bottomYAxis, basicsXAxis } shape;// 侧面宽度const WIDTH 15;// 斜角高度const OBLIQUE_ANGLE_HEIGHT 3.6;const p1 [basicsXAxis - WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];const p2 [basicsXAxis - WIDTH, bottomYAxis];const p3 [basicsXAxis, bottomYAxis];const p4 [basicsXAxis, topBasicsYAxis- OBLIQUE_ANGLE_HEIGHT];ctx.moveTo(p1[0], p1[1]);ctx.lineTo(p2[0], p2[1]);ctx.lineTo(p3[0], p3[1]);ctx.lineTo(p4[0], p4[1]);console.log(ctx---,ctx)},});关于P1P2,P3,P4的位置在我的柱状图文章中也有仔细描述就不细讲了根据效果图可以知道P1和P4的位置是水平的所以Y轴是一致的将原先的leftShape变量复制过来更改一下P4的y轴定义
②、 在drawShape方法中新增一个实际右侧面 const trueRight echarts.graphic.extendShape({buildPath (ctx, shape) {const { topBasicsYAxis, bottomYAxis, basicsXAxis } shape;// 侧面宽度const WIDTH 15;// 斜角高度const OBLIQUE_ANGLE_HEIGHT 3.6;const p1 [basicsXAxis, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];const p2 [basicsXAxis, bottomYAxis];const p3 [basicsXAxis WIDTH, bottomYAxis];const p4 [basicsXAxis WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];ctx.moveTo(p1[0], p1[1]);ctx.lineTo(p2[0], p2[1]);ctx.lineTo(p3[0], p3[1]);ctx.lineTo(p4[0], p4[1]);},});由效果图可知P1和P4的y轴依旧是一致的所以将rightShape变量复制过来更改P1的y轴定义
③ 绘制 echarts.graphic.registerShape(trueLeft, trueLeft);echarts.graphic.registerShape(trueRight, trueRight);2、新增series对象
① 添加实际值的左侧面和右侧面
series的新对象中只有实际的两个面所以可以直接将series的第一个对象复制过来然后在return中的children中只留下两个对象然后更改type名字分别为trueLeft和trueRight,我更改了一下柱子的颜色具体情况可以根据自己所需的颜色来更改 {type: custom,data: [50],barWidth: 30,renderItem (params, api) {// 基础坐标const basicsCoord api.coord([api.value(0), api.value(1)]);// 顶部基础 y 轴const topBasicsYAxis basicsCoord[1];// 基础 x 轴const basicsXAxis basicsCoord[0];// 底部 y 轴const bottomYAxis api.coord([api.value(0), 0])[1];return {type: group,children: [{type: trueLeft,shape: {topBasicsYAxis,basicsXAxis,bottomYAxis,},style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: rgb(0, 192, 238,0.8),},{offset: 0.8,color: rgb(0, 194, 239,0.2),},{offset: 1,color: rgb(0, 194, 239,0),},]),emphasis: {fill: yellow, // 鼠标高亮时的填充颜色},},},{type: trueRight,shape: {topBasicsYAxis,basicsXAxis,bottomYAxis,},style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: #00CCF5 ,},{offset: 0.8,color: rgb(4, 88, 115,0.8),},{offset: 1,color: rgb(4, 88, 115,0.6),},]),emphasis: {fill: yellow, // 鼠标高亮时的填充颜色},},},],};}},三、效果图
具体的颜色什么的自己可以调整每个children对象里面的style就是用来调整
