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

  1. echarts

    官方文档地址：Documentation - Apache ECharts

    a. 官方初始化 echarts 实例

    1
    <div id="main" style="width: 600px;height:400px;">div></div>
    1
    var myChart = echarts.init(document.getElementById('main')

    b. 在 VUE 中，推荐使用 ref 获取 dom，以保证渲染完成

    1
    <div ref="main" style="width: 600px;height:400px;">div></div>
    1
    var myChart = echarts.init(this.$refs.main);

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

    grid 的说明：Documentation - Apache ECharts

  2. v-charts

基于 Vue2.0 和 echarts 封装的 v-charts 图表组件

官方文档地址：v-charts

编辑文章✏