<!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>