VUE工作笔记3--引入echarts

最新推荐文章于 2025-05-03 15:15:14 发布

Tansy_big_rabbit

最新推荐文章于 2025-05-03 15:15:14 发布

阅读量209

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE echarts

本文链接：https://blog.youkuaiyun.com/tansy_big_rabbit/article/details/102553674

VUE 同时被 2 个专栏收录

19 篇文章

订阅专栏

echarts

1 篇文章

订阅专栏

本文详细介绍了如何使用npm安装ECharts图表库，并通过按需加载的方式引入所需的图表类型和组件，包括柱状图、折线图、饼图、提示框、标题等。同时，提供了在组件中导入和使用的具体代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载：npm install echarts --save

npm install -g cnpm --registry=https://registry.npm.taobao.org

按需引入echarts模块：

在src下创建echarts文件夹，创建echarts.js:

 // 引入 ECharts 主模块
 var echarts = require('echarts/lib/echarts');
 // 引入柱状图等
 require('echarts/lib/chart/bar');
 require("echarts/lib/chart/line");
 require("echarts/lib/chart/pie");

 // 引入提示框和标题组件
 require('echarts/lib/component/tooltip');
 require('echarts/lib/component/title');
 require("echarts/lib/component/dataZoom");
 require("echarts/lib/component/markPoint");
 require("echarts/lib/component/markLine");
 export default echarts

在组件中的使用：

import echarts from 'echarts.js的相对路径'