<template>
  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
</template>

<script>
// 引入视觉映射组件
import 'echarts/lib/component/visualMap'
export default {
  data() {
    this.extend = {
      series: {
        label: { show: true, position: 'right' }
      }
    }
    this.grid = {
      right: 60
    }
    this.title = {
      text: '设备数量统计'
    }
    this.chartSettings = {
      itemStyle: {
        'barCategoryGap': 5
      },
      barWidth: 15,
      labelMap: {
        'deviceType': '设备类型',
        'deviceCount': '设备数量'
      },
      dimension: ['deviceType'],
      metrics: ['deviceCount']
    }
    return {
      chartData: {
        columns: ['deviceType', 'deviceCount', '下单用户', '下单率'],
        rows: [
          { 'deviceType': '井盖状态监测仪', 'deviceCount': 1393, '下单用户': 1093, '下单率': 0.32 },
          { 'deviceType': '液位监测仪', 'deviceCount': 3530, '下单用户': 3230, '下单率': 0.26 },
          { 'deviceType': '燃气智能监测终端', 'deviceCount': 2923, '下单用户': 2623, '下单率': 0.76 },
          { 'deviceType': '开挖监测仪', 'deviceCount': 1723, '下单用户': 1423, '下单率': 0.49 },
          { 'deviceType': '有害气体监测仪', 'deviceCount': 3792, '下单用户': 3492, '下单率': 0.323 },
          { 'deviceType': '水质监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 },
          { 'deviceType': '流量监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 }
        ]
      }
    }
  }
}
</script>