位置: 编程技术 - 正文

在vue中添加Echarts图表的基本使用教程(在vue中添加按钮使内容消失)

编辑:rootadmin

推荐整理分享在vue中添加Echarts图表的基本使用教程(在vue中添加按钮使内容消失),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue中引入echarts,vue加echarts,vue加echarts,vue3引入echarts,vue3引入echarts,在vue中添加按钮使内容消失,vue项目中引入echarts,在vue中添加按钮使内容消失,内容如对您有帮助,希望把文章链接给更多的朋友!

前言

我们在项目中经常需要使用一些折线图、柱状图、饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网

现在的前端一般需要完成将大量的数据,实现可视化。现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势。而ECharts和d3.js则是可视化的成熟框架。对于制作的图表可以说是满足你的创造力。

两者相比,D3 它被很多其他的表格插件所使用。它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HTML表格,或是利用它的流体过度和交互,用相似的数据创建惊人的SVG条形图。

而ECharts图表更加的适合应用,具备华丽的外衣,但很实用。

ECharts的基本模板非常简单,相对d3上手容易。

Echarts图表的基本使用

在vue中添加Echarts图表的基本使用教程(在vue中添加按钮使内容消失)

1.在vue-cli项目中添加webpack配置,本文引入的最新版本。在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package。

使用npm添加package.json文件中的配置并下载相关npm包依赖

然后在项目文件的入口js文件main.js中添加

在需要添加图标的组件中创建依赖的实例

使用这种方式得到的是已经加载了所有图表和组件的 ECharts 包,因此体积会比较大。也可以只按需引入需要的模块。例如

各种资源的列表详情请查阅官网的github仓库 支持常规的鼠标事件类型,包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout' 事件。

// 指定图表的配置项和数据

// 使用刚指定的配置项和数据显示图表。

所有的鼠标事件包含参数 params,这是一个包含点击图形的数据信息的对象,如下格式:

如何区分鼠标点击到了哪里:

你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息候更新图表,显示浮层等等,如下示例代码:

总结

标签: 在vue中添加按钮使内容消失

本文链接地址:https://www.jiuchutong.com/biancheng/377423.html 转载请保留说明!

上一篇:vue.js模仿京东省市区三级联动的选择组件实例代码(京东试用js脚本)

下一篇:浅谈Vuex@2.3.0 中的 state 支持函数申明(vue中的vuex)

  • 财务软件应交增值税明细科目
  • 企业银行贷款报表要求
  • 金税四期对建筑的影响
  • 话费充值发票可以入账吗
  • 未经过他人同意贷款怎么处理
  • 增值税与普通发票的关系
  • 应收帐款坏帐损失摘要
  • 投资活动购建固定资产
  • 股权的溢价是什么意思
  • 零报税报表怎么下载
  • 发票已认证部分怎么撤销
  • 工会经费向地方税务局缴纳的比例是多少
  • 餐饮发票怎么进行财税处理?
  • 总账科目和明细科目有哪些
  • 累计折旧属于什么
  • 零申报做账怎么做
  • 小规模计提缴纳增值税
  • 企业所得税法如何确认应税收入
  • 工程发票开具所需资料有什么?
  • 激活windows转到设置以激活windows怎么消除
  • 生产税有哪些
  • 公司增资扩股需要考略公司资产吗
  • php 面向对象
  • 建筑业成本核算表格百度网盘
  • 商贸企业销售会计分录
  • 黑枣的功效与作用图片
  • 微软系统安装软件
  • 如果企业亏损要交企业所得税吗
  • 黄喉蜂虎鸟是保护动物吗
  • 心形岛屿叫什么名字
  • 土地增值税扣除项目税金包括哪些
  • bp-神经网络
  • Vue3+TypeScript+Vite如何使用require动态引入类似于图片等静态资源
  • javaweb.xml配置文件
  • thinkphp钩子场景
  • fold命令 限制文件列宽
  • 未确认融资费用报表填在哪个科目
  • 结转损益的凭证需要打印吗
  • 正规现金收款收据怎么写
  • 发票没拿回来可以报销吗
  • 企业福利费超过预算收入
  • 全面理解健康教案
  • 自产自用车辆购置税组成计税价格
  • 生产企业免抵退是什么意思
  • 公允价值进行会计计量
  • 经营性现金净流量公式
  • 固定资产未转固属于什么问题
  • 零余额账户用款额度年末转入哪个科目
  • 未实现内部交易损益是什么意思
  • 公司配股对股价的影响
  • 公司员工借款后还款收据怎么填
  • 应收账款期初余额错了怎么调整
  • 其他公司借款现金怎么办
  • 开具的增值税专用发票上注明的价款含税吗
  • 确定固定资产的标准
  • 联营企业和子公司哪个好
  • SQL Server中使用Trigger监控存储过程更改脚本实例
  • mysqldump -s
  • 类似wps office的手机软件
  • win10 bios模式
  • windows server 2003如何安装
  • 找回未保存的cad文件
  • linux修改yum
  • linux vmtool
  • linux find . -name命令
  • linux更新内核的好处
  • win8网络图标不显示
  • win10系统自带的浏览器叫什么
  • windows 10 mobile--移动版
  • win10应用商店叫什么
  • win10系统最新更新
  • style=display:inline
  • shell脚本介绍
  • shell编程简单实例
  • android 侧滑页面
  • unity5.4.0
  • 纽约消费税多少
  • 网约车考试全国过了区域没过
  • 浙江省个人医保累计自费多少可以报销
  • 地方公安局归谁管
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设