Vue3 ECharts看板

获取 ECharts - 入门篇 - 使用手册 - Apache ECharts

npm install echarts 

<template>
  <div id="main" style="height:400px;"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { inventoryApi } from "@/api/index";

onMounted(() => {
  inventoryApi.select.call().then((data: any) => {
    initCharts(data);
  });
});

const initCharts = (data: any) => {
  let option = {
    title: {
      text: "库存量展示图",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    toolbox: {
      show: true,
      feature: {
        dataZoom: {
          yAxisIndex: "none",
        },
        dataView: { readOnly: false },
        magicType: { type: ["line", "bar"] },
        restore: {},
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      data: data.map((obj: any) => obj.productName),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "inventory",
        data: data.map((obj: any) => obj.qty),
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value + " 中国";
          },
        },
      },
    ],
  };

  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("main"));
  // 绘制图表
  myChart.setOption(option);

  window.onresize = function () {
    myChart.resize();
  };
};
</script>