v-charts柱状图使用

效果图

按需引入柱状图

import Vue from 'vue'
// 柱状图
import VeHistogram from 'v-charts/lib/histogram.common'
Vue.component(VeHistogram.name, VeHistogram)

使用柱状图

<template>
  <div class="contents">
    <div class="chartBox">
      <ve-histogram
        style="hieght:300px"
        :extend="chartExtend"
        :data="chartData"
        :settings="chartSettings"
        :tooltip="tooltip"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    this.chartSettings = {
      labelMap: {
        BankReceiveAmount: '计划对比',
        ActualAmout: '实际完成进度',
        InvoiceAmount: '已超期'
      },
      yAxisName: ['百分比']
    }
    this.chartExtend = {
      title: { text: '进度详情', left: 'center', style: 'fontSize:0.4rem' },
      // 图例设置  显示哪个颜色分别表示什么
      legend: {
        formatter: function(name) { // 用来格式化图例文本，支持字符串模板和回调函数两种形式。模板变量为图例名称 {name}
          console.log(name, '图例名称')
          if (name === '计划时间' || name === '实际时间') {
            return
          }
          return name
        },
        show: true,
        bottom: 'bottom'
      },
      // 设置  计划时间和实际时间为 白色 #FFFFFF
      color: ['#FFFFFF', '#FFFFFF', '#E4E4E4', '#00CC33', '#FF7350', '#FF3300'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow', // type:"cross"
          crossStyle: {
            color: '#999'
          }
        }
      },
      // 每个柱子
      series(v) {
        console.log('每个柱子', v)
        // 颜色
        const colors = ['#E4E4E4', '#00CC33', '#FF7350', '#FF3300', '#FFFFFF', '#FFFFFF']
        // 设置柱子的样式
        v.forEach(i => {
          console.log('每个柱子里面的数据', i)
          // i.barWidth = 20
          // i.itemStyle = {
          //   color: colors[v.indexOf(i)],
          //   borderWidth: 0
          // }
          if (i.name === '计划时间' || i.name === '实际时间') {
            i.barWidth = 0
          } else {
            i.barWidth = 15
            i.itemStyle = {
              color: colors[v.indexOf(i)],
              borderWidth: 0
            }
          }
          // i.label = {
          //   color: colors[i],
          //   show: false, // 每个柱子上的数据显示
          //   position: 'top'
          // }
        })
        return v
      }
    }
    // 提示框内容
    this.tooltip = {
      trigger: 'axis',
      position: function(point, params, dom, rect, size) {
        // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
        // 提示框位置
        var x = 0 // x坐标位置
        var y = 0 // y坐标位置
        // 当前鼠标位置
        var pointX = point[0]
        var pointY = point[1]
        // 外层div大小
        // var viewWidth = size.viewSize[0];
        // var viewHeight = size.viewSize[1];
        // 提示框大小
        var boxWidth = size.contentSize[0]
        var boxHeight = size.contentSize[1]
        // boxWidth > pointX 说明鼠标左边放不下提示框
        if (boxWidth > pointX) {
          x = 5
        } else { // 左边放的下
          x = pointX - boxWidth
        }
        // boxHeight > pointY 说明鼠标上边放不下提示框
        if (boxHeight > pointY) {
          y = 5
        } else { // 上边放得下
          y = pointY - boxHeight
        }
        return [x, y]
      },
      formatter: function(params, ticket, callback) {
        console.log(params, ticket, 'params数据')
        let htmlStr = ''
        for (let i = 0; i < params.length; i++) {
          const param = params[i]
          const xName = param.name// x轴的名称
          const seriesName = param.seriesName// 图例名称
          const value = param.value// y轴值
          const color = param.color// 图例颜色
          if (i === 0) {
            htmlStr += xName + '<br/>'// x轴的名称
          }
          htmlStr += '<div>'
          // 文本颜色设置--2020-07-23(需要设置,请解注释下面一行)
          // htmlStr += '<span style="color:'+color+'">';
          // 圆点后面显示的文本
          if (seriesName === '计划时间' || seriesName === '实际时间') {
            htmlStr += seriesName + '：' + value
          } else {
            // 为了保证和原来的效果一样，这里自己实现了一个点的效果
            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>'
            htmlStr += seriesName + '：' + value + '%'
          }
          // 文本颜色设置--2020-07-23(需要设置,请解注释下面一行)
          // htmlStr += '</span>';
          htmlStr += '</div>'
        }
        return htmlStr
      }
    }
    return {
      chartData: {
        columns: ['阶段', '计划对比', '实际完成进度', '已超期', '计划时间', '实际时间'],
        // 自己定义的假数据
        rows: [
          { '阶段': '设计', '计划对比': 53.9, '实际完成进度': 90.9, '已逾期': 10.0, '计划时间': '2020.9.16-2020.10.1', '实际时间': '2020.9.16-2020.10.1' },
          { '阶段': '实施', '计划对比': 35.3, '实际完成进度': 62.3, '已逾期': 80.0, '计划时间': '2020.9.16-2020.10.1', '实际时间': '2020.9.16-2020.10.1' },
          { '阶段': '装备', '计划对比': 29.2, '实际完成进度': 86.2, '已逾期': 10.2, '计划时间': '2020.9.16-2020.10.1', '实际时间': '2020.9.16-2020.10.1' },
          { '阶段': '调试', '计划对比': 87.2, '实际完成进度': 34.2, '已逾期': 20.4, '计划时间': '2020.9.16-2020.10.1', '实际时间': '2020.9.16-2020.10.1' }
        ]
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 获取后台返回的数据   对返回的天数进行计算
      vm.chartData.rows = vm.$route.query.data.map(item => {
        const index1 = item.actualStartDate.indexOf(' ')
        const index2 = item.actualFinishDate.indexOf(' ')
        item.actualStartDate = item.actualStartDate.substring(0, index1)
        item.actualFinishDate = item.actualFinishDate.substring(0, index2)
        const temp = {
          '阶段': item.processName,
          '计划对比': 100,
          '实际完成进度': null,
          '已逾期': null,
          '计划时间': item.expectedStartDate + '至' + item.expectedFinishDate,
          '实际时间': item.actualStartDate + '至' + item.actualFinishDate
        }
        // 计划天数
        const s1 = new Date(item.expectedStartDate.replace(/-/g, '/')) // 计划开始时间
        const f1 = new Date(item.expectedFinishDate.replace(/-/g, '/'))// 计划结束时间
        const time1 = f1.getTime() - s1.getTime() // 计划天数
        const day1 = parseInt(time1 / (1000 * 60 * 60 * 24))// 实际天数
        // 已完成
        if (item.status === 'FINISH') {
          // 实际天数
          const s2 = new Date(item.actualStartDate.replace(/-/g, '/'))
          const f2 = new Date(item.actualFinishDate.replace(/-/g, '/'))// 计划结束时间
          const time2 = f2.getTime() - s2.getTime()
          const day2 = parseInt(time2 / (1000 * 60 * 60 * 24))// 实际天数
          temp['实际完成进度'] = (day2 / day1).toFixed(4) * 100
          temp['已逾期'] = 0
        }
        // 未完成
        if (item.status === 'NOT_FINISH') {
          // 实际天数
          const s2 = new Date(item.actualStartDate.replace(/-/g, '/'))
          const f2 = new Date()// 当前日期：2017-04-24
          const time2 = f2.getTime() - s2.getTime()
          const day2 = parseInt(time2 / (1000 * 60 * 60 * 24))// 实际天数
          temp['实际完成进度'] = (day2 / day1).toFixed(4) * 100
          temp['已逾期'] = 0
        }
        return temp
      })
    })
  }
}
</script>
<style lang="less" scoped>
@import '@/styles/publicSty.less';
.contents{
  width: 100%;
  padding: 0.2rem;
    // 环形图样式
  .chartBox{
    width:100%;
    border: 1px solid #F2F2F2;
    border-radius: 0.2rem;
    margin-bottom: 0.2rem;
  }
}
</style>