<!-- @format -->

<template>
  <div class="content-chart">
    <div class="chartContainer1" id="chartContainer1" ref="ChartEl1"></div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue';
  import * as echarts from 'echarts';
  //   import { get_all_data } from './main';

  export default defineComponent({
    name: 'Dashboard',
    props: {},
    data() {
      return {
        //     map: {},
        //     growthRatioRate: null,
        //     complaintSumCount: 0, //累计投诉数量
        //     todayComplaintCount: 0, //今日投诉数量
        //     sumCount: null, //累计反馈总数
        //     todaySumCount: null, //今日反馈总数
        //     replyCount: null, //累计回复总数
        //     growthRatioType: null,
        //     valueStyle: `background: linear-gradient(180deg, #E1F5FE 0%, #E1F5FE 28.7%, #4DC6F5 31.13%, #11B6EE 56.06%);
        //   -webkit-background-clip:
        //   text;color: transparent;
        //   font-size:32px;
        //   height:40px;
        //   line-height: 40px;
        //   font-weight: bold;
        //   letter-spacing:0px;`,
        //     chart: null,
        //     chart1: null,
        //     dataSource: [],
        //     selectItem: '',
        //     timer: {},
      };
    },
    watch: {},
    created() {},
    mounted() {
      // debugger;
      // var jsonData = get_all_data();
      this.setChart();
    },
    methods: {
      setChart() {
        // debugger;
        if (!this.chart1) {
          this.chart1 = echarts.init(this.$refs.ChartEl1, null, { renderer: 'svg' });
        }
        this.chart1.clear();
        let options1 = {
          series: [
            {
              radius: '80%',
              type: 'gauge',
              detail: { show: false },
              axisLine: {
                // 坐标轴线
                lineStyle: {
                  // 属性lineStyle控制线条样式
                  color: [[1, '#0EE5E5']],
                  width: 2,
                  // ,
                  // shadowColor: '#fff', //默认透明
                  // shadowBlur: 10
                },
              },
              axisLabel: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              pointer: {
                show: false,
              },
            },

            {
              type: 'gauge',
              // startAngle: -45,
              // endAngle: 180,
              min: 0,
              max: 180,
              radius: '75%',
              splitNumber: 12,
              itemStyle: {
                color: 'rgb(82,180,182)',
              },
              center: ['50%', '50%'],
              progress: {
                show: true,
                // roundCap: true,
                width: 18,
                itemStyle: {
                  // borderWidth: 2,
                  // borderColor: "rgba(227, 18, 18, 1)",
                  // borderType: "solid",
                  // borderCap: "square",
                  // borderMiterLimit:20,
                  // borderDashOffset:15,
                  // shadowColor: 'rgba(250, 250, 0, 0.5)',
                  // shadowBlur: 10,
                  // shadowOffsetY:30,
                  // borderType: [15, 15],
                  // borderSolidOffset: 5,
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#73FBFD', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#73FBFD', // 100% 处的颜色
                      },
                    ],
                    global: false,
                  },
                },
              },
              axisLine: {
                show: false,
                // roundCap: true,
                // lineStyle: {
                //   color: [
                //     [0, '#1B444F'],
                //     [1, '#1B4488'],
                //   ],

                //   width: 18,
                // },
              },
              //     axisLine: {				// 仪表盘轴线(轮廓线)相关配置。
              //   	show: true,				// 是否显示仪表盘轴线(轮廓线),默认 true。
              //   	lineStyle: {			// 仪表盘轴线样式。
              //   	color: [
              //             [1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              //               {
              //                 offset: 0.1,
              //                 color: "#AAF02E"
              //               },
              //                {
              //                 offset: 0.3,
              //                 color: "#CEE326"
              //               },
              //               {
              //                 offset: 0.6,
              //                 color: "#EBD212"
              //               },
              //               {
              //                 offset: 1,
              //                 color: "#FF6A00"
              //               }
              //             ])
              //           ]
              //         ],
              //  // 		color: colorTemplate1, 	//仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
              // 		opacity: 0.8,					//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
              // 		width: 15,					//轴线宽度,默认 30。
              // 		shadowBlur: 20,				//(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
              // 		shadowColor: "#fff",		//阴影颜色。支持的格式同color。
              // 	}
              // },
              pointer: {
                //circle', 'rect', 'roundRect' 'triangle', 'diamond', 'pin', 'arrow', 'none'
                // icon:'path://M1.28582 2.53393L34.9873 16.8505,M1.28582 2.53393L34.9873 16.8505,M1.28564 1.98535L21.0455 10.7669',
                length: '75%',
              },
              anchor: {
                show: true,
                size: 6,
                icon: 'circle',
                itemStyle: {
                  color: '#fff',
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
                // distance: 2,
                // length: 6,
                // show: true,
                // lineStyle: {
                //   width: 1,
                // },
              },
              axisLabel: {
                show: false,
              },
              detail: {
                color: '#0FB9DC',
                fontSize: 28,
                fontWeight: 'bold',
                offsetCenter: [0, '50%'],
                formatter: function (value) {
                  // return 80 + '%';
                  return '{80|' + value.toFixed(0) + '}{unit|%}';
                },
                rich: {
                  // value: {
                  //   fontSize: 50,
                  //   fontWeight: 'bolder',
                  //   color: '#777000'
                  // },
                  unit: {
                    fontSize: 15,
                    color: '#0FB9DC',

                    padding: [0, 0, -15, 2],
                  },
                },
              },
              data: [
                {
                  value: 80,
                  name: '',
                },
              ],
            },
            {
              radius: '58%',
              type: 'gauge',
              detail: { show: false },
              axisLine: {
                // 坐标轴线
                lineStyle: {
                  // 属性lineStyle控制线条样式
                  color: [[1, '#0EE5E5']],
                  width: 2,
                  opacity: 0.4,
                  // ,
                  // shadowColor: '#fff', //默认透明
                  // shadowBlur: 10
                },
              },
              axisLabel: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              pointer: {
                show: false,
              },
            },
            {
              radius: '58%',
              type: 'gauge',
              detail: { show: false },
              axisLine: {
                // 坐标轴线
                lineStyle: {
                  // 属性lineStyle控制线条样式
                  color: [[1, '#0EE5E5']],
                  width: 16,
                  opacity: 0.2,
                  // ,
                  // shadowColor: '#fff', //默认透明
                  // shadowBlur: 10
                },
              },
              axisLabel: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              pointer: {
                show: false,
              },
            },
            {
              //内圆1
              type: 'pie',
              radius: '20%',
              center: ['50%', '50%'],
              z: 1,
              itemStyle: {
                normal: {
                  color: '#0EE5E5',
                  opacity: 0.2,
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                },
              },
              hoverAnimation: false,
              label: {
                show: false,
              },
              tooltip: {
                show: false,
              },
              data: [100],
            },
            {
              //内圆1
              type: 'pie',
              radius: '15%',
              center: ['50%', '50%'],
              z: 1,
              itemStyle: {
                normal: {
                  color: '#0EE5E5',
                  opacity: 0.2,
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                },
              },
              hoverAnimation: false,
              label: {
                show: false,
              },
              tooltip: {
                show: false,
              },
              data: [100],
            },
            // ,
            // {
            //   radius: '20%',
            //   type: 'gauge',
            //   startAngle:0,
            //   endAngle:360,
            //   detail: {show:false},
            //   axisLine: {            // 坐标轴线
            //     lineStyle: {       // 属性lineStyle控制线条样式
            //       color: [ [1, '#0EE5E5']],
            //       width: 16,
            //       opacity:0.2
            //       // ,
            //       // shadowColor: '#fff', //默认透明
            //       // shadowBlur: 10
            //     }
            //   },
            //   axisLabel:{
            //     show:false
            //   },
            //   splitLine:{
            //     show:false
            //   },
            //   axisTick:{
            //     show:false
            //   },
            //   pointer:{
            //     show:false
            //   }
            // }
          ],
        };
        this.chart1.setOption(options1, { notMerge: false });
      },
    },
  });
</script>
<style lang="less" scoped>
  .content-chart {
    margin: 30px auto;
    padding: 0 16px;
    width: 300px;
    height: 300px;
    // position: relative;

    .chartContainer1 {
      height: 100%;
      width: 100%;
      transform: translateX(-20px);
    }
  }
</style>
