使用vue3.5.13 和@opentiny/huicharts1.3.1构建折线图时报错

[zhangsandegea]

代码

<template>
  <div class="charts-demo">
    <div class="chart" ref="lineChart"></div>
  </div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'Charts' })
import { useLine } from './hooks/useLine'
const { lineChart, chartIns, getChartIns } = useLine()
</script>

<style lang="scss" scoped>
.charts-demo {
  width: 100%;
  height: 100%;
  .chart {
    width: 50%;
    height: 300px;
  }
}
</style>

import HuiCharts from '@opentiny/huicharts'
import type { ECharts } from 'echarts'


import { ref, onMounted } from 'vue'
const chartOption = {
  theme: 'hdesign-light',
  padding: [50, 30, 50, 20],
  legend: {
    show: true,
    icon: 'line'
  },
  data: [
    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
  ],
  xAxis: {
    data: 'Month',
  },
  yAxis: {
    name: 'Percentage(%)'
  }
}

export const useLine = () => {
  const lineChart = ref<HTMLDivElement | null>(null)
  const chartIns = ref<HuiCharts | null>(null)


  const initLineChart = () => {
    if (!lineChart.value) return

    chartIns.value = new HuiCharts()
    chartIns.value.init(lineChart.value)
    const chartType = 'LineChart'
    chartIns.value.setSimpleOption(chartType, chartOption)
    chartIns.value.render()
  }

  onMounted(() => {
    initLineChart()
  })

  return { lineChart, chartIns }
}

[zhangsandegea]

[zhangsandegea]

import HuiCharts from '@opentiny/huicharts'
import { ChartUtil } from './ChartUtil'

export const useLine = () => {
  const dom = ref<HTMLDivElement | null>(null)
  const chartIns = shallowRef<HuiCharts | null>(null)

  const initLineChart = (option) => {
    if (!dom.value) return
    chartIns.value = new HuiCharts()
    chartIns.value.init(dom.value)
    chartIns.value.setSimpleOption('LineChart', option)
    chartIns.value.render()
  }

  onMounted(() => {
    initLineChart()
  })
  const changeData = (data) => {
    chartIns.value?.refreshData(data)
  }
  return { dom, chartUtil, initLineChart, changeData }
}

这是目前我的解决方案