VUE图表插件-文章-关尔先生

VUE图表插件笔记

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

关尔先生2020-10-21 10:48:09

【记录】vue使用图表的两种插件

1、echarts

官方文档地址：https://echarts.apache.org/zh/tutorial.html

① 官方初始化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 图表组件

暂无评论

数据库加载中

VUE图表插件 笔记