基础雷达图

by vecharts

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/echarts@v4.9.0/dist/echarts.min.js"></script>
<script src="//unpkg.com/ve-charts@latest/lib/ve-charts.umd.min.js"></script>

<div id="app">
  <div class="charts-content">
    <ve-radar-chart :data="data" :legend="legend" :settings="setting"/>
  </div>
</div>

JavaScript

new Vue({
  data() {
    return {
    	legend: {
      	left: 'left',
      	orient: 'vertical'
      },
      setting: {
      	itemStyle: {
    	    normal: {
    	      areaStyle: {
    	        type: 'default'
    	      }
    	    }
        }
      },
      data: {
        dimensions: [
          { name: 'APP', max: 20000 },
          { name: 'PC', max: 20000 },
          { name: 'M端', max: 20000 },
          { name: '微信', max: 20000 },
          { name: '手Q', max: 20000 },
          { name: '小程序', max: 20000 }
        ],
        measures: [
          { name: '2018', data: [20000, 16000, 12000, 8000, 4000, 1000] },
          { name: '2017', data: [18000, 18000, 18000, 18000, 18000, 18000] },
          { name: '2016', data: [15000, 12500, 10000, 7500, 5000, 2500] },
          { name: '2015', data: [8000, 8000, 8000, 8000, 8000, 8000] },
          { name: '2014', data: [6000, 5000, 4000, 3000, 2000, 1000] },
          { name: '2013', data: [1000, 1000, 1000, 1000, 1000, 1000] }
        ]
      }
    }
  },
  mounted () {
    const self = this
    setInterval(() => {
      self.data.measures = self.data.measures.map(v => {
      	return {
        	name: v.name,
          data: _.shuffle(v.data)
        }
      })
    }, 2000)
  }
}).$mount('#app')