echarts绑定真实数据

vue3：

饼图：

 function typeEventEchart(eventTypeX, eventTypeY) {
  const typeEventIntance = echarts.init(typeEvent.value, "macarons");
  typeEventIntance.setOption({
    color: ["#3aa1ff"],
    tooltip: {
      trigger: "axis",
    },

grid: {
  top: 20,
  left: 20,
  right: 40,
  bottom: 40,
  containLabel: true,
},
xAxis: [
  {
    type: "value",
    splitLine: {
      lineStyle: {
        type: "dashed",
        color: "#f7f7f7",
      },
    },
  },
],

yAxis: [
  {
    type: "category",
    data: eventTypeX,
    axisTick: {
      show: false,
    },
  },
],
series: [
  {
    name: "高危",
    type: "bar",
    barWidth: "40%",
    label: {
      show: true,
      position: "right",
      // valueAnimation: true,
    },
    data: eventTypeY,
  },
],

});

   function companyAssetEchart(xAxisData,heightList,middleList,lowList) {
  console.log(xAxisData,heightList,middleList,lowList);
  const companyAssetIntance = echarts.init(companyAsset.value, "macarons");
  companyAssetIntance.setOption({
    tooltip: {
      trigger: "axis",
    },
    legend: {
      right: 20,
      data: ["高危", "中危", "低危"],
    },
    grid: {
      top: 30,
      left: 20,
      right: 20,
      bottom: 20,
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        // prettier-ignore
        data: xAxisData,
        axisLabel: { interval: 0, rotate: 30 },
        inverse: true,
      },
    ],

yAxis: [
  {
    type: "value",
    splitLine: {
      lineStyle: {
        type: "dashed",
        color: "#f7f7f7",
      },
    },
  },
],
series: [
  {
    name: "高危",
    type: "bar",
    barWidth: "20%",
    data: heightList,
  },
  {
    name: "中危",
    type: "bar",
    barWidth: "20%",
    data: middleList,
  },
  {
    name: "低危",
    type: "bar",
    barWidth: "20%",
    data: lowList,
  },
],

}); }

折线图

图表显示的地方

            function trendEventEchart() {
              const trendEventIntance = echarts.init(trendEvent.value, "macarons");
              trendEventIntance.setOption({
                tooltip: {
                  trigger: "axis",
                },
                legend: {
                  data: ["低危", "中危", "高危"],
                },
                grid: {
                  top: "10%",
                  left: "3%",
                  right: "4%",
                  bottom: "15%",
                  containLabel: true,
                },
                toolbox: {},
                xAxis: {
                  type: "category",
                  boundaryGap: false,
                  data: eventTrend.value.map((item) => item.date),
                },
                yAxis: {
                  type: "value",
                },
                series: [
                  {
                    name: "低危",
                    type: "line",
                    stack: "Total",
                    data: eventTrend.value.map((item) => item.lowDanger),
                  },
                  {
                    name: "中危",
                    type: "line",
                    stack: "Total",
                    data: eventTrend.value.map((item) => item.mediumDanger),
                  },
                  {
                    name: "高危",
                    type: "line",
                    stack: "Total",
                    data: eventTrend.value.map((item) => item.highDanger),
                  },
                ],