<template>
  <div>
    <div class="label">表品牌分布</div>
    <div id="meterbrand"></div>
  </div>
</template>

<script>
  import * as DataSql from '../../../stores/DataSql'
  import co from 'co'

  export default {
    name: "meterbrand",
    data() {
      return {
        meterdata: [],
      }
    },
    methods: {
      setBar(id, data) {
        this.xc = this.$echarts.init(document.getElementById(id))
        var scale = 0.8;
        var xAxisData = []  //列名
        var meterCount = []  //数量

        data.forEach(function (s) {
          xAxisData.push(s.name)
          meterCount.push(s.value)
        })
        xAxisData.push("")
        var yname = '品牌'
        var endPercent = (6 / xAxisData.length) * 100;
        var serieData = [
          {
            name: '',
            type: "bar",
            stack: "1",
            barWidth: '40%',
            barGap: "20%",
            xAxisIndex: 0,
            z: 2,
            itemStyle: {
              normal: {
                color: "#013e48",
                label: {
                  show: true,
                  textStyle: {
                    color: "#f7cb32"
                  },
                  position: "top"
                },
              }
            },
            data: meterCount,
          }
        ];
        var colors = ["#036BC8", "#4A95FF", "#5EBEFC", "#2EF7F3", "#FFFFFF"]
        this.xc.setOption({
          title: {
            text: '',
            left: '40%',
            bottom: '1%',
            textStyle: {color: "#fff", fontSize: 14 * scale, fontWeight: "normal"}
          },
          color: colors,
          grid: {left: '4%', top: "18%", bottom: "5%", right: "5%", containLabel: true},
          dataZoom: [{
            type: 'inside',
            show: true,
            xAxisIndex: [0],
            left: '9%',
            bottom: -5,
            start: 2,
            end: 90 //初始化滚动条
          }],
          tooltip: {
            formatter: function (params) {
              if (params[0].axisValue == '') {
                return ''
              }
              var result = ''
              params.forEach(function (item) {
                if (item.seriesName !== 'ser') {
                  result += item.seriesName + " : " + item.value + "</br>";
                }
              });
              return params[0].axisValue + '<br/>数量 ' + result
            },
            axisPointer: {type: 'line', lineStyle: {width: 0}},
            trigger: 'axis',
            extraCssText: 'width: auto;height: auto;'
          },
          xAxis: [
            {
              name: yname,
              type: 'category',
              nameTextStyle: {
                fontSize: 14 * scale,
                color: '#15dce2',
                padding: [40 * scale, 0, 0, -60 * scale],
              },
              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
              axisLabel: {
                interval: 0, textStyle: {color: '#ffffff', fontSize: 14 * scale},
                formatter: function (value, index) {

                  //进行客户名称截取换行
                  var s = ''
                  // 长度超过4个字符进行换行
                  if (value.toString().length > 3 && value.toString().length < 8) {
                    var s0 = value.toString().substring(0, 4)
                    var s1 = value.toString().substring(4, value.toString().length)
                    s = s0 + '\n' + s1
                    return s
                  }
                  // 长度超过8个字符进行再次换行
                  if (value.toString().length > 7 && value.toString().length < 12) {
                    var s0 = value.toString().substring(0, 4)
                    var s1 = value.toString().substring(4, 8)
                    var s2 = value.toString().substring(8, value.toString().length)
                    s = s0 + '\n' + s1 + '\n' + s2
                    return s
                  }
                  // 长度超过12个字符进行再次换行
                  if (value.toString().length > 11) {
                    var s0 = value.toString().substring(0, 4)
                    var s1 = value.toString().substring(4, 8)
                    var s2 = value.toString().substring(8, 12)
                    var s3 = value.toString().substring(12, value.toString().length)
                    s = s0 + '\n' + s1 + '\n' + s2 + '\n' + s3
                    return s
                  }

                  s = value.toString()

                  return s;
                }
              },
              axisTick: {show: false},
              data: xAxisData,
            }
          ],
          yAxis: [
            {
              name: '数量',
              type: 'value',

              nameTextStyle: {
                fontSize: 14 * scale,
                padding: [-10 * scale, 35 * scale, 0, 0],
              },
              axisTick: {show: false},
              splitLine: {show: true, lineStyle: {type: 'dashed', color: '#004371'}},
              axisLabel: {
                interval: 0,
                show: true,
                textStyle: {
                  color: '#15dce2',
                  fontSize: 14 * scale,
                },
                formatter: function (value) {
                  var index = value.toString().length
                  if (index > 9) {
                    return value.toString().substring(0, index - 9) + '亿'
                  } else if (index > 4) {
                    return value.toString().substring(0, index - 4) + '万'
                  } else {
                    return value
                  }
                }
              },
              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 * scale}},
            },
          ],
          series: serieData
        }, true)
      }
    },
    watch: {
      'meterdata': {
        deep: true,
        handler(val) {
          this.setBar('meterbrand', this.meterdata)
          this.$parent.loaddata++
        }
      },
    },
    ready() {

      let getData = DataSql.getData(this, 'meterbrand',{}, 'meterdata')
      co(getData)
    }
  }
</script>

<style scoped>
  .label {
    font-size: 0.85em;
    color: #fff;
    height: 10%;
    width: 100%;
    margin-left: 6%;
  }

  #meterbrand {
    margin-top: 3%;
    height: 90%;
    width: 100%;
  }

</style>
