vue实现横向斜切柱状图

本文实例为大家分享了vue实现横向斜切柱状图的具体代码,供大家参考,具体内容如下

实现效果:

实现代码:

<template>
  <div class="Consumption">
    <div style="width: 350px; height: 180px" ref="ConsumptionChart" />
  </div>
</template>
<script>
import echarts from 'echarts'
const myShape = {
  x: 0,
  y: 0,
  width: 10 //间距
}
// 绘制左侧面
const InclinedRoofBar = echarts.graphic.extendShape({
  shape: myShape,
  buildPath: function(ctx, shape) {
    // 会canvas的应该都能看得懂,shape是从custom传入的
    const xAxisPoint = shape.xAxisPoint
    const c0 = [shape.x, shape.y]
    const c1 = [shape.x + 14, shape.y - 10]
    const c2 = [xAxisPoint[0], xAxisPoint[1] - 10]
    const c3 = [xAxisPoint[0], xAxisPoint[1]]
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath()
  }
})
const colors = ['rgba(50, 197, 255, 0.8)', 'rgba(0, 253, 255, 0.8)', 'rgba(255, 235, 0, 0.8)']
const colorss = ['rgba(0, 145, 255, 1)', 'rgba(68, 215, 182, 1)', 'rgba(215, 170, 68, 1)']
// 注册三个面图形
echarts.graphic.registerShape('InclinedRoofBar', InclinedRoofBar)
const defaultOption = {
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: 10,
    bottom: 30,
    left: 10,
    right: 10,
    containLabel: true
  },
  yAxis: {
    type: 'category',
    data: [],
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color(value, index) {
        return colorss[index]
      },
      fontSize: 14
    }
  },
  xAxis: {
    type: 'value',
    axisLine: {
      show: false
    },
    min: 0,
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: false
    },
    boundaryGap: ['20%', '20%']
  },
  series: [
    {
      type: 'custom',
      name: '',
      itemStyle: {
        color: 'rgba(44, 197, 253, 1)'
      },
      renderItem: (params, api) => {
       const location = api.coord([api.value(0), api.value(1)])
        const xlocation = api.coord([0, api.value(1)])
        return {
          type: 'InclinedRoofBar',
          shape: {
            api,
            xValue: api.value(0),
            yValue: api.value(1),
            x: location[0],
            y: location[1] + myShape.width,
            xAxisPoint: [xlocation[0], xlocation[1] + myShape.width]
          },
          style: {
            fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: colors[params.dataIndex]
              },
              {
                offset: 1,
                color: colorss[params.dataIndex]
              }
            ])
          }
        }
      },
      data: []
    },
    {
      type: 'bar',
      label: {
        normal: {
          show: true,
          position: 'right',
          fontSize: 14,
          offset: [15, 0]
        }
      },
      showBackground: false,
      barWidth: 14,
      backgroundStyle: {
        color: 'rgba(50, 197, 255, 0.1)'
      },
      itemStyle: {
        color: 'transparent'
      },
      tooltip: {
        show: false
      },
      data: []
    }
  ]
}
export default {
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.ConsumptionChart)
  },
  methods: {
    getOption(seriesData) {
      const option = defaultOption
      const { yAxis, series } = option
      // 处理数据
      yAxis.data = ['低', '中', '高']
      series[0].data = seriesData
      series[1].data = seriesData.map((item, index) => Object.assign(item, { label: { color: colorss[index] } }))
      this.myChart.setOption(option)
    }
  }
}
</script>

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

(0)

相关推荐

  • 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实现堆叠柱状图的具体代码,供大家参考,具体内容如下 echarts-子组件 <template> <div class="chart" ref="chartEle"></div> </template> <script> import echarts from "echarts"; import eventBus from '@/componen

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

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

  • vue+echart实现双柱状图

    本文实例为大家分享了vue+echart实现双柱状图的具体代码,供大家参考,具体内容如下 效果图: 一.安装 版本号建议安装"echarts": "^4.8.0",其它版本init会报错 1. 首先需要安装echarts依赖包 npm install --save echarts@4.8.0 2. 或者使用国内的淘宝镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org <templ

  • vue+echarts实现进度条式柱状图

    本文实例为大家分享了vue+echarts实现进度条式柱状图的具体代码,供大家参考,具体内容如下 效果图如下 代码: <template> <div class="content-page"> <div class="tab-content"> <div id="myChart1"></div> </div> </div> </template> &l

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

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

  • 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实现水平柱形图实例

    文件结构: 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 }

  • 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

  • 如何在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

随机推荐