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>