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

<template>
  <div>
    <div :id="id" :class="className" :style="{ height: '420px', 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: 'enChart'
    },
    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('1111', dataList);
      // console.log(1)
      this.chart = echarts.init(document.getElementById(this.id))
      if (!nameList && !dataList) {
        // 隐藏echarts图表
        this.chart.clear(); // 清空图表
        this.chart.setOption({ // 设置空的option
          title: {
            show: false
          },
          series: []
        });
      } else {
        // 显示echarts图表
        this.series = [{
          type: 'bar',
          data: dataList,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#9DD5FF' },
                { offset: 0.3, color: '#1295FF' }
              ]),
              label: {
                show: true,		//开启显示
                position: 'top',	//在上方显示
                textStyle: {	    //数值样式
                  color: '#ced1d5',
                  fontSize: 12
                }
              },
            }
            // barBorderRadius: this.borderRadius
          },
          barWidth: 18,
        }]
        // }
        // if (nameList.length !== 0) {
        this.nameList = nameList
        // }
        this.chart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: { top: 90, right: 60, bottom: 20, left: 30, containLabel: true },
          // legend: {
          //   itemWidth: 10,
          //   itemHeight: 10,
          //   // right: '20px',
          //   data: nameList,
          //   textStyle: {
          //     fontSize: 12 * this.beilv,
          //     color: '#ced1d5'
          //   }
          // },
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#25528f', // 左边线的颜色
                width: '1' // 坐标线的宽度
              }
            },
            axisLabel: {
              color: "#fff",
              fontSize: 12,
              // formatter: '{value}'
            },
            splitLine: {
              lineStyle: {
                color: '#25528f'
              }
            },
            data: this.nameList
          },
          yAxis: {
            name: '单位kwh',
            nameTextStyle: {
              color: '#fff',
              fontSize: 10,
              align: 'right',
            },
            type: 'value',
            axisLabel: {
              color: "#fff",
              fontSize: 12,
              // formatter: '{value}/kwh'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#25528f",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#25528f",
              },
            }
          },
          // 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
        })
      }
      // if (dataList.length !== 0) {
        // this.$set(this.series, "data", dataList);

    }
  }
}
</script>
<style>
.enChart {
  position: absolute;
  height: 100%;
  width: 100%;
  top: -30px;
}
</style>