[{"data":1,"prerenderedAt":2431},["ShallowReactive",2],{"docsNavigation":3,"blogNavigation":53,"/blog/nuxt-echarts-implementation":95,"/blog/nuxt-echarts-implementation-surround":2426},[4,38],{"title":5,"path":6,"stem":7,"children":8,"icon":37},"常用网站","/docs/getting-started","1.docs/1.getting-started/1.index",[9,12,17,22,27,32],{"title":10,"path":6,"stem":7,"icon":11},"区块链相关(前端)","i-lucide-box",{"title":13,"path":14,"stem":15,"icon":16},"图片压缩","/docs/getting-started/photo-compression","1.docs/1.getting-started/2.photo-compression","i-lucide-image",{"title":18,"path":19,"stem":20,"icon":21},"组件库","/docs/getting-started/component-library","1.docs/1.getting-started/3.component-library","i-lucide-puzzle",{"title":23,"path":24,"stem":25,"icon":26},"图表库","/docs/getting-started/charts","1.docs/1.getting-started/4.charts","i-lucide-bar-chart-3",{"title":28,"path":29,"stem":30,"icon":31},"CSS","/docs/getting-started/css","1.docs/1.getting-started/5.css","i-lucide-palette",{"title":33,"path":34,"stem":35,"icon":36},"调试测试工具","/docs/getting-started/test","1.docs/1.getting-started/6.test","i-lucide-bug",false,{"title":39,"path":40,"stem":41,"children":42,"page":37},"常用工具","/docs/essentials","1.docs/2.essentials",[43,48],{"title":44,"path":45,"stem":46,"icon":47},"uni-helper","/docs/essentials/uni-helper","1.docs/2.essentials/1.uni-helper","i-lucide-settings",{"title":49,"path":50,"stem":51,"icon":52},"工作流可视化库","/docs/essentials/workflow-libraries","1.docs/2.essentials/2.workflow-libraries","i-lucide-workflow",[54],{"title":55,"path":56,"stem":57,"children":58,"page":37},"Blog","/blog","3.blog",[59,63,67,71,75,79,83,87,91],{"title":60,"path":61,"stem":62},"Vue 3 中 \u003CTransition> 报错：组件根节点无法被动画化的解决方案","/blog/asian-cuisine","3.blog/1.asian-cuisine",{"title":64,"path":65,"stem":66},"使用 openapi-ts-request 自动生成 API 请求代码","/blog/apifox-api-generation","3.blog/2.apifox-api-generation",{"title":68,"path":69,"stem":70},"解决 uni.upload 多文件上传限制：使用 fetch + FormData 实现 H5 环境下的多文件上传","/blog/file-upload-issue-solution","3.blog/3.file-upload-issue-solution",{"title":72,"path":73,"stem":74},"Wangeditor中被div包裹的img标签被过滤问题解决方案","/blog/wangeditor-img-filter-issue","3.blog/4.wangeditor-img-filter-issue",{"title":76,"path":77,"stem":78},"Nuxt项目部署后报错 “Cannot load payload /_payload.json” 的修复","/blog/nuxt-payload-extraction","3.blog/5.nuxt-payload-extraction",{"title":80,"path":81,"stem":82},"Nuxt项目导入nuxt-echarts实现图表渲染","/blog/nuxt-echarts-implementation","3.blog/6.nuxt-echarts-implementation",{"title":84,"path":85,"stem":86},"Reown+Wagmi 在 UniApp+Vite 项目中的问题与解决方案","/blog/reown-wagmi-uniapp-issues","3.blog/7.reown-wagmi-uniapp-issues",{"title":88,"path":89,"stem":90},"数字滚动动画组件 - Vue 动画最佳实践","/blog/number-scroll-animation","3.blog/8.number-scroll-animation",{"title":92,"path":93,"stem":94},"新电脑安装 nvm 卡住？无需修改配置文件，一行命令完美解决！","/blog/nvm-install-solution","3.blog/9.nvm-install-solution",{"id":96,"title":80,"authors":97,"badge":102,"body":104,"date":2418,"description":2419,"extension":2420,"image":2421,"meta":2423,"navigation":563,"path":81,"seo":2424,"stem":82,"__hash__":2425},"posts/3.blog/6.nuxt-echarts-implementation.md",[98],{"name":99,"avatar":100},"qibmz",{"src":101},"/image/avatar.avif",{"label":103},"Tutorial",{"type":105,"value":106,"toc":2406},"minimark",[107,116,121,124,155,165,169,180,399,410,414,421,998,1017,1021,1024,1291,1294,1297,2154,2157,2162,2181,2185,2371,2374,2393,2396,2402],[108,109,110,111,115],"p",{},"在Nuxt项目中使用ECharts可以快速实现数据可视化。",[112,113,114],"code",{},"nuxt-echarts","模块为Nuxt提供了开箱即用的ECharts集成方案，本文将介绍完整的集成步骤。",[117,118,120],"h2",{"id":119},"第一步安装nuxt-echarts模块","第一步：安装nuxt-echarts模块",[108,122,123],{},"使用Nuxt CLI快速添加echarts模块：",[125,126,131],"pre",{"className":127,"code":128,"language":129,"meta":130,"style":130},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx nuxi module add echarts\n","bash","",[112,132,133],{"__ignoreMap":130},[134,135,138,142,146,149,152],"span",{"class":136,"line":137},"line",1,[134,139,141],{"class":140},"sBMFI","npx",[134,143,145],{"class":144},"sfazB"," nuxi",[134,147,148],{"class":144}," module",[134,150,151],{"class":144}," add",[134,153,154],{"class":144}," echarts\n",[108,156,157,158,160,161,164],{},"该命令会自动将",[112,159,114],{},"添加到项目依赖并在",[112,162,163],{},"nuxt.config.ts","中注册模块。",[117,166,168],{"id":167},"第二步配置所需的echarts模块必须","第二步：配置所需的ECharts模块（必须）",[108,170,171,172,174,175,179],{},"在",[112,173,163],{},"中添加echarts配置，",[176,177,178],"strong",{},"必须显式声明","要使用的图表类型和组件：",[125,181,185],{"className":182,"code":183,"language":184,"meta":130,"style":130},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: [\n    'nuxt-echarts'\n  ],\n  echarts: {\n    // 指定需要的图表类型\n    charts: ['PieChart', 'BarChart', 'LineChart'],\n    // 指定需要的组件\n    components: [\n      'DatasetComponent',\n      'GridComponent',\n      'TooltipComponent',\n      'LegendComponent',\n      'TitleComponent'\n    ]\n  }\n})\n","ts",[112,186,187,208,221,232,241,252,259,303,309,319,332,344,356,368,378,384,390],{"__ignoreMap":130},[134,188,189,193,196,200,204],{"class":136,"line":137},[134,190,192],{"class":191},"s7zQu","export",[134,194,195],{"class":191}," default",[134,197,199],{"class":198},"s2Zo4"," defineNuxtConfig",[134,201,203],{"class":202},"sTEyZ","(",[134,205,207],{"class":206},"sMK4o","{\n",[134,209,211,215,218],{"class":136,"line":210},2,[134,212,214],{"class":213},"swJcz","  modules",[134,216,217],{"class":206},":",[134,219,220],{"class":202}," [\n",[134,222,224,227,229],{"class":136,"line":223},3,[134,225,226],{"class":206},"    '",[134,228,114],{"class":144},[134,230,231],{"class":206},"'\n",[134,233,235,238],{"class":136,"line":234},4,[134,236,237],{"class":202},"  ]",[134,239,240],{"class":206},",\n",[134,242,244,247,249],{"class":136,"line":243},5,[134,245,246],{"class":213},"  echarts",[134,248,217],{"class":206},[134,250,251],{"class":206}," {\n",[134,253,255],{"class":136,"line":254},6,[134,256,258],{"class":257},"sHwdD","    // 指定需要的图表类型\n",[134,260,262,265,267,270,273,276,278,281,284,287,289,291,293,296,298,301],{"class":136,"line":261},7,[134,263,264],{"class":213},"    charts",[134,266,217],{"class":206},[134,268,269],{"class":202}," [",[134,271,272],{"class":206},"'",[134,274,275],{"class":144},"PieChart",[134,277,272],{"class":206},[134,279,280],{"class":206},",",[134,282,283],{"class":206}," '",[134,285,286],{"class":144},"BarChart",[134,288,272],{"class":206},[134,290,280],{"class":206},[134,292,283],{"class":206},[134,294,295],{"class":144},"LineChart",[134,297,272],{"class":206},[134,299,300],{"class":202},"]",[134,302,240],{"class":206},[134,304,306],{"class":136,"line":305},8,[134,307,308],{"class":257},"    // 指定需要的组件\n",[134,310,312,315,317],{"class":136,"line":311},9,[134,313,314],{"class":213},"    components",[134,316,217],{"class":206},[134,318,220],{"class":202},[134,320,322,325,328,330],{"class":136,"line":321},10,[134,323,324],{"class":206},"      '",[134,326,327],{"class":144},"DatasetComponent",[134,329,272],{"class":206},[134,331,240],{"class":206},[134,333,335,337,340,342],{"class":136,"line":334},11,[134,336,324],{"class":206},[134,338,339],{"class":144},"GridComponent",[134,341,272],{"class":206},[134,343,240],{"class":206},[134,345,347,349,352,354],{"class":136,"line":346},12,[134,348,324],{"class":206},[134,350,351],{"class":144},"TooltipComponent",[134,353,272],{"class":206},[134,355,240],{"class":206},[134,357,359,361,364,366],{"class":136,"line":358},13,[134,360,324],{"class":206},[134,362,363],{"class":144},"LegendComponent",[134,365,272],{"class":206},[134,367,240],{"class":206},[134,369,371,373,376],{"class":136,"line":370},14,[134,372,324],{"class":206},[134,374,375],{"class":144},"TitleComponent",[134,377,231],{"class":206},[134,379,381],{"class":136,"line":380},15,[134,382,383],{"class":202},"    ]\n",[134,385,387],{"class":136,"line":386},16,[134,388,389],{"class":206},"  }\n",[134,391,393,396],{"class":136,"line":392},17,[134,394,395],{"class":206},"}",[134,397,398],{"class":202},")\n",[400,401,404],"callout",{"color":402,"icon":403},"warning","i-heroicons-exclamation-triangle",[108,405,406,407,409],{},"注意：",[112,408,114],{},"采用按需加载机制，只会打包你声明的图表和组件，未声明的功能将无法使用。",[117,411,413],{"id":412},"第三步在页面中使用vchart组件","第三步：在页面中使用VChart组件",[108,415,416,417,420],{},"使用",[112,418,419],{},"\u003Cclient-only>","包裹图表组件，因为ECharts依赖浏览器环境：",[125,422,426],{"className":423,"code":424,"language":425,"meta":130,"style":130},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate> \n  \u003Cdiv>\n    \u003Ch1>图表示例\u003C/h1>\n    \u003Cclient-only>\n      \u003CVChart :option=\"option\" style=\"height: 400px;\" />\n    \u003C/client-only>\n  \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport type { Option } from 'nuxt-echarts/runtime/types'\n\nconst option = ref\u003COption>({\n  title: {\n    text: '示例饼图'\n  },\n  tooltip: {\n    trigger: 'item'\n  },\n  legend: {\n    orient: 'vertical',\n    left: 'left'\n  },\n  series: [\n    {\n      name: '访问来源',\n      type: 'pie',\n      radius: '50%',\n      data: [\n        { value: 1048, name: '搜索引擎' },\n        { value: 735, name: '直接访问' },\n        { value: 580, name: '邮件营销' },\n        { value: 484, name: '联盟广告' },\n        { value: 300, name: '视频广告' }\n      ]\n    }\n  ]\n})\n\u003C/script>\n","vue",[112,427,428,442,453,473,482,533,542,551,559,565,588,615,619,643,652,666,671,680,695,700,710,727,742,747,757,763,780,797,814,824,855,882,909,936,964,970,976,982,989],{"__ignoreMap":130},[134,429,430,433,436,439],{"class":136,"line":137},[134,431,432],{"class":206},"\u003C",[134,434,435],{"class":213},"template",[134,437,438],{"class":206},">",[134,440,441],{"class":202}," \n",[134,443,444,447,450],{"class":136,"line":210},[134,445,446],{"class":206},"  \u003C",[134,448,449],{"class":213},"div",[134,451,452],{"class":206},">\n",[134,454,455,458,461,463,466,469,471],{"class":136,"line":223},[134,456,457],{"class":206},"    \u003C",[134,459,460],{"class":213},"h1",[134,462,438],{"class":206},[134,464,465],{"class":202},"图表示例",[134,467,468],{"class":206},"\u003C/",[134,470,460],{"class":213},[134,472,452],{"class":206},[134,474,475,477,480],{"class":136,"line":234},[134,476,457],{"class":206},[134,478,479],{"class":213},"client-only",[134,481,452],{"class":206},[134,483,484,487,490,493,497,500,503,505,507,510,512,514,518,521,525,528,530],{"class":136,"line":243},[134,485,486],{"class":206},"      \u003C",[134,488,489],{"class":213},"VChart",[134,491,492],{"class":206}," :",[134,494,496],{"class":495},"spNyl","option",[134,498,499],{"class":206},"=",[134,501,502],{"class":206},"\"",[134,504,496],{"class":202},[134,506,502],{"class":206},[134,508,509],{"class":495}," style",[134,511,499],{"class":206},[134,513,502],{"class":206},[134,515,517],{"class":516},"sqsOY","height",[134,519,520],{"class":206},": ",[134,522,524],{"class":523},"sbssI","400px",[134,526,527],{"class":206},";",[134,529,502],{"class":206},[134,531,532],{"class":206}," />\n",[134,534,535,538,540],{"class":136,"line":254},[134,536,537],{"class":206},"    \u003C/",[134,539,479],{"class":213},[134,541,452],{"class":206},[134,543,544,547,549],{"class":136,"line":261},[134,545,546],{"class":206},"  \u003C/",[134,548,449],{"class":213},[134,550,452],{"class":206},[134,552,553,555,557],{"class":136,"line":305},[134,554,468],{"class":206},[134,556,435],{"class":213},[134,558,452],{"class":206},[134,560,561],{"class":136,"line":311},[134,562,564],{"emptyLinePlaceholder":563},true,"\n",[134,566,567,569,572,575,578,580,582,584,586],{"class":136,"line":321},[134,568,432],{"class":206},[134,570,571],{"class":213},"script",[134,573,574],{"class":495}," setup",[134,576,577],{"class":495}," lang",[134,579,499],{"class":206},[134,581,502],{"class":206},[134,583,184],{"class":144},[134,585,502],{"class":206},[134,587,452],{"class":206},[134,589,590,593,596,599,602,605,608,610,613],{"class":136,"line":334},[134,591,592],{"class":191},"import",[134,594,595],{"class":191}," type",[134,597,598],{"class":206}," {",[134,600,601],{"class":202}," Option",[134,603,604],{"class":206}," }",[134,606,607],{"class":191}," from",[134,609,283],{"class":206},[134,611,612],{"class":144},"nuxt-echarts/runtime/types",[134,614,231],{"class":206},[134,616,617],{"class":136,"line":346},[134,618,564],{"emptyLinePlaceholder":563},[134,620,621,624,627,629,632,634,637,639,641],{"class":136,"line":358},[134,622,623],{"class":495},"const",[134,625,626],{"class":202}," option ",[134,628,499],{"class":206},[134,630,631],{"class":198}," ref",[134,633,432],{"class":206},[134,635,636],{"class":140},"Option",[134,638,438],{"class":206},[134,640,203],{"class":202},[134,642,207],{"class":206},[134,644,645,648,650],{"class":136,"line":370},[134,646,647],{"class":213},"  title",[134,649,217],{"class":206},[134,651,251],{"class":206},[134,653,654,657,659,661,664],{"class":136,"line":380},[134,655,656],{"class":213},"    text",[134,658,217],{"class":206},[134,660,283],{"class":206},[134,662,663],{"class":144},"示例饼图",[134,665,231],{"class":206},[134,667,668],{"class":136,"line":386},[134,669,670],{"class":206},"  },\n",[134,672,673,676,678],{"class":136,"line":392},[134,674,675],{"class":213},"  tooltip",[134,677,217],{"class":206},[134,679,251],{"class":206},[134,681,683,686,688,690,693],{"class":136,"line":682},18,[134,684,685],{"class":213},"    trigger",[134,687,217],{"class":206},[134,689,283],{"class":206},[134,691,692],{"class":144},"item",[134,694,231],{"class":206},[134,696,698],{"class":136,"line":697},19,[134,699,670],{"class":206},[134,701,703,706,708],{"class":136,"line":702},20,[134,704,705],{"class":213},"  legend",[134,707,217],{"class":206},[134,709,251],{"class":206},[134,711,713,716,718,720,723,725],{"class":136,"line":712},21,[134,714,715],{"class":213},"    orient",[134,717,217],{"class":206},[134,719,283],{"class":206},[134,721,722],{"class":144},"vertical",[134,724,272],{"class":206},[134,726,240],{"class":206},[134,728,730,733,735,737,740],{"class":136,"line":729},22,[134,731,732],{"class":213},"    left",[134,734,217],{"class":206},[134,736,283],{"class":206},[134,738,739],{"class":144},"left",[134,741,231],{"class":206},[134,743,745],{"class":136,"line":744},23,[134,746,670],{"class":206},[134,748,750,753,755],{"class":136,"line":749},24,[134,751,752],{"class":213},"  series",[134,754,217],{"class":206},[134,756,220],{"class":202},[134,758,760],{"class":136,"line":759},25,[134,761,762],{"class":206},"    {\n",[134,764,766,769,771,773,776,778],{"class":136,"line":765},26,[134,767,768],{"class":213},"      name",[134,770,217],{"class":206},[134,772,283],{"class":206},[134,774,775],{"class":144},"访问来源",[134,777,272],{"class":206},[134,779,240],{"class":206},[134,781,783,786,788,790,793,795],{"class":136,"line":782},27,[134,784,785],{"class":213},"      type",[134,787,217],{"class":206},[134,789,283],{"class":206},[134,791,792],{"class":144},"pie",[134,794,272],{"class":206},[134,796,240],{"class":206},[134,798,800,803,805,807,810,812],{"class":136,"line":799},28,[134,801,802],{"class":213},"      radius",[134,804,217],{"class":206},[134,806,283],{"class":206},[134,808,809],{"class":144},"50%",[134,811,272],{"class":206},[134,813,240],{"class":206},[134,815,817,820,822],{"class":136,"line":816},29,[134,818,819],{"class":213},"      data",[134,821,217],{"class":206},[134,823,220],{"class":202},[134,825,827,830,833,835,838,840,843,845,847,850,852],{"class":136,"line":826},30,[134,828,829],{"class":206},"        {",[134,831,832],{"class":213}," value",[134,834,217],{"class":206},[134,836,837],{"class":523}," 1048",[134,839,280],{"class":206},[134,841,842],{"class":213}," name",[134,844,217],{"class":206},[134,846,283],{"class":206},[134,848,849],{"class":144},"搜索引擎",[134,851,272],{"class":206},[134,853,854],{"class":206}," },\n",[134,856,858,860,862,864,867,869,871,873,875,878,880],{"class":136,"line":857},31,[134,859,829],{"class":206},[134,861,832],{"class":213},[134,863,217],{"class":206},[134,865,866],{"class":523}," 735",[134,868,280],{"class":206},[134,870,842],{"class":213},[134,872,217],{"class":206},[134,874,283],{"class":206},[134,876,877],{"class":144},"直接访问",[134,879,272],{"class":206},[134,881,854],{"class":206},[134,883,885,887,889,891,894,896,898,900,902,905,907],{"class":136,"line":884},32,[134,886,829],{"class":206},[134,888,832],{"class":213},[134,890,217],{"class":206},[134,892,893],{"class":523}," 580",[134,895,280],{"class":206},[134,897,842],{"class":213},[134,899,217],{"class":206},[134,901,283],{"class":206},[134,903,904],{"class":144},"邮件营销",[134,906,272],{"class":206},[134,908,854],{"class":206},[134,910,912,914,916,918,921,923,925,927,929,932,934],{"class":136,"line":911},33,[134,913,829],{"class":206},[134,915,832],{"class":213},[134,917,217],{"class":206},[134,919,920],{"class":523}," 484",[134,922,280],{"class":206},[134,924,842],{"class":213},[134,926,217],{"class":206},[134,928,283],{"class":206},[134,930,931],{"class":144},"联盟广告",[134,933,272],{"class":206},[134,935,854],{"class":206},[134,937,939,941,943,945,948,950,952,954,956,959,961],{"class":136,"line":938},34,[134,940,829],{"class":206},[134,942,832],{"class":213},[134,944,217],{"class":206},[134,946,947],{"class":523}," 300",[134,949,280],{"class":206},[134,951,842],{"class":213},[134,953,217],{"class":206},[134,955,283],{"class":206},[134,957,958],{"class":144},"视频广告",[134,960,272],{"class":206},[134,962,963],{"class":206}," }\n",[134,965,967],{"class":136,"line":966},35,[134,968,969],{"class":202},"      ]\n",[134,971,973],{"class":136,"line":972},36,[134,974,975],{"class":206},"    }\n",[134,977,979],{"class":136,"line":978},37,[134,980,981],{"class":202},"  ]\n",[134,983,985,987],{"class":136,"line":984},38,[134,986,395],{"class":206},[134,988,398],{"class":202},[134,990,992,994,996],{"class":136,"line":991},39,[134,993,468],{"class":206},[134,995,571],{"class":213},[134,997,452],{"class":206},[400,999,1002],{"color":1000,"icon":1001},"primary","i-heroicons-exclamation-circle",[108,1003,1004,1010,1013,1014,1016],{},[176,1005,1006,1007,1009],{},"为什么必须使用",[112,1008,419],{},"？",[1011,1012],"br",{},"\nECharts需要访问DOM和浏览器API（如Canvas），在SSR环境下会导致错误。",[112,1015,419],{},"确保组件只在客户端渲染。",[117,1018,1020],{"id":1019},"第四步使用typescript类型定义","第四步：使用TypeScript类型定义",[108,1022,1023],{},"nuxt-echarts提供了完整的类型支持，使用官方类型定义来实现option：",[125,1025,1027],{"className":182,"code":1026,"language":184,"meta":130,"style":130},"import type { Option } from 'nuxt-echarts/runtime/types'\n\n// 示例：柱状图配置\nconst barOption = ref\u003COption>({\n  xAxis: {\n    type: 'category',\n    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n  },\n  yAxis: {\n    type: 'value'\n  },\n  series: [\n    {\n      data: [120, 200, 150, 80, 70, 110, 130],\n      type: 'bar'\n    }\n  ]\n})\n",[112,1028,1029,1049,1053,1058,1079,1088,1104,1177,1181,1190,1203,1207,1215,1219,1264,1277,1281,1285],{"__ignoreMap":130},[134,1030,1031,1033,1035,1037,1039,1041,1043,1045,1047],{"class":136,"line":137},[134,1032,592],{"class":191},[134,1034,595],{"class":191},[134,1036,598],{"class":206},[134,1038,601],{"class":202},[134,1040,604],{"class":206},[134,1042,607],{"class":191},[134,1044,283],{"class":206},[134,1046,612],{"class":144},[134,1048,231],{"class":206},[134,1050,1051],{"class":136,"line":210},[134,1052,564],{"emptyLinePlaceholder":563},[134,1054,1055],{"class":136,"line":223},[134,1056,1057],{"class":257},"// 示例：柱状图配置\n",[134,1059,1060,1062,1065,1067,1069,1071,1073,1075,1077],{"class":136,"line":234},[134,1061,623],{"class":495},[134,1063,1064],{"class":202}," barOption ",[134,1066,499],{"class":206},[134,1068,631],{"class":198},[134,1070,432],{"class":206},[134,1072,636],{"class":140},[134,1074,438],{"class":206},[134,1076,203],{"class":202},[134,1078,207],{"class":206},[134,1080,1081,1084,1086],{"class":136,"line":243},[134,1082,1083],{"class":213},"  xAxis",[134,1085,217],{"class":206},[134,1087,251],{"class":206},[134,1089,1090,1093,1095,1097,1100,1102],{"class":136,"line":254},[134,1091,1092],{"class":213},"    type",[134,1094,217],{"class":206},[134,1096,283],{"class":206},[134,1098,1099],{"class":144},"category",[134,1101,272],{"class":206},[134,1103,240],{"class":206},[134,1105,1106,1109,1111,1113,1115,1118,1120,1122,1124,1127,1129,1131,1133,1136,1138,1140,1142,1145,1147,1149,1151,1154,1156,1158,1160,1163,1165,1167,1169,1172,1174],{"class":136,"line":261},[134,1107,1108],{"class":213},"    data",[134,1110,217],{"class":206},[134,1112,269],{"class":202},[134,1114,272],{"class":206},[134,1116,1117],{"class":144},"Mon",[134,1119,272],{"class":206},[134,1121,280],{"class":206},[134,1123,283],{"class":206},[134,1125,1126],{"class":144},"Tue",[134,1128,272],{"class":206},[134,1130,280],{"class":206},[134,1132,283],{"class":206},[134,1134,1135],{"class":144},"Wed",[134,1137,272],{"class":206},[134,1139,280],{"class":206},[134,1141,283],{"class":206},[134,1143,1144],{"class":144},"Thu",[134,1146,272],{"class":206},[134,1148,280],{"class":206},[134,1150,283],{"class":206},[134,1152,1153],{"class":144},"Fri",[134,1155,272],{"class":206},[134,1157,280],{"class":206},[134,1159,283],{"class":206},[134,1161,1162],{"class":144},"Sat",[134,1164,272],{"class":206},[134,1166,280],{"class":206},[134,1168,283],{"class":206},[134,1170,1171],{"class":144},"Sun",[134,1173,272],{"class":206},[134,1175,1176],{"class":202},"]\n",[134,1178,1179],{"class":136,"line":305},[134,1180,670],{"class":206},[134,1182,1183,1186,1188],{"class":136,"line":311},[134,1184,1185],{"class":213},"  yAxis",[134,1187,217],{"class":206},[134,1189,251],{"class":206},[134,1191,1192,1194,1196,1198,1201],{"class":136,"line":321},[134,1193,1092],{"class":213},[134,1195,217],{"class":206},[134,1197,283],{"class":206},[134,1199,1200],{"class":144},"value",[134,1202,231],{"class":206},[134,1204,1205],{"class":136,"line":334},[134,1206,670],{"class":206},[134,1208,1209,1211,1213],{"class":136,"line":346},[134,1210,752],{"class":213},[134,1212,217],{"class":206},[134,1214,220],{"class":202},[134,1216,1217],{"class":136,"line":358},[134,1218,762],{"class":206},[134,1220,1221,1223,1225,1227,1230,1232,1235,1237,1240,1242,1245,1247,1250,1252,1255,1257,1260,1262],{"class":136,"line":370},[134,1222,819],{"class":213},[134,1224,217],{"class":206},[134,1226,269],{"class":202},[134,1228,1229],{"class":523},"120",[134,1231,280],{"class":206},[134,1233,1234],{"class":523}," 200",[134,1236,280],{"class":206},[134,1238,1239],{"class":523}," 150",[134,1241,280],{"class":206},[134,1243,1244],{"class":523}," 80",[134,1246,280],{"class":206},[134,1248,1249],{"class":523}," 70",[134,1251,280],{"class":206},[134,1253,1254],{"class":523}," 110",[134,1256,280],{"class":206},[134,1258,1259],{"class":523}," 130",[134,1261,300],{"class":202},[134,1263,240],{"class":206},[134,1265,1266,1268,1270,1272,1275],{"class":136,"line":380},[134,1267,785],{"class":213},[134,1269,217],{"class":206},[134,1271,283],{"class":206},[134,1273,1274],{"class":144},"bar",[134,1276,231],{"class":206},[134,1278,1279],{"class":136,"line":386},[134,1280,975],{"class":206},[134,1282,1283],{"class":136,"line":392},[134,1284,981],{"class":202},[134,1286,1287,1289],{"class":136,"line":682},[134,1288,395],{"class":206},[134,1290,398],{"class":202},[117,1292,1293],{"id":1293},"完整示例",[108,1295,1296],{},"结合以上步骤的完整页面示例：",[125,1298,1300],{"className":423,"code":1299,"language":425,"meta":130,"style":130},"\u003Ctemplate>\n  \u003Cdiv class=\"container mx-auto p-4\">\n    \u003Ch1 class=\"text-3xl font-bold mb-4\">销售数据分析\u003C/h1>\n    \n    \u003Cdiv class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n      \u003C!-- 饼图 -->\n      \u003Cdiv class=\"bg-white p-4 rounded shadow\">\n        \u003Cclient-only>\n          \u003CVChart :option=\"pieOption\" style=\"height: 400px;\" />\n        \u003C/client-only>\n      \u003C/div>\n      \n      \u003C!-- 柱状图 -->\n      \u003Cdiv class=\"bg-white p-4 rounded shadow\">\n        \u003Cclient-only>\n          \u003CVChart :option=\"barOption\" style=\"height: 400px;\" />\n        \u003C/client-only>\n      \u003C/div>\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport type { Option } from 'nuxt-echarts/runtime/types'\n\nconst pieOption = ref\u003COption>({\n  title: { text: '销售渠道分布' },\n  tooltip: { trigger: 'item' },\n  legend: { orient: 'vertical', left: 'left' },\n  series: [{\n    name: '销售额',\n    type: 'pie',\n    radius: '50%',\n    data: [\n      { value: 1048, name: '线上商城' },\n      { value: 735, name: '实体店' },\n      { value: 580, name: '代理商' }\n    ]\n  }]\n})\n\nconst barOption = ref\u003COption>({\n  title: { text: '月度销售趋势' },\n  tooltip: { trigger: 'axis' },\n  xAxis: {\n    type: 'category',\n    data: ['1月', '2月', '3月', '4月', '5月', '6月']\n  },\n  yAxis: { type: 'value' },\n  series: [{\n    data: [120, 200, 150, 80, 170, 210],\n    type: 'bar'\n  }]\n})\n\u003C/script>\n",[112,1301,1302,1310,1330,1358,1363,1382,1387,1406,1415,1453,1462,1471,1476,1481,1499,1507,1544,1552,1560,1568,1576,1584,1588,1608,1628,1632,1653,1675,1696,1730,1740,1756,1770,1785,1793,1819,1844,1869,1873,1880,1887,1892,1913,1935,1957,1966,1981,2044,2049,2070,2081,2118,2131,2138,2145],{"__ignoreMap":130},[134,1303,1304,1306,1308],{"class":136,"line":137},[134,1305,432],{"class":206},[134,1307,435],{"class":213},[134,1309,452],{"class":206},[134,1311,1312,1314,1316,1319,1321,1323,1326,1328],{"class":136,"line":210},[134,1313,446],{"class":206},[134,1315,449],{"class":213},[134,1317,1318],{"class":495}," class",[134,1320,499],{"class":206},[134,1322,502],{"class":206},[134,1324,1325],{"class":144},"container mx-auto p-4",[134,1327,502],{"class":206},[134,1329,452],{"class":206},[134,1331,1332,1334,1336,1338,1340,1342,1345,1347,1349,1352,1354,1356],{"class":136,"line":223},[134,1333,457],{"class":206},[134,1335,460],{"class":213},[134,1337,1318],{"class":495},[134,1339,499],{"class":206},[134,1341,502],{"class":206},[134,1343,1344],{"class":144},"text-3xl font-bold mb-4",[134,1346,502],{"class":206},[134,1348,438],{"class":206},[134,1350,1351],{"class":202},"销售数据分析",[134,1353,468],{"class":206},[134,1355,460],{"class":213},[134,1357,452],{"class":206},[134,1359,1360],{"class":136,"line":234},[134,1361,1362],{"class":202},"    \n",[134,1364,1365,1367,1369,1371,1373,1375,1378,1380],{"class":136,"line":243},[134,1366,457],{"class":206},[134,1368,449],{"class":213},[134,1370,1318],{"class":495},[134,1372,499],{"class":206},[134,1374,502],{"class":206},[134,1376,1377],{"class":144},"grid grid-cols-1 md:grid-cols-2 gap-4",[134,1379,502],{"class":206},[134,1381,452],{"class":206},[134,1383,1384],{"class":136,"line":254},[134,1385,1386],{"class":257},"      \u003C!-- 饼图 -->\n",[134,1388,1389,1391,1393,1395,1397,1399,1402,1404],{"class":136,"line":261},[134,1390,486],{"class":206},[134,1392,449],{"class":213},[134,1394,1318],{"class":495},[134,1396,499],{"class":206},[134,1398,502],{"class":206},[134,1400,1401],{"class":144},"bg-white p-4 rounded shadow",[134,1403,502],{"class":206},[134,1405,452],{"class":206},[134,1407,1408,1411,1413],{"class":136,"line":305},[134,1409,1410],{"class":206},"        \u003C",[134,1412,479],{"class":213},[134,1414,452],{"class":206},[134,1416,1417,1420,1422,1424,1426,1428,1430,1433,1435,1437,1439,1441,1443,1445,1447,1449,1451],{"class":136,"line":311},[134,1418,1419],{"class":206},"          \u003C",[134,1421,489],{"class":213},[134,1423,492],{"class":206},[134,1425,496],{"class":495},[134,1427,499],{"class":206},[134,1429,502],{"class":206},[134,1431,1432],{"class":202},"pieOption",[134,1434,502],{"class":206},[134,1436,509],{"class":495},[134,1438,499],{"class":206},[134,1440,502],{"class":206},[134,1442,517],{"class":516},[134,1444,520],{"class":206},[134,1446,524],{"class":523},[134,1448,527],{"class":206},[134,1450,502],{"class":206},[134,1452,532],{"class":206},[134,1454,1455,1458,1460],{"class":136,"line":321},[134,1456,1457],{"class":206},"        \u003C/",[134,1459,479],{"class":213},[134,1461,452],{"class":206},[134,1463,1464,1467,1469],{"class":136,"line":334},[134,1465,1466],{"class":206},"      \u003C/",[134,1468,449],{"class":213},[134,1470,452],{"class":206},[134,1472,1473],{"class":136,"line":346},[134,1474,1475],{"class":202},"      \n",[134,1477,1478],{"class":136,"line":358},[134,1479,1480],{"class":257},"      \u003C!-- 柱状图 -->\n",[134,1482,1483,1485,1487,1489,1491,1493,1495,1497],{"class":136,"line":370},[134,1484,486],{"class":206},[134,1486,449],{"class":213},[134,1488,1318],{"class":495},[134,1490,499],{"class":206},[134,1492,502],{"class":206},[134,1494,1401],{"class":144},[134,1496,502],{"class":206},[134,1498,452],{"class":206},[134,1500,1501,1503,1505],{"class":136,"line":380},[134,1502,1410],{"class":206},[134,1504,479],{"class":213},[134,1506,452],{"class":206},[134,1508,1509,1511,1513,1515,1517,1519,1521,1524,1526,1528,1530,1532,1534,1536,1538,1540,1542],{"class":136,"line":386},[134,1510,1419],{"class":206},[134,1512,489],{"class":213},[134,1514,492],{"class":206},[134,1516,496],{"class":495},[134,1518,499],{"class":206},[134,1520,502],{"class":206},[134,1522,1523],{"class":202},"barOption",[134,1525,502],{"class":206},[134,1527,509],{"class":495},[134,1529,499],{"class":206},[134,1531,502],{"class":206},[134,1533,517],{"class":516},[134,1535,520],{"class":206},[134,1537,524],{"class":523},[134,1539,527],{"class":206},[134,1541,502],{"class":206},[134,1543,532],{"class":206},[134,1545,1546,1548,1550],{"class":136,"line":392},[134,1547,1457],{"class":206},[134,1549,479],{"class":213},[134,1551,452],{"class":206},[134,1553,1554,1556,1558],{"class":136,"line":682},[134,1555,1466],{"class":206},[134,1557,449],{"class":213},[134,1559,452],{"class":206},[134,1561,1562,1564,1566],{"class":136,"line":697},[134,1563,537],{"class":206},[134,1565,449],{"class":213},[134,1567,452],{"class":206},[134,1569,1570,1572,1574],{"class":136,"line":702},[134,1571,546],{"class":206},[134,1573,449],{"class":213},[134,1575,452],{"class":206},[134,1577,1578,1580,1582],{"class":136,"line":712},[134,1579,468],{"class":206},[134,1581,435],{"class":213},[134,1583,452],{"class":206},[134,1585,1586],{"class":136,"line":729},[134,1587,564],{"emptyLinePlaceholder":563},[134,1589,1590,1592,1594,1596,1598,1600,1602,1604,1606],{"class":136,"line":744},[134,1591,432],{"class":206},[134,1593,571],{"class":213},[134,1595,574],{"class":495},[134,1597,577],{"class":495},[134,1599,499],{"class":206},[134,1601,502],{"class":206},[134,1603,184],{"class":144},[134,1605,502],{"class":206},[134,1607,452],{"class":206},[134,1609,1610,1612,1614,1616,1618,1620,1622,1624,1626],{"class":136,"line":749},[134,1611,592],{"class":191},[134,1613,595],{"class":191},[134,1615,598],{"class":206},[134,1617,601],{"class":202},[134,1619,604],{"class":206},[134,1621,607],{"class":191},[134,1623,283],{"class":206},[134,1625,612],{"class":144},[134,1627,231],{"class":206},[134,1629,1630],{"class":136,"line":759},[134,1631,564],{"emptyLinePlaceholder":563},[134,1633,1634,1636,1639,1641,1643,1645,1647,1649,1651],{"class":136,"line":765},[134,1635,623],{"class":495},[134,1637,1638],{"class":202}," pieOption ",[134,1640,499],{"class":206},[134,1642,631],{"class":198},[134,1644,432],{"class":206},[134,1646,636],{"class":140},[134,1648,438],{"class":206},[134,1650,203],{"class":202},[134,1652,207],{"class":206},[134,1654,1655,1657,1659,1661,1664,1666,1668,1671,1673],{"class":136,"line":782},[134,1656,647],{"class":213},[134,1658,217],{"class":206},[134,1660,598],{"class":206},[134,1662,1663],{"class":213}," text",[134,1665,217],{"class":206},[134,1667,283],{"class":206},[134,1669,1670],{"class":144},"销售渠道分布",[134,1672,272],{"class":206},[134,1674,854],{"class":206},[134,1676,1677,1679,1681,1683,1686,1688,1690,1692,1694],{"class":136,"line":799},[134,1678,675],{"class":213},[134,1680,217],{"class":206},[134,1682,598],{"class":206},[134,1684,1685],{"class":213}," trigger",[134,1687,217],{"class":206},[134,1689,283],{"class":206},[134,1691,692],{"class":144},[134,1693,272],{"class":206},[134,1695,854],{"class":206},[134,1697,1698,1700,1702,1704,1707,1709,1711,1713,1715,1717,1720,1722,1724,1726,1728],{"class":136,"line":816},[134,1699,705],{"class":213},[134,1701,217],{"class":206},[134,1703,598],{"class":206},[134,1705,1706],{"class":213}," orient",[134,1708,217],{"class":206},[134,1710,283],{"class":206},[134,1712,722],{"class":144},[134,1714,272],{"class":206},[134,1716,280],{"class":206},[134,1718,1719],{"class":213}," left",[134,1721,217],{"class":206},[134,1723,283],{"class":206},[134,1725,739],{"class":144},[134,1727,272],{"class":206},[134,1729,854],{"class":206},[134,1731,1732,1734,1736,1738],{"class":136,"line":826},[134,1733,752],{"class":213},[134,1735,217],{"class":206},[134,1737,269],{"class":202},[134,1739,207],{"class":206},[134,1741,1742,1745,1747,1749,1752,1754],{"class":136,"line":857},[134,1743,1744],{"class":213},"    name",[134,1746,217],{"class":206},[134,1748,283],{"class":206},[134,1750,1751],{"class":144},"销售额",[134,1753,272],{"class":206},[134,1755,240],{"class":206},[134,1757,1758,1760,1762,1764,1766,1768],{"class":136,"line":884},[134,1759,1092],{"class":213},[134,1761,217],{"class":206},[134,1763,283],{"class":206},[134,1765,792],{"class":144},[134,1767,272],{"class":206},[134,1769,240],{"class":206},[134,1771,1772,1775,1777,1779,1781,1783],{"class":136,"line":911},[134,1773,1774],{"class":213},"    radius",[134,1776,217],{"class":206},[134,1778,283],{"class":206},[134,1780,809],{"class":144},[134,1782,272],{"class":206},[134,1784,240],{"class":206},[134,1786,1787,1789,1791],{"class":136,"line":938},[134,1788,1108],{"class":213},[134,1790,217],{"class":206},[134,1792,220],{"class":202},[134,1794,1795,1798,1800,1802,1804,1806,1808,1810,1812,1815,1817],{"class":136,"line":966},[134,1796,1797],{"class":206},"      {",[134,1799,832],{"class":213},[134,1801,217],{"class":206},[134,1803,837],{"class":523},[134,1805,280],{"class":206},[134,1807,842],{"class":213},[134,1809,217],{"class":206},[134,1811,283],{"class":206},[134,1813,1814],{"class":144},"线上商城",[134,1816,272],{"class":206},[134,1818,854],{"class":206},[134,1820,1821,1823,1825,1827,1829,1831,1833,1835,1837,1840,1842],{"class":136,"line":972},[134,1822,1797],{"class":206},[134,1824,832],{"class":213},[134,1826,217],{"class":206},[134,1828,866],{"class":523},[134,1830,280],{"class":206},[134,1832,842],{"class":213},[134,1834,217],{"class":206},[134,1836,283],{"class":206},[134,1838,1839],{"class":144},"实体店",[134,1841,272],{"class":206},[134,1843,854],{"class":206},[134,1845,1846,1848,1850,1852,1854,1856,1858,1860,1862,1865,1867],{"class":136,"line":978},[134,1847,1797],{"class":206},[134,1849,832],{"class":213},[134,1851,217],{"class":206},[134,1853,893],{"class":523},[134,1855,280],{"class":206},[134,1857,842],{"class":213},[134,1859,217],{"class":206},[134,1861,283],{"class":206},[134,1863,1864],{"class":144},"代理商",[134,1866,272],{"class":206},[134,1868,963],{"class":206},[134,1870,1871],{"class":136,"line":984},[134,1872,383],{"class":202},[134,1874,1875,1878],{"class":136,"line":991},[134,1876,1877],{"class":206},"  }",[134,1879,1176],{"class":202},[134,1881,1883,1885],{"class":136,"line":1882},40,[134,1884,395],{"class":206},[134,1886,398],{"class":202},[134,1888,1890],{"class":136,"line":1889},41,[134,1891,564],{"emptyLinePlaceholder":563},[134,1893,1895,1897,1899,1901,1903,1905,1907,1909,1911],{"class":136,"line":1894},42,[134,1896,623],{"class":495},[134,1898,1064],{"class":202},[134,1900,499],{"class":206},[134,1902,631],{"class":198},[134,1904,432],{"class":206},[134,1906,636],{"class":140},[134,1908,438],{"class":206},[134,1910,203],{"class":202},[134,1912,207],{"class":206},[134,1914,1916,1918,1920,1922,1924,1926,1928,1931,1933],{"class":136,"line":1915},43,[134,1917,647],{"class":213},[134,1919,217],{"class":206},[134,1921,598],{"class":206},[134,1923,1663],{"class":213},[134,1925,217],{"class":206},[134,1927,283],{"class":206},[134,1929,1930],{"class":144},"月度销售趋势",[134,1932,272],{"class":206},[134,1934,854],{"class":206},[134,1936,1938,1940,1942,1944,1946,1948,1950,1953,1955],{"class":136,"line":1937},44,[134,1939,675],{"class":213},[134,1941,217],{"class":206},[134,1943,598],{"class":206},[134,1945,1685],{"class":213},[134,1947,217],{"class":206},[134,1949,283],{"class":206},[134,1951,1952],{"class":144},"axis",[134,1954,272],{"class":206},[134,1956,854],{"class":206},[134,1958,1960,1962,1964],{"class":136,"line":1959},45,[134,1961,1083],{"class":213},[134,1963,217],{"class":206},[134,1965,251],{"class":206},[134,1967,1969,1971,1973,1975,1977,1979],{"class":136,"line":1968},46,[134,1970,1092],{"class":213},[134,1972,217],{"class":206},[134,1974,283],{"class":206},[134,1976,1099],{"class":144},[134,1978,272],{"class":206},[134,1980,240],{"class":206},[134,1982,1984,1986,1988,1990,1992,1995,1997,1999,2001,2004,2006,2008,2010,2013,2015,2017,2019,2022,2024,2026,2028,2031,2033,2035,2037,2040,2042],{"class":136,"line":1983},47,[134,1985,1108],{"class":213},[134,1987,217],{"class":206},[134,1989,269],{"class":202},[134,1991,272],{"class":206},[134,1993,1994],{"class":144},"1月",[134,1996,272],{"class":206},[134,1998,280],{"class":206},[134,2000,283],{"class":206},[134,2002,2003],{"class":144},"2月",[134,2005,272],{"class":206},[134,2007,280],{"class":206},[134,2009,283],{"class":206},[134,2011,2012],{"class":144},"3月",[134,2014,272],{"class":206},[134,2016,280],{"class":206},[134,2018,283],{"class":206},[134,2020,2021],{"class":144},"4月",[134,2023,272],{"class":206},[134,2025,280],{"class":206},[134,2027,283],{"class":206},[134,2029,2030],{"class":144},"5月",[134,2032,272],{"class":206},[134,2034,280],{"class":206},[134,2036,283],{"class":206},[134,2038,2039],{"class":144},"6月",[134,2041,272],{"class":206},[134,2043,1176],{"class":202},[134,2045,2047],{"class":136,"line":2046},48,[134,2048,670],{"class":206},[134,2050,2052,2054,2056,2058,2060,2062,2064,2066,2068],{"class":136,"line":2051},49,[134,2053,1185],{"class":213},[134,2055,217],{"class":206},[134,2057,598],{"class":206},[134,2059,595],{"class":213},[134,2061,217],{"class":206},[134,2063,283],{"class":206},[134,2065,1200],{"class":144},[134,2067,272],{"class":206},[134,2069,854],{"class":206},[134,2071,2073,2075,2077,2079],{"class":136,"line":2072},50,[134,2074,752],{"class":213},[134,2076,217],{"class":206},[134,2078,269],{"class":202},[134,2080,207],{"class":206},[134,2082,2084,2086,2088,2090,2092,2094,2096,2098,2100,2102,2104,2106,2109,2111,2114,2116],{"class":136,"line":2083},51,[134,2085,1108],{"class":213},[134,2087,217],{"class":206},[134,2089,269],{"class":202},[134,2091,1229],{"class":523},[134,2093,280],{"class":206},[134,2095,1234],{"class":523},[134,2097,280],{"class":206},[134,2099,1239],{"class":523},[134,2101,280],{"class":206},[134,2103,1244],{"class":523},[134,2105,280],{"class":206},[134,2107,2108],{"class":523}," 170",[134,2110,280],{"class":206},[134,2112,2113],{"class":523}," 210",[134,2115,300],{"class":202},[134,2117,240],{"class":206},[134,2119,2121,2123,2125,2127,2129],{"class":136,"line":2120},52,[134,2122,1092],{"class":213},[134,2124,217],{"class":206},[134,2126,283],{"class":206},[134,2128,1274],{"class":144},[134,2130,231],{"class":206},[134,2132,2134,2136],{"class":136,"line":2133},53,[134,2135,1877],{"class":206},[134,2137,1176],{"class":202},[134,2139,2141,2143],{"class":136,"line":2140},54,[134,2142,395],{"class":206},[134,2144,398],{"class":202},[134,2146,2148,2150,2152],{"class":136,"line":2147},55,[134,2149,468],{"class":206},[134,2151,571],{"class":213},[134,2153,452],{"class":206},[117,2155,2156],{"id":2156},"常见问题",[2158,2159,2161],"h3",{"id":2160},"图表不显示或报错","图表不显示或报错？",[2163,2164,2165,2172,2178],"ol",{},[2166,2167,2168,2169,2171],"li",{},"确认在",[112,2170,163],{},"中声明了对应的图表类型和组件",[2166,2173,2174,2175,2177],{},"检查是否使用了",[112,2176,419],{},"包裹",[2166,2179,2180],{},"确保为图表容器设置了明确的高度",[2158,2182,2184],{"id":2183},"如何响应式调整图表大小","如何响应式调整图表大小？",[125,2186,2188],{"className":423,"code":2187,"language":425,"meta":130,"style":130},"\u003Cscript setup lang=\"ts\">\nconst chartRef = ref()\n\n// 监听窗口大小变化\nuseEventListener('resize', () => {\n  chartRef.value?.resize()\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cclient-only>\n    \u003CVChart ref=\"chartRef\" :option=\"option\" style=\"height: 400px;\" />\n  \u003C/client-only>\n\u003C/template>\n",[112,2189,2190,2210,2224,2228,2233,2257,2274,2280,2288,2292,2300,2308,2355,2363],{"__ignoreMap":130},[134,2191,2192,2194,2196,2198,2200,2202,2204,2206,2208],{"class":136,"line":137},[134,2193,432],{"class":206},[134,2195,571],{"class":213},[134,2197,574],{"class":495},[134,2199,577],{"class":495},[134,2201,499],{"class":206},[134,2203,502],{"class":206},[134,2205,184],{"class":144},[134,2207,502],{"class":206},[134,2209,452],{"class":206},[134,2211,2212,2214,2217,2219,2221],{"class":136,"line":210},[134,2213,623],{"class":495},[134,2215,2216],{"class":202}," chartRef ",[134,2218,499],{"class":206},[134,2220,631],{"class":198},[134,2222,2223],{"class":202},"()\n",[134,2225,2226],{"class":136,"line":223},[134,2227,564],{"emptyLinePlaceholder":563},[134,2229,2230],{"class":136,"line":234},[134,2231,2232],{"class":257},"// 监听窗口大小变化\n",[134,2234,2235,2238,2240,2242,2245,2247,2249,2252,2255],{"class":136,"line":243},[134,2236,2237],{"class":198},"useEventListener",[134,2239,203],{"class":202},[134,2241,272],{"class":206},[134,2243,2244],{"class":144},"resize",[134,2246,272],{"class":206},[134,2248,280],{"class":206},[134,2250,2251],{"class":206}," ()",[134,2253,2254],{"class":495}," =>",[134,2256,251],{"class":206},[134,2258,2259,2262,2265,2267,2270,2272],{"class":136,"line":254},[134,2260,2261],{"class":202},"  chartRef",[134,2263,2264],{"class":206},".",[134,2266,1200],{"class":202},[134,2268,2269],{"class":206},"?.",[134,2271,2244],{"class":198},[134,2273,2223],{"class":213},[134,2275,2276,2278],{"class":136,"line":261},[134,2277,395],{"class":206},[134,2279,398],{"class":202},[134,2281,2282,2284,2286],{"class":136,"line":305},[134,2283,468],{"class":206},[134,2285,571],{"class":213},[134,2287,452],{"class":206},[134,2289,2290],{"class":136,"line":311},[134,2291,564],{"emptyLinePlaceholder":563},[134,2293,2294,2296,2298],{"class":136,"line":321},[134,2295,432],{"class":206},[134,2297,435],{"class":213},[134,2299,452],{"class":206},[134,2301,2302,2304,2306],{"class":136,"line":334},[134,2303,446],{"class":206},[134,2305,479],{"class":213},[134,2307,452],{"class":206},[134,2309,2310,2312,2314,2316,2318,2320,2323,2325,2327,2329,2331,2333,2335,2337,2339,2341,2343,2345,2347,2349,2351,2353],{"class":136,"line":346},[134,2311,457],{"class":206},[134,2313,489],{"class":213},[134,2315,631],{"class":495},[134,2317,499],{"class":206},[134,2319,502],{"class":206},[134,2321,2322],{"class":144},"chartRef",[134,2324,502],{"class":206},[134,2326,492],{"class":206},[134,2328,496],{"class":495},[134,2330,499],{"class":206},[134,2332,502],{"class":206},[134,2334,496],{"class":202},[134,2336,502],{"class":206},[134,2338,509],{"class":495},[134,2340,499],{"class":206},[134,2342,502],{"class":206},[134,2344,517],{"class":516},[134,2346,520],{"class":206},[134,2348,524],{"class":523},[134,2350,527],{"class":206},[134,2352,502],{"class":206},[134,2354,532],{"class":206},[134,2356,2357,2359,2361],{"class":136,"line":358},[134,2358,546],{"class":206},[134,2360,479],{"class":213},[134,2362,452],{"class":206},[134,2364,2365,2367,2369],{"class":136,"line":370},[134,2366,468],{"class":206},[134,2368,435],{"class":213},[134,2370,452],{"class":206},[117,2372,2373],{"id":2373},"参考资源",[2375,2376,2377,2386],"ul",{},[2166,2378,2379,2380],{},"官方文档：",[2381,2382,2383],"a",{"href":2383,"rel":2384},"https://echarts.nuxt.dev/",[2385],"nofollow",[2166,2387,2388,2389],{},"ECharts配置项手册：",[2381,2390,2391],{"href":2391,"rel":2392},"https://echarts.apache.org/zh/option.html",[2385],[108,2394,2395],{},"通过以上步骤，你就可以在Nuxt项目中轻松集成和使用ECharts图表了！",[2397,2398,2399],"blockquote",{},[108,2400,2401],{},"（注：文档内容由 Copilot 生成）",[2403,2404,2405],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":130,"searchDepth":210,"depth":210,"links":2407},[2408,2409,2410,2411,2412,2413,2417],{"id":119,"depth":210,"text":120},{"id":167,"depth":210,"text":168},{"id":412,"depth":210,"text":413},{"id":1019,"depth":210,"text":1020},{"id":1293,"depth":210,"text":1293},{"id":2156,"depth":210,"text":2156,"children":2414},[2415,2416],{"id":2160,"depth":223,"text":2161},{"id":2183,"depth":223,"text":2184},{"id":2373,"depth":210,"text":2373},"2026-01-20T00:00:00.000Z","详细介绍如何在Nuxt 4项目中集成nuxt-echarts模块并实现ECharts图表的完整步骤和注意事项。","md",{"src":2422},"https://picsum.photos/id/180/640/360",{},{"title":80,"description":2419},"cZO2AE4w-lmCLbMuOUZOnPbRphIXXOYXWMc2RhGRFfE",[2427,2429],{"title":76,"path":77,"stem":78,"description":2428,"children":-1},"将 Nuxt 设置为非 SSR（ssr: false）并部署后出现 `/_payload.json` 无法加载的解决方法。",{"title":84,"path":85,"stem":86,"description":2430,"children":-1},"在 UniApp+Vite 框架中集成 Reown 和 Wagmi 时遇到的打包、兼容性、RPC 访问等常见问题及完整解决方案。",1774239529512]