[ECharts]"echarts/config" is not exists

本文解决了一个关于Echarts图表配置加载的问题,详细介绍了如何正确放置require('echarts/config')语句,以避免出现echarts/config is not exists错误。

今天在给Echarts折线图中的数据点增加点击事件的时候总是出现一个

Uncaught Error: [MODULE_MISS]"echarts/config" is not exists!错误


查找了半天才明白是什么原因,这个错误引起的原因是下面这段代码的位置

var ecConfig = require('echarts/config');


开始的时候我总是把它放在全局变量中,我们Echarts的模板中一般是这样的

require(
				[
					'echarts',
					'echarts/chart/line' // 使用柱状图就加载bar模块,按需加载
				],
				function (ec) {
				
					// 基于准备好的dom,初始化echarts图表
					var myChart = ec.init(document.getElementById('main')); 
					
					// 过渡---------------------
					myChart.showLoading({
						text: '正在努力的读取数据中...',    
					});
									
				options = {...}
				....
}

我把
var ecConfig = require('echarts/config');

这段代码放在了require外边,所以总是报错。


调整之后应该是放在 function(ec){..}中,类似下面的代码结构

require(
				[
					'echarts',
					'echarts/chart/line' // 使用柱状图就加载bar模块,按需加载
				],
				function (ec) {
					var ecConfig = require('echarts/config'); //我在这里
					
					// 基于准备好的dom,初始化echarts图表
					var myChart = ec.init(document.getElementById('main')); 
					
					// 过渡---------------------
					myChart.showLoading({
						text: '正在努力的读取数据中...',    
					});
									
				options = {...}
				....
}

这样的话加载就没有问题了,也可以正常的监听事件了, 这个应该和require的用法有很大关系,由于前端功底比较差才导致这种错误,以后要小心。

本文出自 orangleliu笔记本 博客,请务必保留此出处http://blog.csdn.net/orangleliu/article/details/39554001



npm run build > arco-design-pro-vue@1.0.0 build > vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts src/components/menu/index.vue:102:19 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 102 <a-sub-menu ~~~~~~~~~~~ 103 key={element?.name} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ... 107 }} ~~~~~~~~~~~~~~~~~~~~~~ 108 > ~~~~~~~~~~~~~~~~~~~ src/components/menu/index.vue:110:19 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 110 </a-sub-menu> ~~~~~~~~~~~~~ src/components/menu/index.vue:112:19 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 112 <a-menu-item ~~~~~~~~~~~~ 113 key={element?.name} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ... 115 onClick={() => goto(element)} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 116 > ~~~~~~~~~~~~~~~~~~~ src/components/menu/index.vue:118:19 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 118 </a-menu-item> ~~~~~~~~~~~~~~ src/components/menu/index.vue:129:9 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 129 <a-menu ~~~~~~~ 130 mode={topMenu.value ? 'horizontal' : 'vertical'} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ... 139 onCollapse={setCollapse} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 140 > ~~~~~~~~~ src/components/menu/index.vue:142:9 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 142 </a-menu> ~~~~~~~~~ src/views/form/group/index.vue:254:32 - error TS7016: Could not find a declaration file for module '@arco-design/web-vue/es/form'. '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@arco-design_web-vue@2.57.0@@arco-design/web-vue/es/form/index.js' implicitly has an 'any' type. If the '@arco-design/web-vue' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module '@arco-design/web-vue/es/form';` 254 import { FormInstance } from '@arco-design/web-vue/es/form'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/form/step/components/base-info.vue:90:32 - error TS7016: Could not find a declaration file for module '@arco-design/web-vue/es/form'. '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@arco-design_web-vue@2.57.0@@arco-design/web-vue/es/form/index.js' implicitly has an 'any' type. If the '@arco-design/web-vue' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module '@arco-design/web-vue/es/form';` 90 import { FormInstance } from '@arco-design/web-vue/es/form'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/form/step/components/channel-info.vue:100:32 - error TS7016: Could not find a declaration file for module '@arco-design/web-vue/es/form'. '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@arco-design_web-vue@2.57.0@@arco-design/web-vue/es/form/index.js' implicitly has an 'any' type. If the '@arco-design/web-vue' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module '@arco-design/web-vue/es/form';` 100 import { FormInstance } from '@arco-design/web-vue/es/form'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/user/setting/components/basic-information.vue:130:32 - error TS7016: Could not find a declaration file for module '@arco-design/web-vue/es/form'. '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@arco-design_web-vue@2.57.0@@arco-design/web-vue/es/form/index.js' implicitly has an 'any' type. If the '@arco-design/web-vue' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module '@arco-design/web-vue/es/form';` 130 import { FormInstance } from '@arco-design/web-vue/es/form'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/visualization/data-analysis/components/chain-item.vue:43:44 - error TS2345: Argument of type '() => { grid: { left: number; right: number; top: number; bottom: number; }; xAxis: { type: "category"; show: false; }; yAxis: { show: false; }; tooltip: { show: true; trigger: "axis"; }; series: { name: string; data: Ref<...>; type: "bar"; barWidth: number; itemStyle: { ...; }; }; }' is not assignable to parameter of type 'optionsFn'. Call signature return types '{ grid: { left: number; right: number; top: number; bottom: number; }; xAxis: { type: "category"; show: false; }; yAxis: { show: false; }; tooltip: { show: true; trigger: "axis"; }; series: { name: string; data: Ref<any, any>; type: "bar"; barWidth: number; itemStyle: { ...; }; }; }' and 'EChartsOption' are incompatible. The types of 'series' are incompatible between these types. Type '{ name: string; data: Ref<any, any>; type: "bar"; barWidth: number; itemStyle: { borderRadius: number; }; }' is not assignable to type 'SeriesOption$1 | SeriesOption$1[] | undefined'. Type '{ name: string; data: Ref<any, any>; type: "bar"; barWidth: number; itemStyle: { borderRadius: number; }; }' is not assignable to type 'PictorialBarSeriesOption$1'. Type '{ name: string; data: Ref<any, any>; type: "bar"; barWidth: number; itemStyle: { borderRadius: number; }; }' is not assignable to type 'PictorialBarSeriesOption'. Types of property 'type' are incompatible. Type '"bar"' is not assignable to type '"pictorialBar"'. 43 const { chartOption } = useChartOption(() => { ~~~~~~~ src/views/visualization/data-analysis/components/chain-item.vue:135:44 - error TS2345: Argument of type '() => { grid: { left: number; right: number; top: number; bottom: number; }; legend: { show: true; top: string; right: string; orient: "vertical"; icon: string; itemWidth: number; itemHeight: number; textStyle: { ...; }; }; tooltip: { ...; }; series: { ...; }[]; }' is not assignable to parameter of type 'optionsFn'. Call signature return types '{ grid: { left: number; right: number; top: number; bottom: number; }; legend: { show: true; top: string; right: string; orient: "vertical"; icon: string; itemWidth: number; itemHeight: number; textStyle: { ...; }; }; tooltip: { ...; }; series: { ...; }[]; }' and 'EChartsOption' are incompatible. The types of 'series' are incompatible between these types. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }[]' is not assignable to type 'SeriesOption$1 | SeriesOption$1[] | undefined'. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }[]' is not assignable to type 'SeriesOption$1[]'. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }' is not assignable to type 'SeriesOption$1'. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }' is not assignable to type 'PieSeriesOption$1'. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }' is not assignable to type 'PieSeriesOption'. Types of property 'data' are incompatible. Type 'Ref<any, any>' is missing the following properties from type '(OptionDataValueNumeric | OptionDataValueNumeric[] | PieDataItemOption)[]': length, pop, push, concat, and 28 more. 135 const { chartOption } = useChartOption(() => { ~~~~~~~ src/views/visualization/multi-dimension-data-analysis/components/data-overview.vue:54:39 - error TS18049: 'el.value' is possibly 'null' or 'undefined'. 54 <span class="tooltip-value">${el.value.toLocaleString()}</span> ~~~~~~~~ Found 13 errors in 7 files. Errors Files 6 src/components/menu/index.vue:102 1 src/views/form/group/index.vue:254 1 src/views/form/step/components/base-info.vue:90 1 src/views/form/step/components/channel-info.vue:100 1 src/views/user/setting/components/basic-information.vue:130 2 src/views/visualization/data-analysis/components/chain-item.vue:43 1 src/views/visualization/multi-dimension-data-analysis/components/data-overview.vue:54 ✘ lixiang@lixiangdeMacBook-Pro  ~/Desktop/xingwangtoubiao1   main  ^[[200~npm install --legacy-peer-deps 200~npm install --legacy-peer-deps200~npmzsh: bad pattern: ^[[200~npm ✘ lixiang@lixiangdeMacBook-Pro  ~/Desktop/xingwangtoubiao1   main  npm install --legacy-peer-deps npm ERR! code EACCES npm ERR! syscall rename npm ERR! path /Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@babel_code-frame@7.27.1@@babel npm ERR! dest /Users/lixiang/Desktop/xingwangtoubiao1/node_modules/._@babel_code-frame@7.27.1@@babel-Ap5lTVgv npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, rename '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@babel_code-frame@7.27.1@@babel' -> '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/._@babel_code-frame@7.27.1@@babel-Ap5lTVgv' npm ERR! [Error: EACCES: permission denied, rename '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@babel_code-frame@7.27.1@@babel' -> '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/._@babel_code-frame@7.27.1@@babel-Ap5lTVgv'] { npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'rename', npm ERR! path: '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@babel_code-frame@7.27.1@@babel', npm ERR! dest: '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/._@babel_code-frame@7.27.1@@babel-Ap5lTVgv' npm ERR! } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It is likely you do not have the permissions to access this file as the current user npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator. npm ERR! A complete log of this run can be found in: npm ERR! /Users/lixiang/.npm/_logs/2025-07-21T04_18_16_919Z-debug-0.log ✘ lixiang@lixiangdeMacBook-Pro  ~/Desktop/xingwangtoubiao1   main  npm run build > arco-design-pro-vue@1.0.0 build > vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts src/components/menu/index.vue:102:19 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 102 <a-sub-menu ~~~~~~~~~~~ 103 key={element?.name} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ... 107 }} ~~~~~~~~~~~~~~~~~~~~~~ 108 > ~~~~~~~~~~~~~~~~~~~ src/components/menu/index.vue:110:19 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 110 </a-sub-menu> ~~~~~~~~~~~~~ src/components/menu/index.vue:112:19 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 112 <a-menu-item ~~~~~~~~~~~~ 113 key={element?.name} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ... 115 onClick={() => goto(element)} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 116 > ~~~~~~~~~~~~~~~~~~~ src/components/menu/index.vue:118:19 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 118 </a-menu-item> ~~~~~~~~~~~~~~ src/components/menu/index.vue:129:9 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 129 <a-menu ~~~~~~~ 130 mode={topMenu.value ? 'horizontal' : 'vertical'} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ... 139 onCollapse={setCollapse} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 140 > ~~~~~~~~~ src/components/menu/index.vue:142:9 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 142 </a-menu> ~~~~~~~~~ src/views/form/group/index.vue:254:32 - error TS7016: Could not find a declaration file for module '@arco-design/web-vue/es/form'. '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@arco-design_web-vue@2.57.0@@arco-design/web-vue/es/form/index.js' implicitly has an 'any' type. If the '@arco-design/web-vue' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module '@arco-design/web-vue/es/form';` 254 import { FormInstance } from '@arco-design/web-vue/es/form'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/form/step/components/base-info.vue:90:32 - error TS7016: Could not find a declaration file for module '@arco-design/web-vue/es/form'. '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@arco-design_web-vue@2.57.0@@arco-design/web-vue/es/form/index.js' implicitly has an 'any' type. If the '@arco-design/web-vue' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module '@arco-design/web-vue/es/form';` 90 import { FormInstance } from '@arco-design/web-vue/es/form'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/form/step/components/channel-info.vue:100:32 - error TS7016: Could not find a declaration file for module '@arco-design/web-vue/es/form'. '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@arco-design_web-vue@2.57.0@@arco-design/web-vue/es/form/index.js' implicitly has an 'any' type. If the '@arco-design/web-vue' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module '@arco-design/web-vue/es/form';` 100 import { FormInstance } from '@arco-design/web-vue/es/form'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/user/setting/components/basic-information.vue:130:32 - error TS7016: Could not find a declaration file for module '@arco-design/web-vue/es/form'. '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@arco-design_web-vue@2.57.0@@arco-design/web-vue/es/form/index.js' implicitly has an 'any' type. If the '@arco-design/web-vue' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module '@arco-design/web-vue/es/form';` 130 import { FormInstance } from '@arco-design/web-vue/es/form'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/visualization/data-analysis/components/chain-item.vue:43:44 - error TS2345: Argument of type '() => { grid: { left: number; right: number; top: number; bottom: number; }; xAxis: { type: "category"; show: false; }; yAxis: { show: false; }; tooltip: { show: true; trigger: "axis"; }; series: { name: string; data: Ref<...>; type: "bar"; barWidth: number; itemStyle: { ...; }; }; }' is not assignable to parameter of type 'optionsFn'. Call signature return types '{ grid: { left: number; right: number; top: number; bottom: number; }; xAxis: { type: "category"; show: false; }; yAxis: { show: false; }; tooltip: { show: true; trigger: "axis"; }; series: { name: string; data: Ref<any, any>; type: "bar"; barWidth: number; itemStyle: { ...; }; }; }' and 'EChartsOption' are incompatible. The types of 'series' are incompatible between these types. Type '{ name: string; data: Ref<any, any>; type: "bar"; barWidth: number; itemStyle: { borderRadius: number; }; }' is not assignable to type 'SeriesOption$1 | SeriesOption$1[] | undefined'. Type '{ name: string; data: Ref<any, any>; type: "bar"; barWidth: number; itemStyle: { borderRadius: number; }; }' is not assignable to type 'PictorialBarSeriesOption$1'. Type '{ name: string; data: Ref<any, any>; type: "bar"; barWidth: number; itemStyle: { borderRadius: number; }; }' is not assignable to type 'PictorialBarSeriesOption'. Types of property 'type' are incompatible. Type '"bar"' is not assignable to type '"pictorialBar"'. 43 const { chartOption } = useChartOption(() => { ~~~~~~~ src/views/visualization/data-analysis/components/chain-item.vue:135:44 - error TS2345: Argument of type '() => { grid: { left: number; right: number; top: number; bottom: number; }; legend: { show: true; top: string; right: string; orient: "vertical"; icon: string; itemWidth: number; itemHeight: number; textStyle: { ...; }; }; tooltip: { ...; }; series: { ...; }[]; }' is not assignable to parameter of type 'optionsFn'. Call signature return types '{ grid: { left: number; right: number; top: number; bottom: number; }; legend: { show: true; top: string; right: string; orient: "vertical"; icon: string; itemWidth: number; itemHeight: number; textStyle: { ...; }; }; tooltip: { ...; }; series: { ...; }[]; }' and 'EChartsOption' are incompatible. The types of 'series' are incompatible between these types. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }[]' is not assignable to type 'SeriesOption$1 | SeriesOption$1[] | undefined'. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }[]' is not assignable to type 'SeriesOption$1[]'. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }' is not assignable to type 'SeriesOption$1'. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }' is not assignable to type 'PieSeriesOption$1'. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }' is not assignable to type 'PieSeriesOption'. Types of property 'data' are incompatible. Type 'Ref<any, any>' is missing the following properties from type '(OptionDataValueNumeric | OptionDataValueNumeric[] | PieDataItemOption)[]': length, pop, push, concat, and 28 more. 135 const { chartOption } = useChartOption(() => { ~~~~~~~ src/views/visualization/multi-dimension-data-analysis/components/data-overview.vue:54:39 - error TS18049: 'el.value' is possibly 'null' or 'undefined'. 54 <span class="tooltip-value">${el.value.toLocaleString()}</span> ~~~~~~~~ Found 13 errors in 7 files. Errors Files 6 src/components/menu/index.vue:102 1 src/views/form/group/index.vue:254 1 src/views/form/step/components/base-info.vue:90 1 src/views/form/step/components/channel-info.vue:100 1 src/views/user/setting/components/basic-information.vue:130 2 src/views/visualization/data-analysis/components/chain-item.vue:43 1 src/views/visualization/multi-dimension-data-analysis/components/data-overview.vue:54
最新发布
07-22
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值