vue3与echarts的dataZoom

在实际开发过程中，用到了横向柱状图，当数据多的时候，想用滚动条来展示，在滚动条的实现过程中，遇到一个这样的问题

在点击滚动条时，会报一个这样的错误

Vue3 封装 echarts 时，监听窗口大小变化时，调用 echarts resize() 函数更新图表，会发现报错：
TypeError: Cannot read properties of undefined (reading 'type')
原因是，vue3默认把 echarts 实例转为响应式proxy代理，致使 resize() 无法获取 coordSys.type

reactive 底层其实就是通过 ref 创建的；
默认情况下，无论是 ref 还是 reactive 都是深度监听；而 shallowRef / shallReactive 都是非深度监听，只会包装第一层的数据，如果想更改多层的数据，必须先更改第一层的数据，然后在去更改其他层的数据，这样视图上的数据才会发生变化。
所以，当我们试图将一个component组件 变成响应式时，vue3会发出警告：should be avoided by marking the component with markRaw or using shallowRef instead of ref -- 用 markRaw / shallowRef 标记组件

解决方案

import * as echarts from 'echarts';
import {
  markRaw
} from "vue";
  let list=[]
              list[0]=data.map(res=>{return res.name})
              list[1]=data.map(res=>{return res.value})
              var chartDom = document.getElementById('aaaa');
              var myChart = markRaw(echarts.init(chartDom));
              var option;
              option = {
                grid: {
                  left: '2%',
                  right: '15%',
                  bottom: '1%',
                  top: '4%',
                  containLabel: true,
                  height: '95%'
                },
                tooltip: { trigger: 'axis', axisPointer: { type: 'none' } },
                xAxis: { show: false, type: 'value' },
                yAxis: [
                  {
                    type: 'category',
                    inverse: true,
                    axisLabel: { show: true, textStyle: { color: '#fff', fontSize: '11' } },
                    splitLine: { show: false },
                    axisTick: { show: false },
                    axisLine: { show: false },
                    data: list[0]
                  },
                  {
                    type: 'category',
                    inverse: true,
                    axisTick: 'none',
                    axisLine: 'none',
                    show: true
                  }
                ],
                dataZoom: [
                  {
                    start: 0,
                    end: 100,
                    type: 'slider',
                    maxValueSpan: 8,
                    show: true,
                    yAxisIndex: [0],
                    handleSize: 0,
                    height: '90%',
                    left: '100%',
                    right: 10,
                    top: '4%',
                    borderColor: '#005e79',
                    radiusAxisIndex: 10,
                    fillerColor: '#009ecb',
                    backgroundColor: '#005e79',
                    showDataShadow: false,
                    showDetail: false,
                    realtime: true,
                    zoomOnMouseWheel: false,
                    moveOnMouseMove: false,
                    filterMode: 'filter',
                    brushSelect: false,
                    zoomLock: false
                  }
                ],
                series: [
                  {
                    type: 'bar',
                    zlevel: 1,
                    itemStyle: {
                      normal: {
                        barBorderRadius: [0, 10, 10, 0],
                        color: {
                          colorStops: [
                            { offset: 0, color: '#0071fc' },
                            { offset: 1, color: '#4be2ec' }
                          ],
                          x: 0,
                          y: 0,
                          x2: 1,
                          y2: 0,
                          type: 'linear',
                          global: false
                        }
                      }
                    },
                    label: {
                      show: true,
                      position: 'right',
                      fontSize: 12,
                      offset: [10, 0],
                      color: '#00f6ff'
                    },
                    barWidth: 8,
                    data: list[1]
                  }
                ]
              };
              myChart.clear();
              option && myChart.setOption(option);

简单来说，就是markRaw，标记一个对象，使其永远不会再成为响应式对象