vue使用echarts实现立体柱形图

本文实例为大家分享了vue使用echarts实现立体柱形图的具体代码，供大家参考，具体内容如下

立体柱形图是由前面、右面、上面三部分组成，绘制时需要先绘制前面为一个图形，右面和上面绘制为一个图形，然后在echats中注册，在option的series中renderItem中渲染Point = api.coord([shape.xValue, 0]) const p1 = [shape.x - shape.width / 2, shape.y] const p4 = [shape.x + shape.width / 2, shape.y] const p6 = [shape.x + shape.width / 2 + shape.zWidth, shape.y - shape.zHeight] const p7 = [shape.x - shape.width / 2 + shape.zWidth, shape.y - shape.zHeight] const p3 = [shape.x + shape.width / 2, xAxisPoint[1]] const p5 = [shape.x + shape.width / 2 + shape.zWidth, xAxisPoint[1] - 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() } }) this.$echarts.graphic.registerShape('MyCubeRect', MyCubeRect) this.$echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow) }

（2）渲染图形

barChartOption: {    tooltip: {     trigger: 'axis',     axisPointer: {      type: 'cross',      label: {       backgroundColor: '#6a7985'      }     }    },    grid: {     containLabel: true,     top: '30px',     bottom: '0px',     left: '0px'    },    xAxis: {     type: 'category',     axisLabel: {      interval: 0,      fontSize: fontSize(12)     },     axisLine: {      show: false,      lineStyle: {       color: '#98b9c5'      }     },     data: [] //通过后端传入数据js传入    },    yAxis: {     type: 'value',     axisLabel: {      fontSize: fontSize(12)     },     axisLine: {      show: false,      lineStyle: {       color: '#98b9c5'      }     },     splitLine: {      lineStyle: {       color: '#3a586a',       type: 'dashed'      }     }    },    series: [{     name: '单位面积能耗',     type: 'custom',     renderItem: (params, api) => {      let location = api.coord([api.value(0), api.value(1)])      return {       type: 'group',       children: [{        type: 'MyCubeRect',        shape: {         api,         xValue: api.value(0) - 0.5,         yValue: api.value(1),         x: location[0],         y: location[1]        },        style: api.style()       },       {        type: 'MyCubeShadow',        shape: {         api,         xValue: api.value(0) - 0.5,         yValue: api.value(1),         x: location[0],         y: location[1]        },        style: {         fill: api.style(),         text: ''        }       }]      }     },     stack: '单位面积能耗',     label: {      show: true,      position: 'top',      formatter: '{c}',      textStyle: {       fontSize: fontSize(12),       color: '#fff',       align: 'center'      }     },     itemStyle: {      color: new this.$echarts.graphic.LinearGradient(       0, 0, 0, 1,       [        { offset: 0, color: '#b1950d' },        { offset: 0.5, color: '#aea20d' },        { offset: 1, color: '#a5aa12' }       ]      )     },     data: [] //后端传入数据    }]   }

注意事项：

1)、在注册图形时style：只能使用 style: api.style();
text: ''后面才能使用label在图形顶部放置value

2)、this.$echarts是经过统一封装之后的，具体情况还需具体考虑

（3）生成图形

generateBarChart () {   let vm = this   if (this.$refs['uintEnergyConsume']) { //this.$refs是生成图形区域的ref值    this.$echarts.graphic.registerShape('MyCubeRect', this.MyCubeRect)    this.$echarts.graphic.registerShape('MyCubeShadow', this.MyCubeShadow)    this.barChart = this.$echarts.init(this.$refs['uintEnergyConsume'])    this.barChart.setOption(this.barChartOption, false, true)    $(window).resize(function () { //屏幕自适应     vm.handleResize()    })   }  }

（4）template中代码

<div ref="uintEnergyConsume" id="uintEnergyConsume" class="chart-container"style="width: 100%;" element-loading-text="加载中..."></div></div>

（5）效果如下：

参考图形网址：Vue使用Echarts实现立体柱状图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。