<template> <div class="home"> <div id="myChart" :style="{width: '700px', height: '700px'}"></div> </div> </template> <script> export default { name: 'Home', mounted() { this.Draw() }, methods: { Draw() { // 基于准备好的dom，初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')) // 绘制图表 myChart.setOption({ // options配置项 tooltip: { trigger: 'item' }, legend: { top: '5%', left: 'center' }, series: [ { name: 'Access From', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: 40, fontWeight: 'bold' } }, labelLine: { show: false }, data: [ { value: 1048, name: 'Search Engine' }, { value: 735, name: 'Direct' }, { value: 580, name: 'Email' }, { value: 484, name: 'Union Ads' }, { value: 300, name: 'Video Ads' } ] } ] }) } } } </script>报这样的错Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'init')"

这个错误是因为你没有正确引入echarts库。请确保在组件中正确引入echarts库，例如在Vue项目中，你需要在main.js中引入echarts库：

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

然后在组件中使用`this.$echarts`来初始化echarts实例。如果你已经引入了echarts库，那么请检查是否有其他错误导致无法正确初始化echarts实例。