Echarts在线免费图表

 
            const newData = {
   value: 80,
   name: "当前学校总数",
   max: 100,
}
option = {
   //你的代码
   backgroundColor: "#000",
   title: [
      {
         text: newData.name,
         x: "50%",
         y: "55%",
         textAlign: "center",
         textStyle: {
            fontWeight: "normal",
            fontSize: "22",
            fontFamily: "SourceHanSansCN-Medium",
            color: "#ffffff",
         },
      },
      {
         text: newData.value,
         x: "49%",
         y: "40%",
         textAlign: "center",
         textStyle: {
            fontWeight: "normal",
            fontSize: "40",
            fontFamily: "SourceHanSansCN-Medium",
            color: "#66FFFF",
         },
      },
   ],
   angleAxis: {
      show: false,

      max: (newData.max * 360) / 270, //-45度到225度，二者偏移值是270度除360度

      type: "value",

      startAngle: 225, //极坐标初始角度

      splitLine: {
         show: false,
      },
   },

   barMaxWidth: 18, //圆环宽度

   radiusAxis: {
      show: false,

      type: "category",
   },

   //圆环位置和大小

   polar: {
      center: ["50%", "50%"],

      radius: "120%",
   },
   series: [
      // 最外层圆环形
      {
         type: "gauge",
         radius: "92%", // 1行3个
         center: ["50%", "50%"],
         splitNumber: 10,
         // min: 0,
         max: 100,

         startAngle: 225,
         endAngle: -45,
         z: 99,

         // 线
         axisLine: {
            lineStyle: {
               width: 1,
               color: [[1, "rgba(255,255,255,0)"]],
            },
            detail: {
               formatter: "{value}",
            },
            data: [
               {
                  value: 50,
                  name: "SCORE",
               },
            ],
         },
         // //刻度标签。
         axisTick: {
            show: true,
            splitNumber: 5, //刻度的段落数
            lineStyle: {
               color: "#103781",
               width: 1, //刻度的宽度
            },
            length: 25, //刻度的长度
         },
         splitLine: {
            //文字和刻度的偏移量
            show: false,
         },
         //刻度线文字
         axisLabel: {
            show: false,
         },
         pointer: {
            show: false,
         },

         title: {
            // 仪表盘标题。
            show: false,
         },
      },
      // 第二层带分界线圆环
      {
         type: "gauge",
         radius: "75%", // 1行3个
         center: ["50%", "50%"],
         splitNumber: 10,
         // min: 0,
         max: 100,

         startAngle: 225,
         endAngle: -45,
         z: 99,

         // 线
         axisLine: {
            lineStyle: {
               width: 1,
               color: [[1, "rgba(255,255,255,0)"]],
            },
            detail: {
               formatter: "{value}",
            },
            data: [
               {
                  value: 50,
                  name: "SCORE",
               },
            ],
         },
         // //刻度标签。
         axisTick: {
            show: true,
            splitNumber: 5, //刻度的段落数
            lineStyle: {
               color: "#103781",
               width: 2, //刻度的宽度
               shadowColor: "#67FFFC",
               shadowBlur: 1,
            },
            length: 4, //刻度的长度
         },
         splitLine: {
            //文字和刻度的偏移量
            show: true,
            length: -15, //长度
            distance: 11,
            lineStyle: {
               color: "#66FFFF",
               width: 3,
            },
         },
         // 刻度线文字
         axisLabel: {
         	show: false,
         	// color: "#fff",
         	// fontSize: 10,
         	// distance: 10,
         },
         data: [
            {
               value: newData.value,
               name: "SCORE",
               itemStyle: {
                  color: "#103781",
               },
            },
         ],
         pointer: {
            show: false,
            length: "12%",
            radius: "50%",
            width: 10, //指针粗细
            offsetCenter: [0, -273],
         },
         detail: {
            show: false,
         },
         title: {
            // 仪表盘标题。
            show: false,
         },
      },
      {
         type: "bar",

         data: [
            {
               //上层圆环，显示数据

               value: newData.value,

               // itemStyle: {
               // 	// color: "#1598FF",
               // },
            },
         ],
         itemStyle: {
            borderRadius: "50%",

            opacity: 1,
            color: {
               type: "linear",
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [
                  {
                     offset: 0,
                     color: "rgba(95, 186, 255, 0.2)", // 0% 处的颜色
                  },
                  {
                     offset: 1,
                     color: "rgba(13, 86, 234, 1)", // 100% 处的颜色
                  },
               ],
               global: false, // 缺省为 false
            },
         },
         barGap: "-100%", //柱间距离,上下两层圆环重合

         coordinateSystem: "polar",

         roundCap: true, //顶端圆角

         z: 3, //圆环层级，同zindex
      },
      {
         //下层圆环，显示最大值

         type: "bar",

         data: [
            {
               value: newData.max,

               itemStyle: {
                  color: "#1598FF",

                  opacity: 0.2,

                  borderWidth: 0,
               },
            },
         ],

         barGap: "-100%",

         coordinateSystem: "polar",

         roundCap: true,

         z: 1,
      },
   ],
};