vue3使用echarts记录

柱状图横向显示

<template>
	<div id="charts-content" ref="echartRef"></div>
</template>

<script setup>
	import { ref, markRaw } from 'vue // markRow在使用滚动条时有用到
	import * as echarts from 'echarts'
	
	const echartRef = ref(null)
	onMounted(() => {
	  myEcharts = echarts.init(echartRef.value)
	  let option = {
	    xAxis: { 
	      name: '标注数量',
	      // data: ["100", "200", "300", "400", "500", "600", "700", "800"], // 横向显示不能设置此值
	      axisLine: {  // 坐标轴，横向显示设置此属性无效
	        symbol: 'arrow',
	      },
	      interval: 20, // 坐标轴间隔
	    },
	    yAxis: {
	      type: 'category',
	      data: ['项目名称1', '项目名称2', '项目名称3', '项目名称4', '项目名称5'],
	      // inverse: true,
	      name: '项目',
	      axisLine: { //坐标轴
	        symbol: 'arrow',
	      },
	      axisTick:[{ //坐标轴小标记
	        show:false
	      }],
	    },
	    series: [
	      {
	        realtimeSort: false, // true开启该系列的动态排序效果
	        name: 'xxx', // legend图例显示
	        type: 'bar',
	        data: [115, 42, 28, 174, 88], // 显示的数据，
	        barWidth: 30, // 柱宽度
	        barMinHeight:30,  //最小柱高
	        barMaxWidth:100,   //最大柱宽度
	        itemStyle:{
	          normal:{    //柱状图颜色
	            // color:'#ff6600',
	          }
	        },
	        label: {
	          show: true, // 是否显示文本
	          position: 'right', // 数据值位置(insideLeft左对齐/inside在柱中显示)
	          valueAnimation: true, // 
	          textStyle:{ // 文本样式
	            color:'#000',
	            fontSize:'18'
	          }
	        }
	      }
	    ],
	    legend: { // 图例组件
	      // show: true
	      orient: 'vertical', // 垂直显示，horizontal水平显示
	      right: 10,
	      top: 'center'
	    }
	  }
	  myEcharts.setOption(option)
	})
</script>

带滚动条的横向柱状图

series.data 系列中的数据内容数组。数组项通常为具体的数据项。
注意，如果系列没有指定 data，并且 option 有 dataset，那么默认使用第一个 dataset。如果指定了 data，则不会再使用 dataset。
// 维度X 维度Y 其他维度 …
[ 3.4, 4.5, 15, 43],
[ 4.2, 2.3, 20, 91],
[ 10.8, 9.5, 30, 18],
[ 7.2, 8.8, 18, 57]

import { markRow, onMounted } from 'vue

const fetchEchartData = async (val) => {
	let exportData = (await getStatistic(val ?? data))?.data
  let option = {
    // dataset: { source: exportData.statisticList}, // 数据，与series.data相似
    tooltip : { // 
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    xAxis: {
      name: exportData.statisticCategory ?? '标注数量'
    },
    yAxis: {
      type: 'category',
      name: exportData.statisticDimension ?? '项目',
      axisLine: {
        symbol: 'arrow',
      },
    },
    dataZoom: [
      {
        show: true, // x轴
        start: 0, // x轴默认显示10%-100%区间
        end: 100,
        type: 'slider',
        filterMode: 'empty',
      },
      {
        type: 'inside', // 滚动条位置
        start: 10, 
        end: 100,
      },
      { // y轴
        show: true,
        type: 'slider',
        yAxisIndex: 0,
        filterMode: 'filter',
        width: 30, // 滚动条的宽度
        height: '80%',
        left: '93%' // 滚动条位置
      }
    ],
    series: [
      {
        type: 'bar',
        data: exportData.statisticList,
        colorBy: 'data', // 柱状图颜色不固定
        label: {
          show: true, // 每个柱状图是否显示文本
          position: 'right', // 数据值位置(insideLeft左对齐/inside在柱中显示)
          valueAnimation: true,
        }
      }
    ]
  }
  myEcharts.value.setOption(option)
}
onMounted( async () => {
  myEcharts.value =  markRaw(echarts.init(echartRef.value))
})

Cannot read properties of undefined (reading ‘type’)

使用滚动条时一出动滚动条就报上方的错误
解决：使用markRow

import { markRow } from 'vue
onMounted( async () => {
  myEcharts.value =  markRaw(echarts.init(echartRef.value))
})