ggfwjsc/src/view/echarts_work/eP4.vue

<template>
  <div ref="chart" style="width: 100%; height: 360px"></div>
</template>

<script setup>
import {
  onBeforeMount,
  onMounted,
  ref,
  reactive,
  defineProps,
  watch,
  nextTick,
} from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts";

const props = defineProps({
  list: {
    type: Array,
    default: () => {
      return [];
    },
  },
  // list2: {
  //   type: Array,
  //   default: () => {
  //     return [];
  //   },
  // },
  year: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const chart = ref(); // 创建DOM引用

const data = reactive({
  list: {},
  list1: [],
  list2: [],
  year: [],
  option: {},
  initialLegendData: ["生活补贴人数", "生活补贴金额"],
});

const getOption = () => {
  data.option = {
    tooltip: {
      trigger: "axis",
      formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
    },
    legend: {
      show: true,
      data: data.initialLegendData,
      top: "3%",
      textStyle: {
        fontSize: 14,
        color: "#ffffff", //上文字标题颜色
      },
    },
    grid: {
      left: "6%",
      right: "9%",
      bottom: "5%",
      containLabel: true,
      color: "#ffffff",
      fontSize: 14,
    },
    calculable: true,

    xAxis: [
      {
        type: "category",

        axisLabel: {
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: "#ffffff",
            fontSize: 14,
          },
        },
        axisTick: {
          show: false, // 设置轴刻度不显示
        },
        // data: ["2019", "2020", "2021", "2022", "2023"],
        data: data.list.year,
      },
      {
        type: "category",
        show: false,
        data: data.list.year,
      },
    ],
    yAxis: [
      {
        type: "value",
        scale: true,
        name: "补贴人数",
        min: 0,
        splitLine: {
          //分割线配置
          show: false,
          lineStyle: {
            color: "#ffffff",
            fontSize: 14,
            width: 1,
          },
        },
        axisLabel: {
          //y轴文字的配置
          textStyle: {
            fontSize: 14,
            color: "#ffffff",
          },
        },
        axisLine: {
          //y轴线的颜色以及宽度
          show: false,
          lineStyle: {
            color: "#ffffff",
            fontSize: 14,
            width: 1,
            type: "solid",
          },
        },
      },
      {
        type: "value",
        scale: true,
        min: 0,

        name: "补贴金额/万",
        splitLine: {
          show: false,
          lineStyle: {
            color: "rgba(226, 226, 226, 0.3)",
            width: 1,
          },
        },
        axisLabel: {
          //y轴文字的配置
          textStyle: {
            color: "#ffffff",
            fontSize: 14,
          },
        },
        axisLine: {
          //y轴线的颜色以及宽度
          show: false,
          lineStyle: {
            color: "#ffffff",
            fontSize: 14,
            width: 1,
            type: "solid",
          },
        },
      },
      {
        type: "value",
        min: 0,
        max: 100,
        splitLine: {
          show: false,
          lineStyle: {
            type: "solid",
            color: "rgb(221, 242, 255,0.1)",
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            type: "dotted",
          },
        },
        axisLabel: {
          show: false,
          fontSize: 14,
          fontFamily: "MicrosoftYaHei",
          color: "#ffffff",
          lineHeight: 19,
        },
      },
    ],
    series: [
      {
        yAxisIndex: 1,
        name: "生活补贴金额",
        data: data.list2,
        type: "line", //线状图
        stack: "Total",
        symbol: "emptyCircle",
        symbolSize: 10,
        label: {
          show: true,
          position: "top",
          color: "#ffffff",
          formatter: function (data) {
            return data.value;
          },
        },
        itemStyle: {
          borderColor: "#00FCFF",
          borderWidth: 1,
          color: "#2468FF",
        },
      },
      {
        z: 1,
        yAxisIndex: 0,
        name: "生活补贴人数",
        data: data.list1,
        barWidth: 20,
        type: "bar",
        label: {
          show: true,
          // position: "insideTop",
          color: "#ffffff",
          formatter: function (data) {
            return data.value;
          },
        },
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            x2: 1,
            y: 0,
            y2: 0,
            colorStops: [
              { offset: 0, color: "rgba(23, 237, 255, .7)" },
              { offset: 0.5, color: "rgba(23, 237, 255, .7)" },
              { offset: 0.5, color: "rgba(23, 237, 255, .3)" },
              { offset: 1, color: "rgba(23, 237, 255, .5)" },
            ],
          },
        },
      },
      {
        type: "bar",
        xAxisIndex: 1,
        yAxisIndex: 2,
        emphasis: {
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              x2: 0,
              y: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(64, 247, 176, 0.25)",
                },
                {
                  offset: 1,
                  color: "rgba(17, 34, 64, 0.25)",
                },
              ],
            },
          },
        },
        itemStyle: {
          color: "rgba(221, 242, 255, 0.1)",
        },
        data: data.list.year.map(() => 100),
        barWidth: 50,
      },
      {
        z: 1,
        type: "pictorialBar",
        symbolPosition: "end",
        data: data.list1,
        symbol: "diamond",
        symbolOffset: ["0%", "-50%"],
        symbolSize: [21, 15],

        itemStyle: {
          borderColor: "#2fffa4",
          color: "rgba(23, 237, 255, 1)",
        },
      },
    ],
  };
};

const setChart = () => {
  var myChart = echarts.init(chart.value);
  myChart.setOption(data.option);
};

const setChart1 = () => {
  data.list1 = [];
  data.list2 = [];
  data.list.data.forEach((item) => {
    data.list1.push(item.jzrs); //补贴人数
    data.list2.push(item.jzje); //补贴金额
  });
  // console.log("补贴人2", data.list1, data.list2);
};
watch(
  () => props.list,
  (newVal, oldVal) => {
    data.list = newVal;
    setChart1();
    getOption();
    setChart();
  }
);

// 使用生命钩子
onBeforeMount(() => {
  setTimeout(() => {
    data.list = props.list;
    if (Object.keys(data.list).length !== 0) {
      setChart1();
      // console.log(data.list, data.list1, data.list2, "教育");
      getOption();
      setChart();
    };
  }, 600);
});
</script>

<style scoped></style>