VUE图表插件 笔记

【记录】vue使用图表的两种插件,echart.js图表不渲染显示的一种可能,图表空白的解决方案

关尔先生2020-10-21 10:48:09
【记录】vue使用图表的两种插件

1、echarts



① 官方初始化echarts实例
// HTML
<div id="main" style="width: 600px;height:400px;"></div>
//JS
var myChart = echarts.init(document.getElementById('main'));

② 在VUE中,推荐使用ref获取dom,以保证渲染完成
<div ref="main" style="width: 600px;height:400px;"></div>
// JS
var myChart = echarts.init(this.$refs.main);

③ 如果不添加标题、图例等,原来的图位置会有空白出现,可使用grid属性,定位拉伸图表填充容器

2、v-charts
基于 Vue2.0 和 echarts 封装的 v-charts 图表组件
官方文档地址:https://v-charts.js.org/#/

v-chartsecharts百度图表插件echarts图表不显示

上一篇:深入理解JavaScript系列——汤姆大叔的博客

下一篇:vue地图组件(v-charts百度地图)的使用Demo

本文链接: http://www.nanshanqiao.com/zz_article/58.html

暂无评论