<!DOCTYPE html><meta charset="utf-8" /><title>shaluDashBoardUi demo</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script src="./shaluDashBoardUi.umd.js"></script> <link rel="stylesheet" href="./shaluDashBoardUi.css" /> <body> <div id="app"> <fm-dashboard-basic-bar :width="400" :height="300" :dataSource="dataSource" v-bind="other" /> </div> <script> Vue.createApp({ data() { return { message: "hello", dataSource: { sourceType: 0, data: { xData: ["轴标签A", "轴标签B", "轴标签C", "轴标签D"], series: [ { type: "bar", name: "系列1", data: [89.3, 92.1, 94.4, 85.4], }, { type: "bar", name: "系列2", data: [95.8, 89.4, 91.2, 76.9], }, ], }, }, other: { title: { left: "center", top: 8, textStyle: { color: "#fff", fontSize: 16, }, }, // 图例 legend: { textStyle: { color: "#fff", }, top: 32, }, // 布局 grid: { bottom: 34, right: 20, top: 60, }, // 提示框 tooltip: {}, // x轴 xAxis: { type: "category", axisLabel: { color: "#9fadbf", }, }, // y轴 yAxis: { axisLabel: { color: "#9fadbf", }, splitLine: { lineStyle: { type: "dashed", color: "#36485f", }, }, }, }, }; }, }) .use(shaluDashBoardUi) .mount("#app"); </script> </body>