<template>
  <div id="two">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="title"> e专利 </el-col>
        <el-col :span="24" class="canvas">
          <div id="twoChart" style="height: 425px"></div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: statistics } = createNamespacedHelpers('statistics');

export default {
  name: 'one',
  props: {},
  components: {},
  data: function () {
    return {};
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    ...statistics(['query']),
    async init() {
      let res = await this.query({ type: 'patent' });
      if (this.$checkRes(res)) {
        let viewData = res.data.map((i) => i.name);
        var chartDom = document.getElementById('twoChart');
        var myChart = echarts.init(chartDom);
        const option = {
          title: {},
          tooltip: { trigger: 'axis' },
          grid: {
            y2: 140,
          },
          xAxis: {
            type: 'category',
            boundaryGap: [0, 0.01],
            name: '申请人',
            data: viewData,
            axisLabel: {
              interval: 0, //横轴信息全部显示
              rotate: -30, //-30度角倾斜显示
            },
            axisTick: {
              // 坐标轴 刻度
              show: true, // 是否显示
              inside: true, // 是否朝内
              length: 3, // 长度
              lineStyle: {
                // 默认取轴线的样式
                color: 'red',
                width: 1,
                type: 'solid',
              },
            },
          },
          yAxis: {},
          series: [
            {
              name: 'e专利',
              label: {
                show: true,
                position: 'top',
              },
              type: 'bar',
              itemStyle: {
                normal: {
                  color: function (params) {
                    var colorList = [
                      '#C1232B',
                      '#B5C334',
                      '#FCCE10',
                      '#E87C25',
                      '#27727B',
                      '#FE8463',
                      '#9BCA63',
                      '#FAD860',
                      '#F3A43B',
                      '#60C0DD',
                      '#778899',
                      '#00FFFF',
                      '#FFEFD5',
                      '#F08080',
                      '#DCDCDC',
                    ];
                    return colorList[params.dataIndex];
                  },
                },
              },
              data: res.data,
            },
          ],
        };
        option && myChart.setOption(option);
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 15px 0;
  }
}
</style>
