VUX version
2.9.2
OS/Browsers version
chrome
Vue version
2.5.13
Code
<template>
<div>
<v-chart
ref="demo"
:data="tech">
<v-scale x field="动作" />
<v-scale y field="成绩" :min="0" :max="100" :ticks="[0,20,40,60,80,100]"/>
<!-- <v-bar series-field="name" :adjust="{
type: 'dodge',
marginRatio: 0.05 // 设置分组间柱子的间距
}" /> -->
<v-bar series-field="name" adjust="stack" />
<v-tooltip show-value-in-legend />
</v-chart>
</div>
</template>
<script>
import { VChart, VLine, VArea, VTooltip, VLegend, VBar, XButton, VScale } from 'vux'
export default {
name: 'Chart',
components: {
VChart,
VLine,
VArea,
VTooltip,
VLegend,
VBar,
XButton,
VScale
},
props: {
tech: Array
},
// data () {
// return {
// score: []
// }
// },
data () {
return {
data: [
// { name: 'Jedi', 动作: '正手', 成绩: 12.4 },
// { name: 'Jedi', 动作: '反手', 成绩: 23.2 },
// { name: 'Jedi', 动作: '上旋', 成绩: 34.5 },
// { name: 'Jedi', 动作: '反削', 成绩: 99.7 },
// { name: 'Jedi', 动作: '发球', 成绩: 52.6 },
// { name: 'Jedi', 动作: '接发', 成绩: 35.5 },
// { name: 'Jedi', 动作: '正截击', 成绩: 37.4 },
// { name: 'Jedi', 动作: '反截击', 成绩: 42.4 },
// { name: 'Jedi', 动作: '挑高球', 成绩: 35.6 },
// { name: 'Jedi', 动作: '放小球', 成绩: 35.6 }
]
}
}
// watch: {
// tech () {
// this.data = this.tech
// }
// }
// beforeUpdate () {
// this.data = this.tech
// }
}
</script>
Steps to reproduce
- load the 'tech' prop value from parent.
- assign 'tech' value to the 'data' parameter in v-chart module
- show the v-chart with correct value.
What is Expected?
show the v-chart with the correct value.
What is actually happening?
blank chart show, but the value is correct load finished from vue log.
1条答案
按热度按时间zphenhs41#
Hello, have you solved this problem?