202012G07/echarts-screen/src/components/RoseCon.vue

<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">玫瑰图</div>
      <div class="sn-body">
        <div class="wrap-container">
    <div class="chart" id="chart_right2"></div>
  </div>
  </div>
    </div>
  </div>
</template>

<script>
import screenfull from 'screenfull'
export default {
  name: "RoseCon",
  data() {
    return {
      option: null,
      HKcur: '',
      TWcur: '',
      SHcur: '',
      GDcur: '',
      SCcur: '',
      FJcur: '',
      NMGcur: ''
    }
  },
  mounted() {
    this.getConData();
    setTimeout(this.getEchartRight2, 2000)
  },
  methods: {
    //获取疫情数据
    getConData() {
      axios.get('https://www.maomin.club/fy/get', {
        dataType: "json"
      }).then(res => {
        let ConData = res.data
        let made = JSON.parse(ConData)
        let madeData = made.component
        let data = madeData[0]
        this.HKcur = data.caseList[4].curConfirm
        this.TWcur = data.caseList[3].curConfirm
        this.SHcur = data.caseList[21].curConfirm
        this.GDcur = data.caseList[31].curConfirm
        this.SCcur = data.caseList[24].curConfirm
        this.FJcur = data.caseList[20].curConfirm
        this.NMGcur = data.caseList[9].curConfirm
        this.overseasInputRelative = data.summaryDataIn.overseasInputRelative
      }).catch(err => {
        console.log(err)
      })
    },
    //绘制图表
    getEchartRight2() {
      let myChart = echarts.init(document.getElementById('chart_right2'));
      let option = {
        color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05', '#4465fc'],
        //工具箱配置全屏
        toolbox: {
          feature: {
            mytool: {
              show: true,
              title: "全屏",
              icon: 'path://M181 357.5V181.2h176.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c0-14.3-11.6-25.9-25.9-25.9H118c-11 0-20 9-20 20v239.4c0 14.3 11.6 25.9 25.9 25.9H155c14.4-0.1 26-11.7 26-26.1zM668.6 181.2H845v176.4c0 14.3 11.6 25.9 25.9 25.9H902c14.3 0 25.9-11.6 25.9-25.9V118.2c0-11-9-20-20-20H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 26 25.9 26zM357.4 845.2H181V668.8c0-14.3-11.6-25.9-25.9-25.9H124c-14.3 0-25.9 11.6-25.9 25.9v239.4c0 11 9 20 20 20h239.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c-0.1-14.4-11.7-26-26-26zM845 668.8v176.4H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 25.9 25.9 25.9H908c11 0 20-9 20-20V668.8c0-14.3-11.6-25.9-25.9-25.9H871c-14.4 0-26 11.6-26 25.9z',
              onclick: function () {
                const element = document.getElementById('chart_right2');
                if (!screenfull.isEnabled) {//判断是否支持全屏
                  this.$message({
                    message: '您的浏览器暂时不支持全屏切换',
                    type: 'warning'
                  })
                  return false
                }
                screenfull.toggle(element)

              },
            }
          },
        },
        tooltip: {
          //触发类型
          //数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          trigger: 'item',
          //提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
          formatter: '{b} : {c} ({d}%)'
        },
        polar: {},
        //极坐标系的角度轴。
        angleAxis: {
          //强制设置坐标轴分割间隔
          interval: 1,
          //坐标轴类型。
          type: 'category',
          data: [],
          //角度轴组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
          z: 10,
          //坐标轴轴线相关设置。
          axisLine: {
            //是否显示坐标轴轴线。
            show: false,
            //
            lineStyle: {
              //坐标轴线线的颜色。
              color: '#0B4A6B',
              //坐标轴线线宽。
              width: 5,
              //坐标轴线线的类型。
              type: 'solid'
            },
          },
          axisLabel: {
            /*默认会采用标签不重叠的策略间隔显示标签。
            可以设置成 0 强制显示所有标签。*/
            interval: 0,
            //是否显示刻度标签。
            show: true,
            color: '#0B4A6B',
            margin: 8,
            fontSize: 16
          },
        },
        //极坐标系的径向轴。
        radiusAxis: {
          //坐标轴刻度最小值。
          min: 40,
          //坐标轴刻度最大值。
          max: 120,
          //强制设置坐标轴分割间隔。
          interval: 20,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#0B3E5E',
              width: 1,
              type: 'solid'
            },
          },
          axisLabel: {
            formatter: '{value} %',
            show: false,
            padding: [0, 0, 20, 0],
            color: '#0B3E5E',
            fontSize: 16
          },
          splitLine: {
            lineStyle: {
              //分隔线颜色
              color: '#0B3E5E',
              //分隔线线宽。
              width: 2,
              type: "solid"
            }
          }
        },
        calculable: true,
        series: [{
          type: 'pie',
          //饼图半径
          radius: ['6%', '10%'],
          //是否开启 hover 在扇区上的放大动画效果。
          hoverAnimation: false,
          //是否显示视觉引导线。
          labelLine: {
            normal: {
              show: false,
              length: 30,
              length2: 50
            },
            emphasis: {
              show: false
            }
          },
          tooltip: {
            show: false
          },
          data: [{
            name: '',
            value: 0,
            itemStyle: {
              normal: {
                color: '#0B4A6B'
              }
            }
          }]
        },
          //最外圈
          {
          type: 'pie',
          radius: ['90%', '95%'],
          hoverAnimation: false,
          labelLine: {
            normal: {
              show: false,
              length: 30,
              length2: 50
            },
            emphasis: {
              show: false
            }
          },
          tooltip: {
            show: false
          },
          data: [{
            name: '',
            value: 0,
            itemStyle: {
              normal: {
                color: '#0B4A6B'
              }
            }
          }]
        },{
          stack: 'a',
          type: 'pie',
          radius: ['20%', '80%'],
          roseType: 'area',
          zlevel: 10,
          label: {
            normal: {
              show: true,
              formatter: '{b}',
              textStyle: {
                fontSize: 12,
              },
              position: 'outside'
            },
            emphasis: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: true,
              length: 15,
              length2: 50,
              lineStyle: {
                type: 'dotted'
              }
            },
            emphasis: {
              show: true
            }
          },
          data: [{
            value: this.HKcur,
            name: '香港'
          }, {
            value: this.TWcur,
            name: '台湾'
          }, {
            value: this.SHcur,
            name: '上海'
          }, {
            value: this.GDcur,
            name: '广东'
          }, {
            value: this.SCcur,
            name: '四川'
          }, {
            value: this.FJcur,
            name: '福建'
          }, {
            value: this.NMGcur,
            name: '内蒙古'
          }]
        }]
      }

      myChart.setOption(option, true);
      //自适应
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {
  }
};
</script>

<style lang="scss" scoped>
  .sn-container {
    width: 99%;
    height: 99%;
    //position: relative;

    .chart {
      height: 90%;
      width: 90%;
      margin-bottom: 1%;
      margin-left: 7%;
    }
  }
</style>