在Vue中使用echarts的方法

上篇文章给大家介绍了 在 webpack 中使用 ECharts的实例详解，可以点击查看。

1. 使用NPM安装（全局引入）

执行下面的命令：

npm install echarts--save

引入echarts模块

在Vue项目的main.js中引入echarts模块，即是写入如下代码：

import echarts from 'echarts'
Vue.prototype.$echarts = echarts；

2. 按需引入

上面全局引入会将所有的echarts图表打包，导致体积过大，我解决这一问题，可以使用require按需引入即是需要什么就引入什么：

即是：

let echarts = require('echarts/lib/echarts')

3. 直接引用

在index.html文件中全局引入，使用script标签引入

<script src="/static/js/echarts/echarts.js"></script>

注意：src中写入echarts的路径；

然后再vue项目build目录下找到webpack.base.conf.js，配置文件，在module.exports对象中添加externals属性，然后配置echarts所在的路径：

module.exports = {
.....
externals: {
// 路径：命名空间
 'echarts/dist/echarts':'echarts',
}
}；

总结

以上所述是小编给大家介绍的在Vue中使用echarts的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

  • vue+vuex+axios+echarts画一个动态更新的中国地图的方法
  • vue在使用ECharts时的异步更新和数据加载详解
  • 在vue中添加Echarts图表的基本使用教程
  • 在Vue中使用echarts的实例代码（3种图）
  • vue.js+Echarts开发图表放大缩小功能实例
  • Vue2 使用 Echarts 创建图表实例代码
  • 详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）
赞 (0)

