usky-web-mobile/src/pages/business/common/projectMange/overview/components/echarts.vue

<template>
  <view style="height: 350upx;width:100%;">
    <l-echart ref="detailedChart"></l-echart>
  </view>
</template>

<script setup>
import * as echarts from "echarts";
import { onLoad, onShow, onHide, onLaunch, onResize } from "@dcloudio/uni-app";
import { defineComponent, ref, onMounted, nextTick,watch } from "vue";

const props = defineProps({
  xAxisDataList: {
    type: Object,
    default: null,
  },
  seriesDataList: {
    type: Object,
    default: null,
  },
});

let myChart;
const detailedChart = ref(null);

let option = {
  tooltip: {
    trigger: "axis",
  },
  legend: {
    show: false,
    // data: ["邮件营销"],
  },
  grid: {
    top: "20%",
    left: "3%",
    right: "8%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: true,
    axisLabel: {
      color: "rgba(0,0,0,0.4)",
      fontSize:props.xAxisDataList.length>10?8:10, //标签字体大小
      rotate: -30,  //文字过多时，倾斜角度
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(0,0,0,0.4)",
      },
    },
    axisTick: {
      show: false,
    },
    data: props.xAxisDataList,
  },
  yAxis: {
    type: "value",
    name: '工时(小时)',
    color: "rgba(0,0,0,0.4)",
    axisLabel: {
      color: "rgba(0,0,0,0.4)",
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(0,0,0,0.4)",
      },
    },
    splitLine: {
      lineStyle: {
        color: "rgba(0,0,0,0.1)",
      },
    },
  },
  series: [
    {
      name: "工时",
      type: "bar",
      stack: "总量",
      smooth: true,
      itemStyle: {
        color: "rgba(73, 185, 245, 1)",
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(73, 185, 245, 1)",
          },
          {
            offset: 1,
            color: "rgba(73, 185, 245, 0.4)",
          },
        ]),
      },
      data: props.seriesDataList,
    },
  ],
};
function initEcharts() {
  myChart = detailedChart.value;
  myChart.init(echarts, (myChart) => {
    myChart.setOption(option);
  });
}

onLoad(() => {
  nextTick(() => {
    initEcharts();
  });
});

onResize(() => {
  myChart.resize();
});
</script>