<template>
  <div id="cmp1">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="align-left"></icon>
        </span>
        <span class="fs-xl text mx-2">刑事法案同比情况</span>
      </div>
      <Echart
        :options="options"
        id="cmp1"
        style="position: absolute;top:.4rem;width: 100%;height: 3.6rem;"
      ></Echart>
  </div>
</template>

<script>
  import Echart from '../../common/echart'

  export default{
     components:{
        Echart
      },
    data(){
      return{
        options:{}
      }
    },
    mounted() {
      this.init()
    },
    methods:{
      init(){
        let option = {
            textStyle: {
                color: '#40E7F4',
                fontSize: 16,
                fontWeight: 'normal'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'none'
                }
            },
            dataset: {
                dimensions: ['month', '今年以来', '去年同期'],
                source: [
                  ['命案', '抢劫', '掠夺', '盗窃', '诈骗', '其他'],
                  [49, 7.0, 23.2, 25.6, 76.7, 32.6],
                  [23.2, 25.6, 28.7, 70.7, 48.7, 18.8]
                ]
            },
            legend: {
                right: '10%',
                top: 0,
                itemWidth: 12,
                itemHeight: 12,
                itemGap: 36,
                textStyle: {
                  color: '#40E7F4',
                  fontSize: 10
                }
              },
            calculable : true,
        	grid: {
                left: '0',
                right: '0',
                bottom: '5%',
                top: '10%',
                containLabel: true,
              },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap: true, //坐标轴两边留白
                    axisTick:{//坐标轴刻度相关设置。
        				show: false,
        			},
        			axisLine:{//坐标轴轴线相关设置
        				lineStyle:{
        					color: '#81D8D0',
        					opacity: 0.79
        				}
        			},
        			splitLine: { //坐标轴在 grid 区域中的分隔线。
        				show: false,
        			},
        			axisLabel: {
        			    fontSize: 10
        			}
                }
            ],
            yAxis : [
                {
                    type : 'value',
        			axisLine:{
        				show: false
        			},
        			axisTick:{
        				show: false
        			},
        			splitLine: {
        				show: true,
        				lineStyle: {
        					color: '#81D8D0',
        					opacity: 0.2
        				}
        			},
        			axisLabel: {
                        fontSize: 10,
                        // verticalAlign: 'bottom',
                    },
                }
            ],
            series : [
                {
                    name: '',
                    type:'bar',
                    barWidth: '15%',
                    seriesLayoutBy: 'row',
                    itemStyle: {
                        barBorderRadius: [30, 30, 0, 0],
                        color: {
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#57FFE0'},
                                    {offset: 0.3, color: '#3AA5C7'},
                                    {offset: 1, color: '#3469E2'}
                                ]
                            }
                    }
                },
                {
                    name: '',
                    type:'bar',
                    barWidth: '15%',
                    seriesLayoutBy: 'row',
                    itemStyle: {
                        barBorderRadius: [30, 30, 0, 0],
                        color: {
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#F78678'},
                                    {offset: 0.5, color: '#C359D0'},
                                    {offset: 1, color: '#963EF5'}
                                ]
                            }
                    }
                }
            ]
        };

        this.options = option
      }
    }
  }
</script>

<style lang="less" scoped="scoped">
  #cmp1{
      width: 100%;
      height: 4rem;
      position:relative;
    }
</style>
