(function () {
  var myChart = echarts.init(document.querySelector(".pie .chart"));
  var pieData = [
    { name: '现代诗', value: 8031 },
    { name: '唐诗', value: 174928 },
    { name: '宋词', value: 342 },
    { name: '元曲', value: 55595 },
    { name: '清代诗', value: 1001 },
    { name: '当代诗', value: 11617 },
    { name: '明代律诗', value: 26715 },
    { name: '新诗运动诗歌车', value: 29224 },
  ]
  option = {
    color: [
      "#A0CE3A",
      "#31C5C0",
      "#1E9BD1",
      "#0F347B",
      "#585247",
      "#7F6AAD",
      "#009D85",
      "rgba(250,250,250,0.3)",
    ],
    legend: {
      orient: "vertical",
      top: "middle",
      right: "3%",
      textStyle: {
        color: "#f2f2f2",
        fontSize: transformFontSize(12),
      },
      icon: "roundRect",
      data: pieData,
    },
    tooltip: {
      show: true,
      valueFormatter: (value) => value + '个'
    },
    series: [
      // 主要展示层的
      {
        radius: ["30%", "65%"],
        center: ["37%", "50%"],
        type: "pie",
        label: {
          normal: {
            show: false,
            formatter: "{c}个",
            textStyle: {
              color: "rgba(250,250,250)",
              fontSize: transformFontSize(12),
            },
            position: "outside",
          },
          emphasis: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
            length: transformFontSize(5),
            length2: 0
          },
          emphasis: {
            show: true,
          },
        },
        name: "阅读数",
        data: pieData,
      },
      // 边框的设置
      {
        radius: ["30%", "34%"],
        center: ["37%", "50%"],
        type: "pie",
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        animation: false,
        tooltip: {
          show: false,
        },
        data: [
          {
            value: 1,
            itemStyle: {
              color: "rgba(250,250,250,0.3)",
            },
          },
        ],
      },
      {
        name: "外边框",
        type: "pie",
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        center: ["37%", "50%"],
        radius: ["70%", "70%"],
        label: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 9,
            name: "",
            itemStyle: {
              normal: {
                borderWidth: 2,
                borderColor: "#0b5263",
              },
            },
          },
        ],
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();


(function () {
  var myChart = echarts.init(document.querySelector(".pie1 .chart"));
  option = {
    legend: {
      top: 'bottom'
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [20, 100],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: [
          { value: 30, name: '春' },
          { value: 24, name: '夏' },
          { value: 24, name: '秋' },
          { value: 18, name: '冬' },
          
        ]
      }
    ]
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

(function () {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".words .chart"));
  option = {
    series: [
      {
        name: "热点分析",
        type: "wordCloud",
        // size: ['9%', '99%'],
        // sizeRange: [6, 66],//最小文字——最大文字
        // textRotation: [0, 45, 90, -45],
        // rotationRange: [-45, 90],//旋转角度区间
        // rotationStep: 90,//旋转角度间隔
        // shape: 'circle',
        // gridSize: 10,//字符间距
        textPadding: 0,
        autoSize: {
          enable: true,
          minSize: 6,
        },
        textStyle: {
          normal: {
            color: function () {
              return (
                "rgb(" +
                [
                  Math.round(Math.random() * 105) + 150,
                  Math.round(Math.random() * 105) + 150,
                  Math.round(Math.random() * 105) + 150,
                ].join(",") +
                ")"
              );
            },
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: "#333",
          },
        },
        data: [
          // {
          //   name: "无线充电",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "人机交互",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "城市小钢炮",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "经济/运动模式",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "电池终身质保",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "小巧好停好开",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "提速快",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "拐弯半径小",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "比油车省太多",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "eco+模式续航",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "前脸设计",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "安全配置全",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "ESP",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "悬挂滤震",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "后排空间大",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "科技感爆棚",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "手机操控开锁",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "防眩光后视镜",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "座椅加热",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "极简风格",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "防盗功能",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "细腻如画，情深意长。",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "人机交互流畅",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "无比澎湃的动力",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "时尚霸气",
          //   value: Math.random() * 100,
          // },
          // {
          //   name: "穿云箭式前脸",
          //   value: Math.random() * 100,
          // },
          {
            name: "凝重深远",
            value: Math.random() * 100,
          },
          {
            name: "高级感",
            value: Math.random() * 100,
          },
          {
            name: "言简意赅",
            value: Math.random() * 100,
          },
          {
            name: "细腻如画",
            value: Math.random() * 100,
          },
          
          {
            name: "情景交融",
            value: Math.random() * 100,
          },
          {
            name: "情深意长",
            value: Math.random() * 100,
          },
          {
            name: "意象生动",
            value: Math.random() * 100,
          },
        ],
      },
    ],
  };

  // 3. 配置项和数据给我们的实例化对象
  myChart.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();


(function () {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".bar .chart"));
  xData = ["《登高》", "《将进酒》", "《水调歌头》", "《赋得古原草送别》", "《送别》", "《如梦令》", "《春晓》", "《菩萨蛮》", "《小池》", "《青玉案·元夕》"];
  yData = [33193, 28373, 14537, 10680, 9671, 9469, 9280, 7522, 7378, 7356];
  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: 0,
      top: 15,
      right: 40,
      bottom: -15,
      containLabel: true
    },
    xAxis: {
      show: false,
    },
    yAxis: [
      {
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        axisLabel: {
          textStyle: {
            color: "#81E7ED",
          },
        },
        data: xData,
      },
    ],
    series: [
      {
        name: "上牌数",
        type: "bar",
        data: yData,
        label: {
          normal: {
            show: true,
            position: "right",
            formatter: function (param) {
              return param.value + "个";
            },
            textStyle: {
              color: "#ffffff",
            },
          },
        },
        barWidth: transformFontSize(13),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
            {
              offset: 0,
              color: "#00FFE3",
            },
            {
              offset: 1,
              color: "#4693EC",
            },
          ]),
          barBorderRadius: [30, 30, 30, 30],
        },
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 
(function () {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".bar1 .chart"));
  const labelRight = {
    position: 'right'
  };
  option = {
    
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: 80,
      bottom: 30
    },
    xAxis: {
      type: 'value',
      position: 'top',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'category',
      axisLine: { show: false },
      axisLabel: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      data: [
        '春',
        '夏',
        '秋',
        '冬',
        
      ]
    },
    series: [
      {
        name: 'Cost',
        type: 'bar',
        stack: 'Total',
        label: {
          show: true,
          formatter: '{b}'
        },
        data: [
          { value: -24,  },
          { value: 18,},
          -24,
          24,
          
        ]
      }
    ]
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();


(function () {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".map .chart"));
  var lineYear = [202206, 202207, 202208, 202209, 202210, 202211, 202212, 202301];
  var lineOneData = [28377, 51268, 30481, 44944, 31295, 53550, 55453, 12085];  // 新能源
  var lineTwoData = [20768, 16588, 19327, 30162, 16270, 32470, 31849, 10228];  // 纯电动
  var lineThreeData = [6394, 8073, 10468, 13077, 13025, 17901, 18821, 1590];   // 油电混合
  var lineFourData = [1215, 973, 686, 1705, 2000, 3179, 4783, 267];   // 增程式 
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#dddc6b"
        }
      }
    },
    legend: {
      top: "10%",
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: transformFontSize(16)
      }
    },
    grid: {
      left: "2%",
      top: "23%",
      right: "6%",
      bottom: "6%",
      containLabel: true
    },
    calculable: true,
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: "#90979c",
        },
      },
      splitLine: "none",
      axisTick: "none",
      splitArea: "none",
      axisLabel: {
        interval: 0,
        fontSize: transformFontSize(16)
      },
      data: lineYear,
    },
    yAxis: {
      type: "value",
      axisTick: { show: false },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      },
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: transformFontSize(16)
        }
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    },
    series: [
      {
        name: "唐诗",
        type: "line",
        symbol: "circle",
        symbolSize: 5,
        lineStyle: {
          normal: {
            color: "#0184d5",
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(1, 132, 213, 0.4)"
                },
                {
                  offset: 0.8,
                  color: "rgba(1, 132, 213, 0.1)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
          }
        },
        itemStyle: {
          color: "#0184d5",
        },
        data: lineOneData,
      },
      {
        name: "宋词",
        type: "line",
        symbol: "circle",
        symbolSize: 5,
        lineStyle: {
          normal: {
            color: "#00d887",
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(0, 216, 135, 0.4)"
                },
                {
                  offset: 0.8,
                  color: "rgba(0, 216, 135, 0.1)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
          }
        },
        itemStyle: {
          normal: {
            color: "#00d887",
          }
        },
        data: lineTwoData
      },
      {
        name: "元曲",
        type: "line",
        symbol: "circle",
        symbolSize: 5,
        lineStyle: {
          color: "#F8B448",
          width: 2
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(248,180,72, 0.4)"
                },
                {
                  offset: 0.8,
                  color: "rgba(248,180,72, 0.1)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
          }
        },
        itemStyle: {
          color: "#F8B448",
        },
        data: lineThreeData
      },
      {
        name: "现代诗",
        type: "line",
        symbol: "circle",
        symbolSize: 5,
        lineStyle: {
          normal: {
            color: "#e32f46",
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(227,47,70, 0.4)"
                },
                {
                  offset: 0.8,
                  color: "rgba(227,47,70, 0.1)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
          }
        },
        itemStyle: {
          color: "#e32f46",
        },
        data: lineFourData
      },

    ]
  };

  // 3. 配置项和数据给我们的实例化对象
  myChart.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();


(function () {
  var speed = 50;
  var list = document.getElementById('list');
  var list2 = document.getElementById('list2');
  var rule = document.getElementById('rule');
  list2.innerHTML = list.innerHTML;
  function Marquee() {
    if (list2.offsetTop - rule.scrollTop <= 0)
      rule.scrollTop -= list.offsetHeight;
    else {
      rule.scrollTop++;
    }
  }
  var MyMar = setInterval(Marquee, speed);
  rule.addEventListener('mouseover', function () {
    clearInterval(MyMar)
  });
  rule.addEventListener('mouseout', function () {
    MyMar = setInterval(Marquee, speed)
  });
})();

function transformFontSize(px) {
  let clientWidth = window.innerWidth || document.body.clientWidth
  if (!clientWidth) {
    return 0
  }
  let fontSize = clientWidth / 1920
  return px * fontSize
}