carwin_report/src/components/HomeChart/KCFX.vue

<template>
  <div class="kcfx" @click="kucunfenxi">
    <div class="godetail"><img src="../../assets/bargound/shuangjiantou.png" alt="">&nbsp;库存分析</div>
    <div id="kcfxchart"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import { kcfxchartInfo } from "../../servuces/prove";
export default {
  data () {
    return {
      kc_data: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    kcfxchart () {
      const kcfxchart = document.getElementById('kcfxchart')
      const myChartkcfx = echarts.init(kcfxchart)
      const kcfxoption = {
        legend: [{
          data: ['配件'],
          right: '25%',
          textStyle: {
            color: 'white' // 设置柱子1的图例文本颜色
          },
          itemStyle: {
            color: 'rgb(216,183,49)' // 设置柱子1的图例文本颜色
          }
        },
        {
          data: ['精品'],
          right: '6%',
          textStyle: {
            color: 'white' // 设置柱子2的图例文本颜色
          },
          itemStyle: {
            color: 'rgb(50,87,250)' // 设置柱子2的图例文本颜色
          }
        }
        ],
        tooltip: {
          backgroundColor: 'black',
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          top: '20%',
          left: '1%',
          right: '6%',
          bottom: '6%',
          containLabel: true
        },
        dataset: {
          source: this.kc_data
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: ' rgb(44,214,204)' // 设置x轴颜色为红色
            }
          },
          axisLabel: {
            color: 'white' // 设置x轴标签字体颜色为黑色
          },
        },
        yAxis: {
          show: true,
          splitLine: {
            //去除网格线
            lineStyle: {
              type: 'dashed',
              color: 'rgb(116, 116, 116,0.2)'
            },
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: ' rgb(44,214,204)' // 设置x轴颜色为红色
            }
          },
          axisLabel: {
            color: 'white' // 设置x轴标签字体颜色为黑色
          },
          axisTick: {
            //坐标刻度
            show: true
          },
          // boundaryGap: [0, '10%']
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            name: '配件', type: 'bar', barWidth: 20, barGap: '60%', itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, // 渐变方向从左上到右下
                  [
                    { offset: 1, color: '#00000000' }, // 渐变起始颜色
                    { offset: 0, color: 'rgb(216,183,49)' }  // 渐变结束颜色
                  ]
                )
              }
            },
          },
          {
            name: '精品', type: 'bar', barWidth: 20, barGap: '60%', itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, // 渐变方向从左上到右下
                  [
                    { offset: 1, color: '#00000000' }, // 渐变起始颜色
                    { offset: 0, color: 'rgb(50,87,250)' }  // 渐变结束颜色
                  ]
                )
              }
            },
          }]
      }
      kcfxoption && myChartkcfx.setOption(kcfxoption)
      window.addEventListener('resize', function () {
        myChartkcfx.resize();
      })
    },
    getData () {
      kcfxchartInfo().then(res => {
        this.kc_data = res.data;
        this.kcfxchart();
      })
    },
    kucunfenxi(){
      this.$router.push('/kucunfenxidetail')
      
    }
  }
}
</script>
<style scoped lang="scss">
.kcfx {
  width: 100%;
  height: 100%;
  position: relative;

  .godetail {
    position: absolute;
    top: 0;
  }

  #kcfxchart {
    width: 100%;
    height: 100%;

  }
}
</style>