vux [Bug Report] V-chart can't show when data init finished

q5lcpyga  于 8个月前  发布在  其他
关注(0)|答案(1)|浏览(161)

VUX version

2.9.2

OS/Browsers version

chrome

Vue version

2.5.13

Code

  1. <template>
  2. <div>
  3. <v-chart
  4. ref="demo"
  5. :data="tech">
  6. <v-scale x field="动作" />
  7. <v-scale y field="成绩" :min="0" :max="100" :ticks="[0,20,40,60,80,100]"/>
  8. <!-- <v-bar series-field="name" :adjust="{
  9. type: 'dodge',
  10. marginRatio: 0.05 // 设置分组间柱子的间距
  11. }" /> -->
  12. <v-bar series-field="name" adjust="stack" />
  13. <v-tooltip show-value-in-legend />
  14. </v-chart>
  15. </div>
  16. </template>
  17. <script>
  18. import { VChart, VLine, VArea, VTooltip, VLegend, VBar, XButton, VScale } from 'vux'
  19. export default {
  20. name: 'Chart',
  21. components: {
  22. VChart,
  23. VLine,
  24. VArea,
  25. VTooltip,
  26. VLegend,
  27. VBar,
  28. XButton,
  29. VScale
  30. },
  31. props: {
  32. tech: Array
  33. },
  34. // data () {
  35. // return {
  36. // score: []
  37. // }
  38. // },
  39. data () {
  40. return {
  41. data: [
  42. // { name: 'Jedi', 动作: '正手', 成绩: 12.4 },
  43. // { name: 'Jedi', 动作: '反手', 成绩: 23.2 },
  44. // { name: 'Jedi', 动作: '上旋', 成绩: 34.5 },
  45. // { name: 'Jedi', 动作: '反削', 成绩: 99.7 },
  46. // { name: 'Jedi', 动作: '发球', 成绩: 52.6 },
  47. // { name: 'Jedi', 动作: '接发', 成绩: 35.5 },
  48. // { name: 'Jedi', 动作: '正截击', 成绩: 37.4 },
  49. // { name: 'Jedi', 动作: '反截击', 成绩: 42.4 },
  50. // { name: 'Jedi', 动作: '挑高球', 成绩: 35.6 },
  51. // { name: 'Jedi', 动作: '放小球', 成绩: 35.6 }
  52. ]
  53. }
  54. }
  55. // watch: {
  56. // tech () {
  57. // this.data = this.tech
  58. // }
  59. // }
  60. // beforeUpdate () {
  61. // this.data = this.tech
  62. // }
  63. }
  64. </script>

Steps to reproduce

  1. load the 'tech' prop value from parent.
  2. assign 'tech' value to the 'data' parameter in v-chart module
  3. 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.

zphenhs4

zphenhs41#

Hello, have you solved this problem?

相关问题