dongxin/src/components3/nengyuan/lineE.vue

<template>
    <el-row >
      <div
        id="index2"
        style="height:300px;margin-top:-50px;"
      ></div>
    </el-row>
  </template>
  <script>
import * as echarts from 'echarts';
  export default {
    props: ["resData"],
    data() {
      return {
        data:[]
      };
    },

    watch: {
      resData(val,old){
        this.data = val
        this.getData()
      }
    },
    methods: {
      getData() {
        let myChart = echarts.init(document.getElementById("index2"));
        let option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '0%',
              right: '0%',
              bottom: '15%',
              containLabel: true
            },
            legend: {
              itemHeight: 6,
              itemWidth: 20,
              bottom: '4%',
              textStyle:{  
                    color:"#E6EFFF", 
                }  
            },
            xAxis: [
              {
                type: 'category',
                data: this.data[0],
                axisTick: {
                  alignWithLabel: true
                },
                axisLabel: {
                  color: "#B9C4D8",
                },
                axisLine: {
                  lineStyle: {
                    color: "rgba(160,180,234,0.2)",
                  },
                },
              }
            ],
            yAxis: [
              {
                type: 'value',
                axisLabel: {
                  color: "#B9C4D8",
                },
                // axisLine: {
                //   lineStyle: {
                //     color: "#B9C4D8",
                //   },
                // },
              }
            ],
            series: [
              {
                name: "使用时长（小时）",
                type: 'bar',
                barWidth: '40%',
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{  
                      offset: 0,
                      color: '#B99259'
                    }, {
                      offset: 1,
                      color: '#E9CA7C'
                    }]),
                  }
                },
                data: this.data[1],
              },
              
            ]
          };
        myChart.setOption(option);
        option && myChart.setOption(option);
        setTimeout(function () {
          window.onresize = function () {
            myChart.resize();
          };
        }, 200);
      },
    },
  };
  </script>