实例化chart对象但不能正常显示图表
chunjil opened this issue · 4 comments
chunjil commented
我按照说明,在组件中使用你的echarts指令无法正常运行
修改代码后可以正常使用:
//echarts.js:16行,初始化chart实例后,主动setOption一次
el.echartsInstance.setOption(binding.value);
是我没用对么,
panteng commented
可以share一下出问题的code吗?或者console里的报错(如果有的话)?谢谢
chunjil commented
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);
},
panteng commented
Hi chunjil, 是我之前对update
的理解有误。我没有考虑到在某些情况下,页面加载时,并不会触发v-echarts指令的update
hook。我已经按照你的解决方案修改了代码。
Thanks for reporting the bug.
chunjil commented
感谢:)