vue基于echarts实现立体柱形图

立体柱形图是由前面、右面、上面三部分组成,绘制时需要先绘制前面为一个图形,右面和上面绘制为一个图形,然后在echats中注册,在option的series中renderItem中渲染

代码如下:

(1)注册绘制图形

registry () {
      let MyCubeRect = this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
          width: 20,
          zWidth: 8,
          zHeight: 4
        },
        buildPath: function (ctx, shape) {
          const api = shape.api
          const xAxisPoint = api.coord([shape.xValue, 0])
          const p0 = [shape.x, shape.y]
          const p1 = [shape.x - shape.width / 2, shape.y]
          const p4 = [shape.x + shape.width / 2, shape.y]
          const p2 = [shape.x - shape.width / 2, xAxisPoint[1]]
          const p3 = [shape.x + shape.width / 2, xAxisPoint[1]]

          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()
        }
      })
      let MyCubeShadow = this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
          width: 20,
          zWidth: 8,
          zHeight: 4
        },
        buildPath: function (ctx, shape) {
          const api = shape.api
          const xAxisPoint = 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实现立体柱状图

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

(0)

相关推荐

  • vue3.0+echarts实现立体柱图

    前言: vue3.0实现echarts立体柱图 实现效果: 实现步骤: 1.安装echarts cnpm i --save echarts 2.页面定义容器 <template> <div ref="echart" class="echartDiv"></div> </template> 3.js中引入echarts import * as echarts from 'echarts'; 组件完整源码: <tem

  • 使用D3.js+Vue实现一个简单的柱形图

    最近想在Vue的项目里尝试使用d3.js,封装一些常用的图表.这里记录一下自己搭建项目的过程,以及实现一个简单的柱形图.不了解D3的请移步D3 Data-Driven Documents,它是基于数据驱动文档工作方式的一款JavaScript函数库,主要用于网页作图.生成互动图形,是最流行的可视化库之一. 说明 采用Vue-cli脚手架快速搭建项目 npm 安装 D3 实现一个简单的柱形图 项目搭建 使用vue-cli搭建单页应用: # 安装 vue-cli $ npm install --gl

  • 如何在vue 中使用柱状图 并自修改配置

    1.在html文件导入echart <!-- 引入echarts --> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script> 2.在main.js上挂载echarts对象 Vue.prototype.$echarts = window.echarts // 使用时直接使用this.$echarts 3.页面结构 <templ

  • vue柱状进度条图像的完美实现方案

    前言 本文是对bar进度条实现的2种方案进行分享,第一种是很简单,纯css的实现,第二种是echart的实现. css的实现 css实现很简单.代码如下: <template> <div class="haoroomflex"> <div v-for="(item,index) in barData" :key="index" class="onebar"> <div class=&q

  • Vue使用Echarts实现立体柱状图

    本文实例为大家分享了Vue使用Echarts实现立体柱状图的具体代码,供大家参考,具体内容如下 预览: 代码: 页面部分: <template> <div class="roadnum-all" ref="roadnumall"> <div id="roadnum" ref="dom"></div> </div> </template> CSS部分: .r

  • vue使用echarts实现水平柱形图实例

    文件结构: testData.js文件 const dtuEdition = { name: '有方有线', number: 60, proportion: 40, edition: { '有方有线V1.0.0': 20, '有方有线V1.2.0': 15, '有方有线V2.0.1': 10, '有方有线V3.0.0': 8, '有方有线V3.2.0': 5, '有方有线V3.4.0': 4, '有方有线V4.0.0': 3, '有方有线V4.0.2': 2, '有方有线V4.0.3': 1 }

  • vue基于echarts实现立体柱形图

    立体柱形图是由前面.右面.上面三部分组成,绘制时需要先绘制前面为一个图形,右面和上面绘制为一个图形,然后在echats中注册,在option的series中renderItem中渲染 代码如下: (1)注册绘制图形 registry () { let MyCubeRect = this.$echarts.graphic.extendShape({ shape: { x: 0, y: 0, width: 20, zWidth: 8, zHeight: 4 }, buildPath: functio

  • vue使用echarts实现立体柱形图

    本文实例为大家分享了vue使用echarts实现立体柱形图的具体代码,供大家参考,具体内容如下 立体柱形图是由前面.右面.上面三部分组成,绘制时需要先绘制前面为一个图形,右面和上面绘制为一个图形,然后在echats中注册,在option的series中renderItem中渲染代码如下: (1)注册绘制图形 registry () {       let MyCubeRect = this.$echarts.graphic.extendShape({         shape: {      

  • vue基于Echarts的拖拽数据可视化功能实现

    背景 我司产品提出了一个需求,做一个数据基于Echars的可拖拽缩放的数据可视化,上网百度了一番,结果出现了两种结局,一种花钱买成熟产品(公司不出钱),一种没有成熟代码,只能自己写了,故事即将开始,敬请期待.......  不,还是先上一张效果图吧,请看...... 前期知识点 1. offset(偏移量) 定义:当前元素在屏幕上占用的空间,如下图: 其中: offsetHeight: 该元素在垂直方向上的占用的空间,单位为px,不包括margin. offsetWidth:该元素在水平方向上的

  • vue+echarts实现3D柱形图

    本文实例为大家分享了vue+echarts实现3D柱形图的具体代码,供大家参考,具体内容如下 1.安装echarts npm install echarts --save 2.引入echarts import echarts from "echarts"; //修改原型链,可在全局使用 Vue.prototype.$echarts = echarts; 3.创建图表 首先需要在 HTML 中创建图表的容器 <div id="echarts_park">&

  • vue使用echarts图表的详细方法

    本文为大家分享了vue使用echarts图表的方法,供大家参考,具体内容如下 该示例使用 vue-cli  脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 使用 cnpm install echarts -S 创建图表 全局引入 main.js // 引入echarts import echarts fro

  • vue中echarts图表大小适应窗口大小且不需要刷新案例

    我就废话不多说了,大家还是直接看代码吧~ 内容如下: // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')) //根据窗口的大小变动图表 --- 重点 window.onresize = function(){ myChart.resize(); //myChart1.resize(); //若有多个图表变动,可多写 } 代码如下: mounted() { con

  • 基于Echarts图表在div动态切换时不显示的解决方式

    简单粗暴,先上图,大概长这样: 在使用vue时有遇到像上图下拉框change事件切换div,change切完后大概会变成这个样子: 上代码: <div class="test"> <p class="title"> <select v-model="selected" v-on:change="change"> <option v-for="option in options

随机推荐