jiaxing.liao
/
shalu-dashboard-ui


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