[apache/echarts]vue3使用echarts5，折线图、柱状图使用datazoom报错

Version

5.1.1

Steps to reproduce

vue3环境下创建组件如下：

<template>
  <div class="chart" :id="chartId"></div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue'
import * as echarts from 'echarts'

export default defineComponent({
  name: 'pieChart',
  props: {
    chartData: {
      type: Array
    }
  },
  setup(props) {
    const chartId = `barChart${Math.random()}`
    const chart = ref<any>()
    const chartDatas = reactive({
      // dataList: props.chartData
      dataList: [
        { title: 'Matcha Latte', count1: 43.3, '2016': 85.8, '2017': 93.7 },
        { title: 'Milk Tea', count1: 83.1, '2016': 73.4, '2017': 55.1 },
        { title: 'Cheese Cocoa', count1: 86.4, '2016': 65.2, '2017': 82.5 },
        { title: 'Walnut Brownie', count1: 72.4, '2016': 53.9, '2017': 39.1 }
      ]
    })
    console.log(props)
    onMounted(() => {
      // console.log(echarts)
      chart.value = echarts.init(document.getElementById(chartId) as HTMLDivElement)
      chart.value.setOption({
        legend: {
          orient: 'vertical',
          left: '75%',
          top: '30%'
        },
        xAxis: {
          type: 'category',
          axisTick: { alignWithLabel: true }
        },
        yAxis: {
          type: 'value'
        },
        dataZoom: [
          {
            type: 'slider',
            start: 50,
            end: 100,
            realtime: true,
            height: 7
          }
        ],
        dataset: { source: chartDatas.dataList },
        series: [
          {
            name: '',
            type: 'bar',
            encode: {
              x: 'title',
              y: 'count1'
            }
          }
        ]
      })
    })
    return {
      chartId,
      chart,
      ...toRefs(chartDatas)
    }
  }
})
</script>

<style lang="stylus" scoped>
.chart
  width 100%
  height 100%
</style>

页面中引用组件组件上拖动滑动条，或拖动手柄调整窗口大小，即console中报错。组件数据没有变化

What is expected?

可调整图表显示数据范围

What is actually happening?

柱状图的报错如下：

barPolar.js:63 Uncaught TypeError: Cannot read property 'type' of undefined
    at barPolar.js:63
    at GlobalModel2.<anonymous> (Global.js:661)
    at Array.forEach (<anonymous>)
    at each (util.js:206)
    at GlobalModel2.eachSeriesByType (Global.js:657)
    at Object.barLayoutPolar (barPolar.js:61)
    at Object.overallReset (util.js:311)
    at Task2.overallTaskReset [as _reset] (Scheduler.js:460)
    at Task2._doReset (task.js:202)
    at Task2.perform (task.js:117)

报错语句为：

if (seriesModel.coordinateSystem.type !== 'polar') {
      return;
}

此处的 seriesModel.coordinateSystem 为 undefined。这是为什么呢？

kalubin00

应该跟之前一些开发者反馈的问题类似，先改用 shallowRef 试试看。

const chart = shallowRef<any>()

plainheart

万分感谢，卡了我两天，问题终于解决了。但是原理是什么呢？vue3刚刚试水，有没有shallowRef相关解释说明的资料可以参考呀？再次拜谢大神～

kalubin00

ref 会把包裹的值变成响应式的对象，可能会影响 echarts 内部一些 model 属性的正常访问，暂时还不清楚具体原因。而 shallowRef 则是浅引用，不会将值变成响应式对象，不会影响 echarts 内部属性的访问。可以参考：https://v3.cn.vuejs.org/api/refs-api.html#shallowref

plainheart

@plainheart 好的，多谢～

kalubin00

hi, 如果chart是定义在data中的, 应该怎么赋初始类型?

data() {
    return {
     // chart: shallowRef<any> 不能这样定义类型
      chart: null
    }
  },
methods: {
initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      ...
      }
     }

junweipan

import {markRaw} from 'vue'
....
methods: {
initChart() {
this.chart = markRaw(echarts.init(this.$el, 'macarons'))
....
}
}
....

@junweipan

moshanghan

[apache/echarts]vue3使用echarts5，折线图、柱状图使用datazoom报错

回答