Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

百度Echarts仪表盘系列之自定义圆环

// value值
let num=85;
// 通过值控制圆环缺口
let arr=[95,15];
// 圆环起始角度
let startAngle=-((arr[1]/100)*360)/2;
let radius=["42%", "44%"];
let radius2=["56%", "58%"];
let radius3='53%';
option = {
   backgroundColor:'#030c2b',
   title:{
      text:'进度:'+num ,
      textStyle:{
          color:'#fff',
          fontSize:40
      },
      top:'47%',
      left:'60%'
   },
  polar: [
    {
      radius: ["33.5%", "63%"],
      center: ["50%", "50%"],
    },
  ],
  angleAxis: {
    max: 100,
    show: false,
    inverse: false,
  },
  radiusAxis: {
    type: "category",
    show: true,
    axisLabel: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    //极坐标柱状图
    {
      type: "pie",
      zlevel: 0,
      silent: true,
      startAngle: startAngle,
      radius: radius,
      z: 1,
      label: {
        normal: {
          show: false,
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      itemStyle: {
        color: (params) => {
          if (params.data == 15) {
            return "transparent";
          } else {
            return '#3579f6';
          }
        },
      },
      data: arr,
    },
    {
      type: "pie",
      zlevel: 0,
      silent: true,
      startAngle: startAngle,
      radius: radius2,
      z: 1,
      label: {
        normal: {
          show: false,
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      itemStyle: {
        color: (params) => {
          if (params.data == 15) {
            return "transparent";
          } else {
            return '#3579f6';
          }
        },
      },
      data: arr,
    },
    //分割刻度
    {
      type: "gauge",
      radius: radius3,
      clockwise: false,
      startAngle: startAngle,
      endAngle: 360+startAngle-0.000001,
      splitNumber: 30,
      detail: {
        offsetCenter: [0, 0],
        formatter: " ",
      },
      pointer: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: [
            [0, "#fff"],
            [-startAngle / 180, "transparent"],
            [(100/(arr[0]/100) - num) / (100/(arr[0]/100)), "rgba(53,53,53,.3)"],
            [1, "#3579f6"],
          ],
          width: 26,
          shadowColor: "#3579f6",
          shadowBlur: 1,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        length: 26,
        distance:-26,
        lineStyle: {
          color: "rgba(0,0,0,1)",
          width: 4,
        },
      },
      axisLabel: {
        show: false,
      },
    },
  ],
};

点击运行 》

点击展开全文

相关文章

  1. 百度echarts饼图之仪表盘系列
  2. 百度echarts多仪表盘
  3. 百度echarts仪表盘颜色设成渐变色