yudao-dev/src/views/OperationalOverview/components/threeBarChart.vue

<template>
  <div>
    <div :id="id" :class="className" :style="{ height: height + 'px', width:width}" />
  </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'

export default {
  name: 'OverviewBar',
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'threeBarChart'
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    beilv: {
      type: Number,
      default: 1
    },
    height: {
      type: Number,
      default: 200
    },
    showLegend: {
      type: Boolean,
      default: false
    },
    nameList: {
      type: Array,
      default: () => []
    },
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null,
      series: []
    }
  },
  mounted() {
    if (this.dataList.length > 1) {
      this.series = [
        { // 柱体
          name: this.dataList[0].name,
          type: 'bar',
          barWidth: 30,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: this.dataList[0].topColor },
              { offset: 1, color: this.dataList[0].bottomColor }
            ])
          },
          data: this.dataList[0].data
        },
        { // 柱顶
          name: this.dataList[0].name,
          type: 'pictorialBar',
          barWidth: 20,
          symbol: 'diamond',
          symbolPosition: 'end',
          symbolOffset: [0, '-50%'],
          symbolSize: [30, 12],
          zlevel: 2,
          itemStyle: { color: this.dataList[0].topColor },
          data: this.dataList[0].data
        },
        { // 柱底
          name: this.dataList[0].name,
          type: 'pictorialBar',
          barWidth: 20,
          symbol: 'diamond',
          symbolOffset: [0, '50%'],
          symbolSize: [30, 15],
          itemStyle: { color: this.dataList[0].bottomColor },
          data: this.dataList[0].data
        },
        { // 柱体
          name: this.dataList[1].name,
          type: 'bar',
          barWidth: 30,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: this.dataList[1].topColor },
              { offset: 1, color: this.dataList[1].bottomColor }
            ])
          },
          data: this.dataList[1].data
        },
        { // 柱顶
          name: this.dataList[1].name,
          type: 'pictorialBar',
          barWidth: 20,
          symbol: 'diamond',
          symbolPosition: 'end',
          symbolOffset: [0, '-50%'],
          symbolSize: [30, 12],
          zlevel: 2,
          itemStyle: { color: this.dataList[1].topColor },
          data: this.dataList[1].data
        },
        { // 柱底
          name: this.dataList[1].name,
          type: 'pictorialBar',
          barWidth: 20,
          symbol: 'diamond',
          symbolOffset: [0, '50%'],
          symbolSize: [30, 15],
          itemStyle: { color: this.dataList[1].topColor },
          data: this.dataList[1].data
        }
      ]
    } else {
      this.series = [
        { // 柱体
          name: this.dataList[0].name,
          type: 'bar',
          barWidth: 12,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: this.dataList[0].topColor },
              { offset: 1, color: this.dataList[0].bottomColor }
            ])
          },
          data: this.dataList[0].data
        },
        { // 柱顶
          name: this.dataList[0].name,
          type: 'pictorialBar',
          barWidth: 12,
          symbol: 'diamond',
          symbolPosition: 'end',
          symbolOffset: [0, '-50%'],
          symbolSize: [12, 6],
          zlevel: 2,
          itemStyle: { color: this.dataList[0].topColor },
          data: this.dataList[0].data
        },
        { // 柱底
          name: this.dataList[0].name,
          type: 'pictorialBar',
          barWidth: 12,
          symbol: 'diamond',
          symbolOffset: [0, '50%'],
          symbolSize: [12, 6],
          itemStyle: { color: this.dataList[0].bottomColor },
          data: this.dataList[0].data
        }
      ]
    }
    this.$nextTick(() => {
      console.log(this.series)
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 10,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#213259', // 左边线的颜色
              width: '1'// 坐标线的宽度
            }
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
            }
          },
          data: this.nameList
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#213259', // 左边线的颜色
              width: '1'// 坐标线的宽度
            }
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色

            }
          },
          splitLine: {
            lineStyle: {
              color: '#213259'
            }
          },
          type: 'value'
        },
        series: this.series
      })
    }
  }
}
</script>