airyland / vux

Mobile UI Components based on Vue & WeUI
https://vux.li
MIT License
17.6k stars 3.72k forks source link

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

Open myq3636 opened 5 years ago

myq3636 commented 5 years ago

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

  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.

Singlefour commented 5 years ago

Hello, have you solved this problem?