【记录】Echart 双圆角圆环配置

效果图:

鼠标悬浮效果图

配置:

var option = {
  angleAxis: {
    startAngle: 90,
    axisLabel: {
      show: false // 隐藏极坐标角度刻度标签
    },
    axisLine:{
      show: false // 是否显示坐标轴轴线。
    },
    axisTick: {
      show: false //是否显示坐标轴刻度。
    },
    splitLine:{
      show: false
    }
  },
  radiusAxis: {
    type: 'category',
    axisLabel: {
            show: false // 隐藏极坐标角度刻度标签
    },
    axisLine:{
      show: false // 是否显示坐标轴轴线。
    },
    axisTick: {
      show: false //是否显示坐标轴刻度。
    },
  },
  polar: {
    radius: [100,'50%']
  },
  series: [
    {
      type: 'bar',
      name: '第一',
      zlevel: 2,
      data: [{
      value: 50,
      itemStyle: {
        color: "rgba(234, 68, 68, 1)"
      }
    },],
      coordinateSystem: 'polar',
      roundCap: true, // 圆角
      stack: 'c', // 轨道【同名可多个数据渲染同一轨道】
    },
    {
      type: 'bar',
      name: '第二',
      data: [{
      value: 50,
      itemStyle: {
        color: "rgba(0, 68, 68, 1)"
      }
    }],
      coordinateSystem: 'polar',
      roundCap: true,
      stack: 'c', // 轨道【同名可多个数据渲染同一轨道】
    }
  ],
  legend: {
    show: true,
    // data: ['第一', '第二'] // series的names
  }
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容