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,
      nameList: [],
      series: [{
        type: 'bar',
        data: [],
        barWidth: 6

      }]
    }
  },
  mounted() {
    console.log('mounted')
    console.log('borderRadius: ', this.borderRadius)
    // console.log('33333', this.dataList)
    // let arr = []
    // this.dataList.forEach(ele => {
      // console.log(ele);
    // this.series = []
    this.initChart()
    // this.$nextTick(() => {
    //   // this.initChart()
    // })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart(nameList,dataList) {
      // console.log(1)
      this.chart = echarts.init(document.getElementById(this.id))
      if (dataList.length !== 0) {
        // this.$set(this.series, "data", dataList);
        this.series = [{
          type: 'bar',
          data: dataList,
          barWidth: 6
        }]
      }
      if (nameList.length !== 0) {
        this.nameList = nameList
      }
      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: {
            show: true,    // 是否显示 y 轴
            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>