hyyfClient/src/views/PdcData/analysis/CostHistogram.vue

<!--
 * @Author: your name
 * @Date: 2021-10-12 09:10:42
 * @LastEditTime: 2021-10-22 15:49:54
 * @LastEditors: Please set LastEditors
 * @Description: 成本分析的柱状图
 * @FilePath: \hyyfClient\src\views\PdcData\analysis\CostHistogram.vue
-->
<template>
  <div class="cost-histogram">
    <div id="costHistogram"></div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  methods: {
    init() {
      let options = {
        // title: {
        //   text: '存栏变动',
        //   x: 10,
        //   y: 0
        // },
        tooltip: {
          trigger: 'axis',
        },
        // legend: {
        //   data: ['头']
        // },
        color: ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            name: '元',
            boundaryGap: [0, 0.01],
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#6e7079',
              }
            },
            axisTick:{
              show: false
            },
          }
        ],
        yAxis: //[
          {
            type: 'category',
            inverse: true
            // axisLabel: {
            //   // formatter: '{value} °C'
            //   show: true
            // },
            // axisLine: {
            //   show: true,
            //   lineStyle: {
            //     color: '#6e7079',
            //   }
            // },
            // axisTick:{
            //   show:false
            // },
            // splitLine:{
            //   show:false
            // }
          },
          // {
          //   type: 'value',
          //   name: '湿度',
          //   axisLabel: {
          //     formatter: '{value} RH'
          //   },
          //   axisLine: {
          //     show: false,
          //     lineStyle: {
          //       color: '#6e7079',
          //     }
          //   },
          //   axisTick:{
          //     show:false
          //   },
          //   // splitLine:{
          //   //   show:false
          //   // }
          // }
        //],
        // dataset: [
        //   {
        //     dimensions: ['num'],
        //     source: [
        //       [32541],
        //       [82467],
        //       [54363],
        //       [64642], 
        //       [40257], 
        //       [95422]
        //     ]
        //   },
        //   {
        //     transeform: {
        //       type: 'sort',
        //       config: {
        //         dimension: 'num',
        //         order: 'desc'
        //       }
        //     }
        //   }
        // ],
        series: [
          {
            // name: '头',
            type: 'bar',
            data: this.data,
            itemStyle: {
              normal: {
                color: function (colors) { // 颜色设置
                  var colorList = ['rgb(112,182,3)', 'rgb(232,56,92)', 'rgb(123,0,255)', 'rgb(0,215,233)', 'rgb(255,255,160)', 'rgb(0,0,255)']
                  return colorList[colors.dataIndex]
                },
                label: {
                  show: true,
                  position: 'right'
                }
              },
              textStyle: {
                show: true
              },
            }
          }
        ]
      }
      this.myChart.setOption(options);
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('costHistogram'));
    // this.init();
  },
  watch: {
    data(value) {
      console.log('成本分析柱状图数据', value)
      this.init()
    }
  }
}
</script>
<style scoped>
.cost-histogram {
  display: inline-block;
  width: 90%;
  height: 300px;
}
#costHistogram {
  width: 100%;
  height: 100%;
}
</style>