panteng/vue-echarts

实例化chart对象但不能正常显示图表

chunjil opened this issue · 4 comments

我按照说明,在组件中使用你的echarts指令无法正常运行
修改代码后可以正常使用:

//echarts.js:16行,初始化chart实例后,主动setOption一次

el.echartsInstance.setOption(binding.value);

是我没用对么,

可以share一下出问题的code吗?或者console里的报错(如果有的话)?谢谢

console里没有报错,观察element,发现有echarts生成的图表外围元素。
下面是我的代码。

<template>
<databox :title="'图表'" :dheight="'280px'">
    <div class="chart" v-echarts="option"></div>
</databox>
</template>

<script>
    let option= {
        tooltip: {},
        xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
            {
                name: 'Num',
                type: 'bar',
                data: [5, 20, 36, 10, 10]
            }
        ]
    }

    export default {
        name: "BuildingLandBrief",
        data(){
            return {option};
        }
    }


</script>

<style>
.chart{
    height: 100%;
    width: 100%;
}
</style>

我观察了指令 代码:

// node_modules/vue-echarts-directive/directives/echarts.js :14行
// 只有echarts实例初始化,
    inserted: (el) => {
        el.echartsInstance = echarts.init(el);
    },

// node_modules/vue-echarts-directive/directives/echarts.js :19行
// 这里有setOption的操作,是要主动触发么,我的vue版本是 **2.5.17**
    update: (el, binding) => {
        el.echartsInstance.setOption(binding.value);
    },

最后我的临时解决方案是修改了

// node_modules/vue-echarts-directive/directives/echarts.js :14行
    inserted: (el,binding) => {
        el.echartsInstance = echarts.init(el);
        el.echartsInstance.setOption(binding.value);
    },

Hi chunjil, 是我之前对update的理解有误。我没有考虑到在某些情况下,页面加载时,并不会触发v-echarts指令的update hook。我已经按照你的解决方案修改了代码。
Thanks for reporting the bug.

感谢:)