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

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

<script>
import * as 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: 'linearBarChart'
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    borderRadius: {
      type: Array,
      default: () => [9, 9, 0, 0]
    },
    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() {
    console.log('mounted')
    console.log('borderRadius: ', this.borderRadius)

    this.series = [
      {
        name: this.dataList[0].name,
        type: 'bar',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: this.dataList[0].topColor },
            { offset: 1, color: this.dataList[0].bottomColor }
          ]),
          barBorderRadius: this.borderRadius
        },
        data: this.dataList[0].data,
        barWidth: 6
      },
      {
        name: this.dataList[1].name,
        type: 'bar',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: this.dataList[1].topColor },
            { offset: 1, color: this.dataList[1].bottomColor }
          ]),
          barBorderRadius: this.borderRadius
        },
        data: this.dataList[1].data,
        barWidth: 6
      },
      {
        name: this.dataList[2].name,
        type: 'bar',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: this.dataList[2].topColor },
            { offset: 1, color: this.dataList[2].bottomColor }
          ]),
          // borderRadius: [5, 5, 0, 0]
          barBorderRadius: this.borderRadius
        },
        data: this.dataList[2].data,
        barWidth: 6
      },
      {
        name: this.dataList[3].name,
        type: 'bar',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: this.dataList[3].topColor },
            { offset: 1, color: this.dataList[3].bottomColor }
          ]),
          // borderRadius: [5, 5, 0, 0]
          barBorderRadius: this.borderRadius
        },
        data: this.dataList[3].data,
        barWidth: 6
      },
      {
        name: this.dataList[4].name,
        type: 'bar',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: this.dataList[4].topColor },
            { offset: 1, color: this.dataList[4].bottomColor }
          ]),
          // borderRadius: [5, 5, 0, 0]
          barBorderRadius: this.borderRadius
        },
        data: this.dataList[4].data,
        barWidth: 6
      },
      {
        name: this.dataList[5].name,
        type: 'bar',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: this.dataList[5].topColor },
            { offset: 1, color: this.dataList[5].bottomColor }
          ]),
          // borderRadius: [5, 5, 0, 0]
          barBorderRadius: this.borderRadius
        },
        data: this.dataList[5].data,
        barWidth: 6
      }
    ]

    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      console.log(1)
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 30,
          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)' // 坐标值得具体的颜色
            }
          },
          splitLine: {
            lineStyle: {
              color: '#213259'
            }
          },
          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'
        },
        legend: {
          itemHeight: 10,
          itemWidth: 10,
          x: 'center', // 可设定图例在左、右、居中
          y: 'top', // 可设定图例在上、下、居中
          show: this.showLegend,
          data: this.dataList,
          right: '1%',
          textStyle: {
            fontSize: 12 * this.beilv,
            color: '#ced1d5'
          }
        },
        series: this.series
      })
    }
  }
}
</script>