1654754851701.png

    1. //option配置项
    2. option = {
    3.   angleAxis: {   //极坐标系的角度轴
    4.     axisLine: {
    5.       show: false  //是否显示坐标轴轴线
    6.     },
    7.     axisLabel: {
    8.       show: false  //是否显示刻度标签
    9.     },
    10.     splitLine: {
    11.       show: false  //是否显示分隔线
    12.     },
    13.     axisTick: {
    14.       show: false  //是否显示坐标轴刻度
    15.     },
    16.     min: 0,     //最小值
    17.     max: 200,   //最大值---根据数据设置
    18.     startAngle: 180  //开始角度
    19.   },
    20.   radiusAxis: {  //极坐标系的径向轴
    21.     type: 'category',
    22.     axisLine: {
    23.       show: false
    24.     },
    25.     axisTick: {
    26.       show: false
    27.     },
    28.     axisLabel: {
    29.       show: false
    30.     },
    31.     z: 10
    32.   },
    33.   polar: {
    34.     radius: 230  //极坐标的外半径值
    35.   },
    36.   series: [
    37.     {
    38.       type: 'bar',
    39.       data: [80],  //数据
    40.       coordinateSystem: 'polar', //使用极坐标系
    41.       barMaxWidth: 16,
    42.       z: 2, //设置层级
    43.       roundCap: true, //环形柱两侧是否使用圆弧效果（右，下，左，上）
    44.       color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
    45.         { offset: 0, color: '#00B4FF' },
    46.         { offset: 1, color: '#0685F5' }
    47.       ]),   //设置颜色渐变
    48.       barGap: '-100%' //设置柱子重叠
    49.     },
    50.     {
    51.       type: 'bar',
    52.       data: [100],  //如果与max值相同，则是一个封闭的圆环
    53.       z: 0,
    54.       silent: true, //不响应鼠标事件，默认为false响应鼠标事件
    55.       coordinateSystem: 'polar',
    56.       barMaxWidth: 16,
    57.       roundCap: true,
    58.       color: '#1E2534',
    59.       barGap: '-100%'
    60.     }
    61.   ]
    62. };