change data

切换数据

by Vue Echarts

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="//unpkg.com/v-charts/lib/index.min.js"></script>

<div id="app">
  <button @click="toggle">toggle legend</button>
  <ve-pie :data="chartData" :settings="chartSettings"></ve-pie>
</div>

JavaScript

new Vue({
  el: '#app',
  data: function () {
    return {
      chartData: {
        columns: ['页面名', 'PV', 'UV'],
        rows: [
          { '页面名': '首页', 'PV': 10000, 'UV': 5000 },
          { '页面名': '餐厅详情页', 'PV': 8000, 'UV': 3000 },
          { '页面名': '下单页', 'PV': 5000, 'UV': 1000 }
        ]
      },
      chartSettings: {
        metrics: 'PV'
      }
    }
  },
  methods: {
    toggle: function () {
      this.chartSettings.metrics =
      	this.chartSettings.metrics === 'PV' ? 'UV' : 'PV'
    }
  }
})