Echarts在线免费图表

 
            
      let xl = [
        { value: 100, name: "小学", color: "#5087EC" },
        { value: 150, name: "初中", color: "#68BBC4" },
        { value: 120, name: "高中", color: "#58A55C" },
        { value: 100, name: "中专", color: "#F2BD42" },
        { value: 140, name: "大专", color: "#EE752F" },
        { value: 160, name: "本科", color: "#D95040" },
        { value: 180, name: "研究生", color: "#14CAFB" },
      ];
      let option = {
        // 设置背景颜色为白色
        backgroundColor: "#061D3D",
        // 设置饼图标题配置
        title: {
          text: "学历比例", // 饼图标题文本
          left: "center", // 标题居中显示
          textStyle: {
            color: "#fff", // 标题字体颜色为黑色
            fontSize: 14, // 标题字体大小为24px
            fontWeight: "bold", // 标题字体加粗
          },
        },
        // 设置提示框样式配置
        tooltip: {
          show: false,
          // 自定义提示框内容格式化函数
        },
        // 设置图例配置
        legend: {
          // orient: "vertical", // 图例排列方向为垂直
          bottom: 10, // 图例距离容器上边缘的距离为20px
          left: 'center', // 图例距离容器左边缘的距离为40px
          itemWidth: 15, // 图例项宽度为15px
          itemHeight: 10, // 图例项高度为10px
          itemGap: 20, // 图例项间隔为25px
          borderRadius: 4, // 图例项圆角为4px
          textStyle: {
            color: "#fff", // 图例文本颜色为黑色
            fontFamily: "Alibaba PuHuiTi", // 图例文本字体为"Alibaba PuHuiTi"
            fontSize: 14, // 图例文本字体大小为14px
            fontWeight: 400, // 图例文本字体粗细为400
          },
        },
        // 设置饼图系列配置
        series: [
          {
            name: "Access From", // 系列名称
            type: "pie", // 系列类型为饼图
            radius: "50%", // 饼图半径为整个容器的50%
            center: ["50%", "50%"], // 饼图中心位置为容器的中心
            // 饼图数据项配置
            data: xl,
            emphasis: {
              itemStyle: {
                shadowBlur: 0,
                shadowOffsetX: 0,
                // shadowColor: "rgba(0, 0, 0, 0)",
              },
            },
            label: {
              normal: {
                formatter: "{b|{b}}\n{d|{c}}",
                rich: {
                  b: {
                    fontSize: 14,
                    color: "#fff",
                    align: "left",
                    padding: [0, 0, 0, 0],
                  },
                  d: {
                    fontSize: 16,
                    color: "#68BBC4",
                    align: "left",
                    padding: [4, 0, 0, 0],
                  },
                },
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 15,
                length2: 30,
              },
            },
            // 饼图数据项样式配置
            itemStyle: {
              borderRadius: 8, // 扇区圆角为8px
              borderWidth: 2, // 扇区边框宽度为2px
              borderColor: "#051A39", // 扇区边框颜色为白色
              // 设置每个扇区的颜色
              color: function (params) {
                return params.data.color; // 根据数据项中的color属性设置颜色
              },
            },
          },
        ],
      };

      // window.addEventListener("resize", function () {
      //   myChart7.resize();
      // });
      // if (option7 && typeof option7 === "object") {
      //   myChart7.setOption(option7, true);
      //   refreshChart(myChart7, option7);
      // }
      // // 刷新图表
      // function refreshChart(chartID, option) {
      //   setInterval(function () {
      //     chartID.clear();
      //     chartID.setOption(option, true);
      //   }, 6000);
      // }