<template>
  <kidar-echarts type="line-bar-x" :data="data" :cols="cols" theme="dark" style="height: 400px; width: 560px;" />
</template>

<script>
  // 对于项目中图表较多的，建议全局引入
  import { KidarEcharts, addKidarEchartsPlugin } from '@kidar/echarts-vue'
  import LineBarX from '@kidar/echarts-plugins/line-bar-x'
  addKidarEchartsPlugin('line-bar-x', LineBarX)

  export default {
    data(){
      return{
        cols: [
          { name: '成都', color: '#fbd161', type: 'bar' },
          { name: '深圳东', color: '#1890ff', type: 'bar', stack: '深圳' },
          { name: '深圳西', color: '#ff90ff', type: 'bar', stack: '深圳' },
          { name: '上海', color: '#9900ff', type: 'bar' },
          { name: '比例', prop: 'ratio', color: '#44ff99', type: 'line', y1: true }
        ],
        data: [
          {name: '2018', '深圳西': 150, '成都': 350, '深圳东': 300, '上海': 380, ratio: 75},
          {name: '2019', '深圳西': 250, '成都': 450, '深圳东': 250, '上海': 480, ratio: 85},
          {name: '2020', '深圳西': 280, '成都': 550, '深圳东': 300, '上海': 580, ratio: 79},
          {name: '2021', '深圳西': 300, '成都': 390, '深圳东': 350, '上海': 680, ratio: 84},
          {name: '2022', '深圳西': 330, '成都': 540, '深圳东': 400, '上海': 780, ratio: 95}
        ]
      }
    }
  }
</script>