专栏首页前端说吧vue-echarts在vue中的使用

vue-echarts在vue中的使用

安装依赖:

【win】npm install echarts vue-echarts
【mac】sudo npm install echarts vue-echarts

Vue-ECharts 默认在 webpack 环境下会引入未编译的源码版本,Vue CLI 创建项目可能会遇到默认配置把 node_modules 中的文件排除在 Babel 转译范围以外的问题。 修复方法是在vue.config.js中添加如下代码:

1 // For Vue CLI 3+, add vue-echarts and resize-detector into transpileDependencies in vue.config.js like this:
2 transpileDependencies: [
3     'vue-echarts',
4     'resize-detector'
5 ]

引入:

import ECharts from 'vue-echarts'

各零件按需加载,手动引入 ECharts 各模块来减小打包体积:

import "echarts/lib/chart/line"; // 线图
import "echarts/lib/chart/bar"; // 柱图
import 'echarts/lib/component/legend' // 图例
import 'echarts/lib/component/tooltip' //提示框

etc...

注册:

Vue.component('myEchart', ECharts)

使用组件:

<myEchart :options="echartsOptions" ref="myCharts" />

vue-echarts的options设置基本同echarts,配置文档看echarts官网即可。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • echarts - 使用echarts过程中遇到的问题(pending...)

    现象描述:有一个tabs选项卡,每个切换项A、B中都有使用echarts,默认展示的A项中的ecarts初始化和绘制都没问题。

    xing.org1^
  • 【python系统学习14】类的继承与创新

    也就是说,通过类的继承,可以让子类拥有父类拥有的所有属性和方法。 这样,很多基础代码不用再重复书写,就可以直接实现代码的复用

    xing.org1^
  • vue工具 - vue/cli@3.xx 安装使用流程

    xing.org1^
  • 百度Echarts图表在Vue项目的完整引入以及按需加载

    近日在项目中需要进行图表展示,百度的Echarts图表是非常合适的一个选择。项目是vue-cli搭建的,如何在项目中引入Echarts就是一个问题了。亲自动手实...

    胡哥有话说
  • Vue:在Vue中使用echarts

    MrTreasure
  • echarts - 使用echarts过程中遇到的问题(pending...)

    现象描述:有一个tabs选项卡,每个切换项A、B中都有使用echarts,默认展示的A项中的ecarts初始化和绘制都没问题。

    xing.org1^
  • vue2.0 使用echarts

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

    余生
  • 在vue-cli项目中使用echarts

    这个示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm in...

    李文杨
  • 如何在 Vue 项目中使用 echarts

    数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,为什么选择 ech...

    六小登登
  • 腾讯安全发布民航业信息安全解决方案,解决航空公司这四大痛点

    近年来,云计算、大数据、人工智能等新技术不断进步,并与民航技术结合实现融合发展。国际民航的信息化、协同化、智能化已成趋势。同时,民航系统信息安全建设的重要性也...

    云鼎实验室

扫码关注云+社区

领取腾讯云代金券