vue引入three.js3维地图_vue-chartjs使用 Chart.js 和 Vue.js 搭建简单和漂亮的图表
简介
vue-chartjs 让你在 Vue 中能更好的使用 Chart.js . 非常适合想要尽快启动和运行简单图表的人。它抽象了一些简单的逻辑, 但是也暴露了 Chart.js 对象, 提供了极大的灵活性。github start 3k+, MIT协议。
DEMO 列表
条形图
折线图
圆图
饼图
雷达图
极地图
气泡图
线图
快速上手
- 安装
你可以在 npm 下安装 vue-chartjs. 当然, 你也需要在项目中安装 chart.js 依赖. 因为 Chart.js是一个 peerDependency. 这种方式你可以完全控制 Chart.js 的版本
yarn add vue-chartjs chart.js or npm install vue-chartjs chart.js --save
- 安装vue 1.x版本
如果你使用的是 vue 1.x 版本, 请使用 legacy 标签. 然而, Vue 1 所支持的版本不再维护了.
yarn add vue-chartjs@legacyornpm install vue-chartjs@legacy
- 浏览器
你也可以直接在浏览器中使用 vue-chartjs. 先添加 Chart.js 脚本, 再添加 vue-chartjs 脚本.
- 创建你自己的第一个图表
你需要引入一个基本图表然后扩展它. 这为处理不同数据时提供了更大的灵活性. 你可以封装你的组件以及使用props来处理数据, 或者你可以直接在组件里输入他们. 当然, 如果那样做, 你的组件就无法复用了.
你可以引入整个项目或者每个模块单独引用. 之后你需要使用extends:或者 mixins:[]. 然后在 mounted() 中调用 this.renderChart(). 这将创建你的图表实例.
import { Bar } from 'vue-chartjs'export default { extends: Bar, mounted () { this.renderChart(data, options) }}
你可以使用 extends: Bar 或者 mixins: [Bar]
this.renderChart() 方法由 Bar 组件提供, 接收两个对象参数.第一个是你的图表数据, 第二个是配置对象.
在这个文档中查看你需要提供的对象结构 Chart.js docs .
- Vue 单文件组件
文档中很多例子都是基于javascript文件 而不是 .vue 文件. 这是因为你大多数只需要
不要使用Template标签
不要在你的 .vue 文件中引入 标签. Vue 无法 合并模板.如果你添加了一个空的 标签, Vue 将会从你的主键里获取模板, 而不会从你 extend 中获取, 这将导致页面为空并报错.
- 更新 Charts
如果你修改了数据集, Chart.js 是不会提供实时更新的. 当然, vue-chartjs 提供了两个 mixins 来实现.
- reactiveProp
- reactiveData
这两个mixins其实实现的是相同的功能. 大多数时间你将会使用reactiveProp. 它扩展了图表组件的逻辑, 并自动创建名为 chartData 的props参数, 并为这个参数添加vue watch. 当数据改变, 如果数据在数据集中改变, 它将调用update(); 如果添加了新的数据集, 它将调用renderChart().
reactiveData 创建一个本地的chartData变量, 不是props参数! 以及创建一个对这个变量的 watcher. 如果你需要单一目的的图表, 以及在图表组件中进行API调用的时候, 这将非常有用.
- 更新 Charts => 例子
LineChart.js
import { Line, mixins } from 'vue-chartjs'const { reactiveProp } = mixinsexport default { extends: Line, mixins: [reactiveProp], props: ['options'], mounted () { // this.chartData 在 mixin 创建. // 如果你需要替换 options , 请创建本地的 options 对象 this.renderChart(this.chartData, this.options) }}
RandomChart.vue
Randomize
限制:Caveats Change-Detection-Caveats vm.$watch
- 事件
如果你的数据改变, 响应式的 mixins 将会触发事件. 你能监听他们通过在图表组件上使用 v:on. 下列是可用的事件:
- chart:render - 如果 mixin 执行完全重绘
- chart:destroy - 如果 mixin 删除图表对象实例
- chart:update - 如果 mixin 执行更新而不是重绘
- labels:update - 如果设置了新的labels
- xlabels:update 如果设置了新的xLabels
- ylabels:update - 如果设置了新的yLabels
- 故障排查
响应式系统, 它当前状态是不健全的. 你将会遇到一些问题, 因为有很多用例和方式来传递你的数据.
- 故障排查 => Options
options 对象不是响应式的. 所以如果你动态改变图表的配置, 他们将无法被 mixin 识别.
如果你正在使用 mixin , 你需要使用options来传递你的配置. 这是非常重要的, 因为 mixin 将调用 chart.js 的 update() 方法 或者 销毁并渲染一个新的图表. 如果 mixin 渲染一个新的图表, 它将调用this.renderChart(this.chartData, this.options).
但是如果你在mounted()传递你的配置, 它们将直接被遗弃.
错误的方式
import { Line, mixins } from 'vue-chartjs'export default { components: { Line } mixins: [mixins.reactiveProp], mounted () { this.renderChart(this.chartData, {responsive: true}) }}
正确的方式
import { Line, mixins } from 'vue-chartjs'export default { components: { Line } mixins: [mixins.reactiveProp], mounted () { this.renderChart(this.chartData, this.options) }}
- 故障排查 => 自己的监视器
如果你对你的数据进行大量更改(而不是推新的数据), 那么最好的方式是创建自己的 watcher. 你可以自己调用 this.$data._chart.update() 或者 this.renderChart() 来实现, 当然这些完全取决于你自己.
一个简单的监视器将会是这样:
watch: { chartData () { this.$data._chart.update() }}
vue引入three.js3维地图_vue-chartjs使用 Chart.js 和 Vue.js 搭建简单和漂亮的图表相关推荐
- vue 引入echarts画中国地图 Map china not exists
现象:在vue里用echarts画地图时报错:Map china not exists. 只出现了南海诸岛部分 原因:没引入地图数据 解决: import 'echarts/map/js/china. ...
- Vue项目使用天地图的方法(Vue引入天地图,创建地图实例)
最近项目需要用到天地图,要引入到Vue项目中,鉴于官网没有相关的说明文档,在这里我记录一下我所使用的引入方法,可能不是很好,希望有更好的方法大佬能教一下我. 第一步,在Vue项目文件夹public下的 ...
- cad图形如何导入到奥维地图_【详细教程】奥维地图上查看项目的线路图或平面图...
我们新到一个工地项目,一般都需要知道道路的走向,或者项目的所在位置,这个时候我们一般使用测量仪器将相关点位测量出来以进行查看.但是这种方法耗时较长.效率较低. 那如何提高效率呢? 这里我们就使用到了奥 ...
- vue引入luckysheet插入图表时报错Uncaught TypeError: h.createChart is not a function
Luckysheet(excel)引入chartMix的问题 记录问题:离线引入Luckysheet,插入图表时报错Uncaught TypeError: h.createChart is not a ...
- vue 引入json地图_vue中引入地图的js文件,显示echarts is not loaded
<script type="text/javascript"> var vue = new Vue({ el:'#app', data:{ function () { ...
- maptalks+three.js+vue webpack项目实现二维地图上贴三维模型
我们不是走在坑里就是走在前往坑的路上_(:зゝ∠)_ 最终效果如图:(地图上添加一个"三维地图"的toolbar按钮,点击后在二维地图上贴上建好的三维模型点击显示弹框) 以下都在已 ...
- 基于Vue框架开发的页面加载二维地图以及交互
一.在Vue项目中引入二维地图 1.切换到公司的仓库下载地图插件 npm config set registry http://nexus.toops.club/repository/npm-zui/ ...
- html引入百度地图报错,vue引入百度地图BMapGL,或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
- vue 引入json地图_使用vue引入maptalks地图及聚合效果的实现
1.安装maptalks.js npm install maptalks --save 2.安装聚合mapkercluster npm install maptalks.markercluster 3 ...
最新文章
- windows phone 7 中文天气预报应用--来源http://www.cnblogs.com/liulunet/archive/2011/08/17/2141696.html...
- java 遍历hashmap key_Java5种遍历HashMap数据的写法
- SpringCloud Alibaba Sentinel 流量控制规则介绍与配置
- POJ3321 Apple tree
- springmvc 处理器方法返回的是string 重定向到处理器方法
- 调试 acf 的时候发现问题
- nginx+php5-fpm安装
- 扒视频/音效素材的方法
- 如何将mp4视频转换成flv格式
- 本文为转载-------Web常使用的功能经验笔记第1季 -转载自刘岩
- Python错误集锦:除法运算时提示ZeroDivisionError: division by zero
- 前端大屏展示框架搭建(一)
- Google地图的Street View和Mapplets
- 仿简书登录框,可删除内容或显示密码框的内容
- 无线CE认证中的DFS测试
- CMS 内容管理系统
- Android碎碎念 -- 阿里Weex
- 单点液位开关和连续液位传感器之间的区别及选择注意事项
- 十日谈 (share)
- java基于springboot房屋租赁
热门文章
- 关于moto Q8刷机
- 西门子工业自动化资料大全 (2019年10月18日版)
- php判断是否支持rewrite,从PHP $_SERVER相关参数判断是否支持Rewrite模块
- SAS学习之sas7bdat文件的读取
- python求均值及extend用法
- 基于STM32F4的智能门锁超详细解析(矩阵键盘、OLED、舵机、HC-05蓝牙、F407ZG最小系统)可用于毕业设计
- 【运维面试】面试官: 你能说一下MySQL主从的几种方式吗?
- SAS学习之变量的输出格式
- php在线查看pdf文件
- java 100% cpu_Java服务,CPU100%问题如何快速定位?