web/src/components/chart/ColumnBarChart.vue

<template>
  <ve-histogram
    :height="options.height"
    :colors="options.colors"
    :data="datas"
    :mark-point="barChartMarkPoint"
    :settings="options.settings"
    :after-config="options.config"
    :extend="defaultOptions"
    @ready="options.onReady"
    >
  </ve-histogram>
</template>
<script>
import { VeHistogram } from 'v-charts'
export default {
  name: 'chart',
  props: {
    datas: Object,
    options: {
      height: String,
      colors: Array || Object,
      settings: Object,
      config: Function,
      onReady: Function
    }
  },
  components: {
    VeHistogram
  },
  data () {
    return {
      barChartMarkPoint: {
        symbol: 'circle',
        symbolOffset: [0, 0],
        itemStyle: {
          borderColor: '#fff',
          color: '#FB483D'
        },
        symbolSize: 8,
        label: {
          show: true,
          position: 'bottom',
          fontSize: 12,
          padding: [-6, 0],
          offset: [0, 7],
          formatter: (val) => {
            return val.value + '天'
          }
        }
      },
      defaultOptions: {
        color: ['#05A6F3'],
        grid: {
          left: 12,
          right: 12,
          top: 10
        },
        yAxis: {
          axisLabel: {
            fontSize: 12,
            margin: 4
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              width: 0.5
            }
          },
          nameGap: 20,
          nameTextStyle: {
            fontSize: 12,
            align: 'left',
            padding: [0, 0, 0, -20]
          }
        },
        xAxis: {
          min: 0,
          axisLabel: {
            showMinLabel: true,
            showMaxLabel: true,
            margin: 16,
            textStyle: {
              color: '#626262',
              fontSize: 12
            },
            formatter: (val, index) => {
              if (val.indexOf('天') > -1) {
                val = val.replace('天', '').split('-')[1]
              }
              return val
            }
          },
          axisTick: {
            interval: 0
          },
          nameGap: 20,
          nameLocation: 'end',
          nameTextStyle: {
            fontSize: 10,
            align: 'right',
            padding: [80, 20, 0, 0],
            color: '#9B9CA3'
          }
        },
        series: [
          {
            type: 'bar',
            name: '类似项目标书编制周期',
            barWidth: 10,
            barMaxWidth: 10,
            itemStyle: {
              color: '#05A6F3'
            }
          }
        ],
        graphic: [
          {
            type: 'group',
            bottom: 10,
            left: 32,
            children: [{
              type: 'circle',
              z: 100,
              top: 'middle',
              style: {
                fill: '#FB483D'
              },
              shape: {
                cx: 0,
                cy: 0,
                r: 4
              }
            },
            {
              type: 'text',
              z: 100,
              top: 'middle',
              style: {
                fill: '#333',
                text: '当前项目标书编制周期',
                font: '12px Microsoft YaHei',
                x: 8
              }
            }
            ]
          },
          {
            type: 'group',
            bottom: 10,
            right: 20,
            children: [{
              type: 'circle',
              z: 100,
              top: 'middle',
              style: {
                fill: '#3399FF'
              },
              shape: {
                cx: 0,
                cy: 0,
                r: 4
              }
            },
            {
              type: 'text',
              z: 100,
              top: 'middle',
              style: {
                fill: '#333',
                text: '类似项目标书编制周期',
                font: '12px Microsoft YaHei',
                x: 8
              }
            }
            ]
          }
        ],
        legend: {
          show: false
        },
        tooltip: {
          backgroundColor: '#fff',
          confine: true,
          textStyle: {
            color: '#171826',
            fontSize: 12
          },
          padding: [7, 12],
          extraCssText: 'box-shadow: 0px 4px 16px rgba(8, 31, 38, 0.08)',
          borderWidth: 2,
          borderColor: '#F5F6F7',
          formatter: (params) => {
            let tip = ''
            for (var i = 0; i < params.length; i++) {
              params[i].value === undefined ? params[i].value = 0 : params[i].value // eslint-disable-line
              if (params[i].seriesName === '项目数量') {
                tip = tip + '编制周期：' + params[i].name + '<br/>' + params[i].seriesName + '：' + params[i].value + '个' + '<br/>'
              }
            }
            return tip
          }
        }
      }
    }
  },
  computed: {},
  watch: {},
  mounted () {},
  methods: {},
  beforeDestroy () {}
}
</script>
<style lang="scss" scoped>
</style>