<template>
  <div class="bdlite-chart-root">
    <h1>demo 图表</h1>
    <div class="bdlite-chart-wrapper">
      <bdlite-chart
        :chart-config="tableConfig"
        :data-result="tableData"
      ></bdlite-chart>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from "@vue/composition-api";
import groupLine from "../mock/groupLine";
import tableData2 from "../mock/table";
// import "./test";
export default defineComponent({
  setup() {
    const tableConfig = ref(
      JSON.stringify({
        chartType: "shufflTable",
        iconConfig: {
          options: {
            style: {
              showSeriesNumber: true,
              dataCell: {
                text: {
                  textAlign: "left",
                },
              },
            },
          },
        },
      })
    );
    const echartConfig = ref(
      JSON.stringify({
        chartType: "groupLine",
      })
    );
    const echartData = ref(JSON.stringify(groupLine.value));
    const tableData = ref(JSON.stringify(tableData2));
    const handleChange = () => {};
    setTimeout(() => {
      tableConfig.value = echartConfig.value
      tableData.value = echartData.value
    }, 5000)
    return {
      tableData,
      echartData,
      tableConfig,
      echartConfig,
      handleChange,
    };
  },
});
</script>
<style>
.bdlite-chart-wrapper {
  width: 100%;
  height: 500px;
  background: gray;
}
.bdlite-chart-root {
  width: 100vw;
  height: 100vh;
}
</style>
