<template>
  <div class="event-number">
    <Model :title="titles">
      <div ref="number" class="number"></div>
    </Model>
  </div>
</template>

<script>
import Model from "../model.vue";

export default {
  name: "area",
  components: { Model },
  props: {
    title: "随县",
  },
  data() {
    return {
      titles: "耕地质量等级",
      datas: [
        { value: 483.05, name: "一等地" },
        { value: 1869.06, name: "二等地" },
        { value: 6612.0, name: "三等地" },
        { value: 21656.79, name: "四等地" },
        { value: 33670.47, name: "五等地" },
        { value: 37038.14, name: "六等地" },
        { value: 10590.14, name: "七等地" },
        { value: 1806.26, name: "八等地" },
        { value: 266.85, name: "九等地" },
      ],
      untils: "%",
    };
  },
  created() {
    if (this.title == "新街镇") {
      this.titles = "土壤条件";
      this.datas = [
        { value: 6.1, name: "PH" },
        { value: 29.43, name: "有机质" },
        { value: 125, name: "碱解氮" },
        { value: 5.8, name: "有效磷" },
        { value: 148, name: "速效钾" },
      ];
      //   this.dataValue = [71242.1542, 11548.2565, 456, 30.8516];
      this.untils = "mg/kg";
    }
  },
  mounted() {
    this.initRT();
  },
  methods: {
    initRT() {
      let Chart = this.$refs.number;
      let myChart = this.$echarts.init(Chart);
      const option = {
        // backgroundColor,
        color: [
          "#54FF9F",
          "#FFF0F5",
          "#6495ED",
          "#C0FF3E",
          "#00CED1",
          "#FFD700",
          "#FF6A6A",
          "#FF3030",
          "#8B1C62",
        ],
        tooltip: {
          show: true,
          formatter: `{b}:{d}${this.untils}`,
        },
        legend: {
          //data，就是取得每个series里面的name属性。2324
          // orient: 'vertical',
          // icon: 'circle', //图例形状
          width: "95%",
          // padding: 0,
          bottom: "8%",
          // right: 40,
          // itemWidth: 14, //小圆点宽度
          // itemHeight: 14, // 小圆点高度
          // itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
          textStyle: {
            // fontSize: 14,
            color: "#ffffff",
          },
        },
        series: [
          {
            name: "耕地质量",
            type: "pie",
            center: ["50%", "50%"], //圆心的位置
            bottom: "15%", //单单指的饼图距离上面的距离，top越大饼图越小
            left: "0%", //单单指的饼图距离左面的距离，会改变饼图的大小
            radius: ["0%", "60%"], //实心圆[内半径=0，外半径] 外半径越大，圆越大
            clockwise: false, //顺时针排列
            startAngle: 90, //起始角度 影响不大
            //roseType:"", // 实心圆 不能出现roseType这个属性
            label: {
              show: true, //false不显示饼图上的标签
              position: "outside", //inside（在饼图上显示）,outside(默认就会出现引导线) center
              formatter: "{b}:{c}",
              // textStyle: {
              //     color: '#ffffff',
              // },
            },
            //只有设置了label:show=ture;position=outside 设置labelLine才会有效
            labelLine: {
              normal: {
                length: 5, // 改变标示线的长度
                lineStyle: {
                  // color: "#ffffff"  // 改变标示线的颜色
                },
              },
              show: true, //显示引导线
              // length: 30, //连接饼图第1段线条的长度 length length2 不写自适应
              // length2: 30, //链接饼图第2段线条长度
              // smooth: true, //是否光滑连接线
            },
            itemStyle: {
              //每个扇形的设置
              borderColor: "rgba(0,0,0,.1)", //扇形边框颜色
              borderWidth: 1, //扇形边框大小 要先给borderColor颜色 设置borderWidth才会有效果
            },
            data: this.datas,
            // .sort((a, b) => b.value - a.value), //数组从大到小排序
            emphasis: {
              //启用鼠标放上去放大效果，这个挺好的
              scale: true,
              scaleSize: 10,
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.event-number {
  margin-top: 10px;

  .number {
    width: 100%;
    height: 300px;
  }
}
</style>
