使用vue与echarts怎么实现一个数据可视化功能-创新互联

这篇文章给大家介绍使用vue与echarts怎么实现一个数据可视化功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联拥有10多年成都网站建设工作经验,为各大企业提供网站制作、网站设计服务，对于网页设计、PC网站建设（电脑版网站建设）、app软件开发公司、wap网站建设（手机版网站建设）、程序开发、网站优化（SEO优化）、微网站、申请域名等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了很多网站制作、网站设计、网络营销经验，集策划、开发、设计、营销、管理等网站化运作于一体，具备承接各种规模类型的网站建设项目的能力。

获取 ECharts 的路径有以下几种，请根据您的情况进行选择：

1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载，不同的打包下载应用于不同的开发者功能与体积的需求，或者您也可以直接下载完整版本；开发环境建议下载源代码版本，包含了常见的错误提示和警告。
2) 也可以在 ECharts 的 GitHub 上下载新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到新版本的 echarts 库。
3) 或者通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”
由 cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的新版本。

1.先安装依赖

npm install echarts --save

2.1全局引入main.js中配置（不推荐使用，会导致包过大，冗余多）

import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //挂载在原型，组件内使用直接this.$echarts调用

2.2组件内按需引入 ( 推荐使用 )
这种方式很简单，在需要引入图表的组件引入,例如如下引入柱状图。

//在组件引入基本模板
let echarts = require("echarts/lib/echarts");
//在组件引入柱状图组件
require("echarts/lib/chart/bar");

3.全局引入为例，在组件中使用示例

关于使用vue与echarts怎么实现一个数据可视化功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

名称栏目：使用vue与echarts怎么实现一个数据可视化功能-创新互联
标题来源：http://bjjierui.cn/article/ippoc.html