web/src/components/chart/BarLineChart.vue

<template>
  <ve-histogram
    :id="id"
    :height="options.height"
    :width="options.width ? options.width : null"
    :colors="options.colors"
    :data="datas"
    :settings="options.settings"
    :after-config="options.config"
    :after-set-option="extend"
    :extend="defaultOptions"
    >
  </ve-histogram>
</template>
<script>
import VeHistogram from 'v-charts/lib/histogram'
export default {
  name: 'chart',
  props: {
    id: String,
    datas: Object,
    options: {
      height: String,
      colors: Array || Object,
      settings: Object,
      config: Function
    }
  },
  components: {
    VeHistogram
  },
  data () {
    return {
      defaultOptions: {
        grid: {
          top: 20
        },
        xAxis: {
          axisLabel: {
            margin: 10,
            interval: 0, // 强制显示x轴所有刻度
            fontSize: 12
          },
          nameLocation: 'start',
          nameTextStyle: {
            fontSize: 12,
            align: 'left',
            padding: [70, 0, 0, 50],
            color: '#9B9CA3'
          }
        },
        yAxis (item) {
          item[0].splitLine = {
            lineStyle: {
              type: 'dashed',
              width: 0.5
            }
          }
          item[0].axisLabel = {
            margin: 2,
            fontSize: 12
          }
          item[1].splitLine = {
            show: false
          }
          item[1].axisLabel = {
            show: false,
            fontSize: 12
          }
          item[0].axisLabel.formatter = (value, index) => {
            return value.toString().replace(/,/, '')
          }
          item[1].axisLabel.formatter = (value, index) => {
            return value.toString().replace(/,/, '')
          }
          return item
        },
        tooltip: {
          trigger: 'axis',
          confine: true,
          backgroundColor: '#fff',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(42, 190, 209,0.1)'
            },
            z: 3
          },
          textStyle: {
            color: '#171826',
            fontSize: 12
          },
          padding: [7, 12],
          extraCssText: 'box-shadow: 0px 4px 16px rgba(8, 31, 38, 0.08);transform: translate3d(0,0,0)'
        },
        legend: {
          orient: 'horizontal',
          icon: 'circle',
          bottom: 0,
          align: 'left',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 20,
          textStyle: {
            fontSize: 12,
            rich: {
              a: {
                fontSize: 16,
                verticalAlign: 'top',
                align: 'center',
                padding: [0, 15, 28, 0]
              },
              b: {
                fontSize: 14,
                align: 'center',
                padding: [0, 15, 0, 0],
                lineHeight: 25
              }
            }
          },
          formatter: (name) => {
            if (name === '企业数量') {
              name = name + '(个)'
            }
            return name
          }
        }
      }
    }
  },
  methods: {
    extend (chart) {
      chart.setOption({
        series: [{
          type: 'bar',
          barMaxWidth: 20
        }, {
          type: 'line',
          smooth: false,
          symbol: 'none'
        }]
      })
    }
  },
  beforeDestroy () {}
}
</script>
<style lang="scss" scoped>
</style>