VUE工作笔记3--引入echarts

最新推荐文章于 2024-12-13 23:52:41 发布

原创最新推荐文章于 2024-12-13 23:52:41 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

VUE 同时被 2 个专栏收录

19 篇文章

订阅专栏

echarts

1 篇文章

订阅专栏

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

下载：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的相对路径'