相关推荐

  • 详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）

    详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）

    数据可视化 将数据通过图表的形式展现出来将大大的提升可读性和阅读效率 本例包含柱状图.折线图.散点图.热力图.复杂柱状图.预览面板等 技术栈 vue2.x vuex 存储公共变量,如色值等 vue-router 路由 element-ui 饿了么基于vue2开发组件库,本例使用了其中的datePicker echarts 一款丰富的图表库 webpack.ES6.Babel.Stylus... 项目截图 开发 组件化 本项目完全采用组件化的思想进行开发.使用vue-router作为路由,每个页面

  • Vue2 使用 Echarts 创建图表实例代码

    在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts,  Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 cnpm 安装 Echarts cnpm install echarts -S 和之前介绍的 axios 类似,echarts 也不能通过 Vue.use() 进行全局调用 通常是在需要使用图表的 .vue 文件中直接引入 import echarts from 'echarts' 也可以在 main

  • vue+vuex+axios+echarts画一个动态更新的中国地图的方法

    vue+vuex+axios+echarts画一个动态更新的中国地图的方法

    本文介绍了vue+vuex+axios+echarts画一个动态更新的中国地图的方法,分享给大家,具体如下: 一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china-map # 安装项目依赖 npm install # 安装 vuex npm install vuex --save # 安装 axios npm install axios --save

  • vue.js+Echarts开发图表放大缩小功能实例

    vue.js+Echarts开发图表放大缩小功能实例

    最近使用echarts来开发某系统的图表功能,先申明我以前用的ext.js,ext.js对图表有自己的一套组件,用起来也很方便.但是由于ext.js过于臃肿,公司决定使用echarts来开发图表功能.当我们使用的时候才悲催的发现,echart绘制之后,不能随着容器div的大小而变化.而我们所开发的图表是需要有放大缩小功能,于是在网上找了很久,也没有找到合适的答案,大部分是通过监听窗口大小改变事件来设置,然而并不是我们所需要的.于是自己用了一点点时间,了解了为何echarts不能重新渲染,原来是在

  • 在Vue中使用echarts的实例代码（3种图）

    在Vue中使用echarts的实例代码（3种图）

    前言 公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用它定制好的数据结构,我也没办法对他进行一些修改.我个人也偏向于原生JS编程,因此没有采用,而是自己在vue中实现了对数据的可视化处理,先来看看效果图 以下数据已做脱敏处理 这是目前用到的三种图. 可以看到,我在图表的外部添加了标题及说明,以及右侧的选择框组件,视图可以根据选择的不同,图表进行动态切换

  • 在vue中添加Echarts图表的基本使用教程

    在vue中添加Echarts图表的基本使用教程

    前言 我们在项目中经常需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网 现在的前端一般需要完成将大量的数据,实现可视化.现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势.而ECharts和d3.js则是可视化的成熟框架.对于制作的图表可以说是满足你的创造力. 两者相比,D

  • vue在使用ECharts时的异步更新和数据加载详解

    前言 最近在学习eCharts,学习到了异步更新和数据加载这一块,觉着有必要总结一下,方法以后的时候参考学习,在开始本文之前,对eCharts不熟悉的朋友们可以参考下这篇文章:http://www.jb51.net/article/128790.htm  下面话不多说了,来一起看看详细的介绍吧. 使用方法 使用Echarts首先得先把Echarts.js引进来(放在文件的入口html文件里面) <script src="public/js/echarts.common.min.js&quo

  • 在Vue中使用echarts的方法

    上篇文章给大家介绍了 在 webpack 中使用 ECharts的实例详解,可以点击查看. 1. 使用NPM安装(全局引入) 执行下面的命令: npm install echarts--save 引入echarts模块 在Vue项目的main.js中引入echarts模块,即是写入如下代码: import echarts from 'echarts' Vue.prototype.$echarts = echarts: 2. 按需引入 上面全局引入会将所有的echarts图表打包,导致体积过大,我

  • 在vue中使用echarts的方法以及可能遇到的问题

    在vue中使用echarts的方法以及可能遇到的问题

    目录 1.安装 2.在vue中引入(全局引入) 3.在vue中的使用 4.模板代码放在哪个位置 5.完整的一个vue页面实例: 6.实现效果 7.可能遇到的问题,下载不成功.使用 8.11:25-32 "export ‘default’ (imported as ‘echarts’) was not found in 'echarts 总结 1.安装 npm install echarts --save 2.在vue中引入(全局引入) // 引入echarts import echarts fr

  • 在Vue中使用Echarts实例图的方法实例

    前言 由于在项目中需要对数据进行可视化处理,也就是用图表展示,众所周知echarts是非常强大的插件.但是新手猛的上手的话,可能会有点束手无策,所以这篇就是来写一点入门的内容,外加自己一点的小心得. 一.首先要在项目中下载echarts依赖 npm install echarts -S //或者使用淘宝的镜像 cnpm install echarts -S 二.然后就要再main.js文件中来进行全局引入 // 引入echarts import echarts from 'echarts' Vu

  • 详解Vue中使用Echarts的两种方式

    1. 直接引入echarts 先npm安装echarts npm install echarts --save 开发: main.js import myCharts from './comm/js/myCharts.js' Vue.use(myCharts) myCharts.js /** * 各种画echarts图表的方法都封装在这里 */ import echarts from 'echarts' (function() { var chart = {}; chart.install =

  • 在vue中使用Echarts画曲线图的示例

    现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: https://ecomfe.github.io/echarts-doc/public/en/index.html 前端框架使用vue,服务器使用express搭建,交互使用axios. 一.引入vue-resource 通过npm下载vue-resource npm install vue-resou

  • uniapp在微信小程序中使用ECharts的方法

    uniapp在微信小程序中使用ECharts的方法

    今天使用uniapp集成Echarts,实现地图图表的展示 可以参照mpvue-echarts 参照:https://github.com/F-loat/mpvue-echarts https://ask.dcloud.net.cn/article/36288 进行改进 网上有很多教程,但都说的不是很明白,下面直接上步骤 1.npm install echarts mpvue-echarts 执行该命令后,会在node_modules下生成mpvue-echarts.echarts,然后把mpv

  • vue中使用echarts实现动态数据绑定以及获取后端接口数据

    vue中使用echarts实现动态数据绑定以及获取后端接口数据

    目录 前言 1.柱状图 2.折线图 3.饼状图 4.地图 总结 前言 之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单来讲,就是从接口获取到的数据,需要在图表的方法里再次定义一下,然后用setOption方法就可以获取到了. 1.柱状图 首先看接口传过来的数据,传过来一个数组,第一条年度2021,数量1,第二条年度2022,数量3 因为柱状图的数

  • Vue中的echarts图表如何实现loading效果

    Vue中的echarts图表如何实现loading效果

    目录 echarts图表实现loading效果 Vue使用echarts图表总结 安装echarts依赖 创建图表 在页面中的使用(在这里我用的局部引入) echarts图表实现loading效果 main.js 中配置Vue属性ecahrts // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts  data() 初始化数据调用数据 mounted() 周期函数内获取画布节点,并且调用加载loadi

  • vue中设置echarts宽度自适应的代码步骤

    vue中设置echarts宽度自适应的代码步骤

    目录 问题描述 无自适应效果图 有自适应效果图 代码步骤 问题描述 我们使用vue做项目的时候,常常需要做到echarts图表的自适应,一般是根据页面的宽度做对应的适应.本文记录一下设置echarts图表的自适应的步骤.我们先看一下没有做echarts自适应的效果 无自适应效果图 我们发现echarts图的宽度并没有随着页面宽度的变化而变化 有自适应效果图 很显然,这个才是我们想要的效果 代码步骤 echart图表本身提供了一个resize的函数,我们只需要监听页面的resize变化以后,去执行

随机推荐