<template>
  <div>
    <div id="myCircle"></div>
    <div id="myCircle2"></div>
  </div>
</template>

<script>
  export default {
    name: "hello",
    data() {
      return {
      };
    },
    mounted() {
      this.drawLine();

    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myCircle = this.$echarts.init(document.getElementById("myCircle"));
        let myCircle2 = this.$echarts.init(document.getElementById("myCircle2"));
        var total = 100;
        let placeHolderStyle = {
            normal: {
                label: {
                    show: false,
                },
                labelLine: {
                    show: false,
                }
            }
        };

        // 指定图表的配置项和数据
        var option = {
          title: {
            text: '校正确作答率',//主标题
            subtext: '21%',//副标题
            textStyle: {//主标题样式
              color: '#fff',
              fontWeight: '200',
              fontSize: 14,
              bottom:"20px"
            },
            subtextStyle: {//副标题样式
              color: '#fff',
              fontSize: 38,
              fontWeight: '500',
            },
            left: 'center',
            bottom: '160ox'
          },
          tooltip: {
            show: true,
            trigger: 'item',//提示框触发类型，item数据项图形触发，主要应用于无类目轴的图表（散点图、饼形图等）
            formatter: function (params, ticket, callback) {//第一个参数数据集、第二个参数是异步回调标志、第三个参数是异步回调
              return params.seriesName + ": " + params.value + "%";//系列名称：数据值
            }
          },
          color: ['#db615e', '#e6b600', '#db8dd2','#42beda', '#1eb58d'],
          legend: {
            type: "scroll",
            itemGap: 10,//图例之间的间距
            data: ['语文', '数学', '英语','生物','化学'],//图例的数据数组
            textStyle: {
              color: '#fff'
            },
            y:"bottom"
          },
          series: [
            {
              name: '语文',
              type: 'pie',
              clockWise: false, //顺时加载
              hoverAnimation: false, //鼠标移入变大
              radius: [110, 120],
              itemStyle: placeHolderStyle,
              label: {
                normal: {
                  show: false,
                }
              },
              data: [{
                value: 88,
                itemStyle: {
                  normal: {
                    color: '#db615e'
                  }
                }
              },
              {
                value: total - 88,
                itemStyle: {
                  normal: {
                    color: '#3b3f3b'
                  }
                }
              }]
            },
            {
              name: '数学',
              type: 'pie',
              clockWise: false, //顺时加载
              hoverAnimation: false, //鼠标移入变大
              radius: [100, 110],
              itemStyle: placeHolderStyle,
              label: {
                normal: {
                  show: false,
                }
              },
              data: [{
                value: 45,
                itemStyle: {
                  normal: {
                    color: '#dbaf4f'
                  }
                }
              },
              {
                value: total - 45,
                itemStyle: {
                  normal: {
                    color: '#3b3f3b'
                  }
                }
              }]
            },
            {
              name: '英语',
              type: 'pie',
              clockWise: false, //顺时加载
              hoverAnimation: false, //鼠标移入变大
              radius: [90, 100],
              itemStyle: placeHolderStyle,
              data: [{
                value: 80,
                itemStyle: {
                  normal: {
                    color: '#db8dd2'
                  }
                }
              },
              {
                value: total - 80,
                itemStyle: {
                  normal: {
                    color: '#3b3f3b'
                  }
                }
              }]
            },
            {
              name: '生物',
              type: 'pie',
              clockWise: false, //顺时加载
              hoverAnimation: false, //鼠标移入变大
              radius: [80, 90],
              itemStyle: placeHolderStyle,
              data: [{
                value: 75,
                itemStyle: {
                  normal: {
                    color: '#42beda'
                  }
                }
              },
              {
                value: total - 75,
                itemStyle: {
                  normal: {
                    color: '#3b3f3b'
                  }
                }
              }]
            },
            {
              name: '化学',
              type: 'pie',
              clockWise: false, //顺时加载
              hoverAnimation: false, //鼠标移入变大
              radius: [70, 80],
              itemStyle: placeHolderStyle,
              data: [{
                value: 86,
                itemStyle: {
                  normal: {
                    color: '#1eb58d'
                  }
                }
              },
              {
                value: total - 86,
                itemStyle: {
                  normal: {
                    color: '#3b3f3b'
                  }
                }
              }]
            }]
        };


        // 绘制图表
        myCircle.setOption(option);
        let rightOption = option;
        //rightOption.legend.data = [];
        rightOption.title.text = "区正确作答率"
        myCircle2.setOption(rightOption);
        window.addEventListener("resize", function () {
          myCircle.resize();
          myCircle2.resize();
        });
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  #myCircle {
    width: 50%;
    height: 400px;
    margin: 0 auto;
    float:left;
  }
  #myCircle2 {
    width: 50%;
    height: 400px;
    margin: 0 auto;
    display: block;
    float:left;
    }
</style>
