<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>爬虫可视化</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width:1000px; height: 600px; background :pink"></div>
    <div id="main_1" style="width:1000px; height: 600px; background :pink"></div>
    <script>
        var main = echarts.init(document.getElementById("main"))
        var main_1 = echarts.init(document.getElementById("main_1"))

        var option = {
          backgroundColor: '#2c343c',
          title: {
            text: '各类小说占比',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#ccc'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          visualMap: {
            show: false,
            min: 1,
            max: 98506483,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series: [
            {
              name: '类型——收藏总数',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: {{data_2|tojson}}.sort(function (a, b) {
                return a.value - b.value;
              }),
              roseType: 'radius',
              label: {
                color: 'rgba(255, 255, 255, 0.3)'
              },
              labelLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              },
              itemStyle: {
                color: '#c23531',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200;
              }
            }
          ]
        };
        main.setOption(option)
        main.s
    </script>
<a>

</a>
    <script>
        var option_1 = {
              tooltip: {
                trigger: 'item'
              },
              legend: {
                top: '5%',
                left: 'center'
              },
              series: [
                {
                  name: 'Author—Favorites',
                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                  },
                  label: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: '40',
                      fontWeight: 'bold'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data:{{data|tojson}}
                }
              ]
            };
        main_1.setOption(option_1)
        main_1.s
    </script>
</body>
<a href="https://www.qidian.com/soushu/%E8%BE%B0%E4%B8%9C.html" target="_blank" title="" > 玄幻 </a>
<a href="https://www.qidian.com/soushu/%E8%BE%B0%E4%B8%9C.html" target="_blank" > 辰东 </a>
<a href="https://www.qidian.com/soushu/%E6%88%91%E5%90%83%E8%A5%BF%E7%BA%A2%E6%9F%BF.html" target="_blank"> 我吃西红柿 </a>
<a href="https://www.qidian.com/soushu/%E7%88%B1%E6%BD%9C%E6%B0%B4%E7%9A%84%E4%B9%8C%E8%B4%BC.html" target="_blank"> 爱潜水的乌贼 </a>
<a href="https://www.qidian.com/soushu/%E8%80%81%E9%B9%B0%E5%90%83%E5%B0%8F%E9%B8%A1.html" target="_blank"> 老鹰吃小鸡 </a>
<a href="https://www.qidian.com/soushu/%E5%94%90%E5%AE%B6%E4%B8%89%E5%B0%91.html" target="_blank"> 唐家三少 </a>
<a href="https://www.qidian.com/soushu/%E4%BC%9A%E8%AF%B4%E8%AF%9D%E7%9A%84%E8%82%98%E5%AD%90%20.html" target="_blank"> 会说话的肘子 </a>
<a href="https://www.qidian.com/soushu/%E8%80%B3%E6%A0%B9.html" target="_blank"> 耳根 </a>
<a href="https://www.qidian.com/soushu/%E5%BF%98%E8%AF%AD%20.html" target="_blank"> 忘语 </a>
<a href="https://www.qidian.com/soushu/%E5%A4%A9%E8%9A%95%E5%9C%9F%E8%B1%86%20.html" target="_blank"> 天蚕土豆 </a>
<a href="https://www.qidian.com/soushu/%E8%A8%80%E5%BD%92%E6%AD%A3%E4%BC%A0.html" target="_blank"> 言归正传 </a>
<a href="https://www.qidian.com/soushu/%E5%8D%96%E6%8A%A5%E5%B0%8F%E9%83%8E%E5%90%9B.html" target="_blank"> 卖报小郎君 </a>

</html>