如何在vue中使用echart图表,前端开发技术

67 阅读3分钟

以上都是在项目中经常使用到的图标,地图的引入下一期会特别介绍!

echarts中文官网

官网链接点击查看:ECharts

在这里插入图片描述

在这里插入图片描述

其实官网中有在项目中使用的详细步骤,大家也可以通过对官网的学习来使用echarts,毕竟人家比比我介绍的更详细更专业。

echarts在vue项目中实现的步骤

webpack 是目前比较流行的模块打包工具,你可以在使用 webpack 的项目中轻松的引入和打包 ECharts,这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。

第一步:先安装echarts

// npm安装echarts

npm install echarts --save

或者

// 先安装淘宝镜像

npm install -g cnpm --registry=registry.npm.taobao.org

// cnpm安装echarts

cnpm install echarts -S

第二步:在需要的组件中使用echart

个人喜欢把echart.vue单独封装起来,方便使用和复用。先创建一个chartLint.vue文件;

chartLint.vue文件: