绘制echarts中的极坐标环形柱状图；柱状渐变；

 

 

绘制极坐标图形时需要使用角度轴和径向轴两个方向的布局

角度轴其实类似于Y轴，用于分割柱状图的间隔大小；

径向轴其实类似与X轴，用于每条数据之间的间距；

角度轴和径向轴其中的配置相类似；

极坐标系的角度轴配置详解

angleAxis: {
    show: style.angleAxisShow,
    startAngle: style.angleAxisStartAngle, // 起始角度
    clockwise: style.angleAxisClockwise,  // 刻度增长是否按顺时针
    min: style.angleAxisMin,  // dataMin 使用最小的值
    max: style.angleAxisMax,  // dataMax 使用最大的值
    // max: max + max / 3,
    // splitNumber: 10, // 坐标轴的分割段数  预估值
    interval: style.angleAxisInterval,  // 分割间隔  单位 值
    // 坐标轴线设置
    axisLine: {
        show: style.angleAxisAxisLineShow,
        lineStyle: {
            color: style.angleAxisAxisLineColor,
            width: style.angleAxisAxisLineWidth, // 线宽
            type: style.angleAxisAxisLineType,  // 线条类型
            opacity: style.angleAxisAxisLineOpacity,// 透明度
        }
    },
    // 坐标轴刻度设置
    axisTick: {
        show: style.angleAxisAxisTickShow,
        length: style.angleAxisAxisTickLength, // 刻度长度
        lineStyle: {
            color: style.angleAxisAxisTickColor,
            width: style.angleAxisAxisTickWidth, // 线宽
            type: style.angleAxisAxisTickType,  // 线条类型
            opacity: style.angleAxisAxisTickOpacity,// 透明度
        }
    },
    // 坐标轴标签样式
    axisLabel: {
        show: style.angleAxisAxisLabelShow,
        margin: style.angleAxisAxisLabelMargin,  // 刻度标签与轴线之间的距离
        color: style.angleAxisAxisLabelColor,
        fontWeight: style.angleAxisAxisLabelFontWeight,
        fontFamily: style.angleAxisAxisLabelFontFamily,
        fontSize: style.angleAxisAxisLabelFontSize,
    },
    // 分隔线
    splitLine: {
        show: style.angleAxisSplitLineShow,
        lineStyle: {
            color: style.angleAxisSplitLineColor,
            width: style.angleAxisSplitLineWidth, // 线宽
            type: style.angleAxisSplitLineType,  // 线条类型
            opacity: style.angleAxisSplitLineOpacity,// 透明度
        }
    }
},

 极坐标系的径向轴

radiusAxis: {
    show: style.radiusAxisShow,
    type: 'category',  // value 数值轴  category 类目轴  time  时间轴  log 对数轴
    // nameLocation: 'end',  // 坐标轴名称显示位置  start 开始位置 center 中间位置  end 结束位置
    // nameGap: 20, // 坐标轴名称与轴线之间的距离
    inverse: style.radiusAxisInverse,  // 是否是反向坐标轴
    data: data.map((item, index) => {
        let idx1 = index + index
        let num1 = idx1 % color.length
        // return item.name;
        return {
            value: item.name,
            textStyle: {
                color: function () {
                    if (style.radiusAxisAxisLabelColorGradients) {  // 标签是否统一颜色
                        return style.radiusAxisAxisLabelColor // 颜色一致
                    } else {
                        if (style.useGradients) { // 按照色系顺序颜色
                            return color[num1]
                        } else { // 间隔一个色系  
                            return color[index]
                        }
                    }
                },  
//  color[index] 按照色系顺序颜色  color[num1] 渐变-间隔一个色系  radiusAxisAxisLabelColor 颜色一致  
            }
        }
    }),
    axisLine: {
        show: style.radiusAxisAxisLineShow,
        lineStyle: {
            color: style.radiusAxisAxisLineColor,
            width: style.radiusAxisAxisLineWidth, // 线宽
            type: style.radiusAxisAxisLineType,  // 线条类型
            opacity: style.radiusAxisAxisLineOpacity,// 透明度
        }
    },
    // 坐标轴刻度设置
    axisTick: {
        show: style.radiusAxisAxisTickShow,
        length: style.radiusAxisAxisTickLength, // 刻度长度
        lineStyle: {
            color: style.radiusAxisAxisTickColor,
            width: style.radiusAxisAxisTickWidth, // 线宽
            type: style.radiusAxisAxisTickType,  // 线条类型
            opacity: style.radiusAxisAxisTickOpacity,// 透明度
        }
    },
    // 坐标轴标签样式
    axisLabel: {
        show: style.radiusAxisAxisLabelShow,
        interval: style.radiusAxisAxisLabelInterval,  // 标签显示间隔 0 显示全部 1给一个标签显示一个
        // rotate: 0,  // 标签旋转
        margin: style.radiusAxisAxisLabelMargin,  // 刻度标签与轴线之间的距离
        color: style.radiusAxisAxisLabelColor,
        fontWeight: style.radiusAxisAxisLabelFontWeight,
        fontFamily: style.radiusAxisAxisLabelFontFamily,
        fontSize: style.radiusAxisAxisLabelFontSize,
        align: style.radiusAxisAxisLabelAlign,  // 标签位置  right center  left
    },
    // 分隔线
    splitLine: {
        show: style.radiusAxisSplitLineShow,
        lineStyle: {
            color: style.radiusAxisSplitLineColor,
            width: style.radiusAxisSplitLineWidth, // 线宽
            type: style.radiusAxisSplitLineType,  // 线条类型
            opacity: style.radiusAxisSplitLineOpacity,// 透明度
        }
    }
},

渐变主要是在径向轴上设置柱状的颜色，我这里进行了多个判断，运行柱状图使用统一颜色和每个柱状有单色颜色且柱状颜色不同，每个柱状里面有两种颜色，多重柱状颜色方式

极坐标系图表 必须有 polar 方法

polar: {
    show: false,
    // 中心点  百分比写法
    center: [style.polarCenterX + '%', style.polarCenterY + '%'], 

柱状图配置

series: [
    {
        type: 'bar',
        barCategoryGap: 100,
        showBackground: style.showBackground, // 显示背景
        // 背景样式
        backgroundStyle: {
            color: style.backgroundStyleColor,
            opacity: style.backgroundStyleOpacity,
        },
        data: data.map((item, index) => {
            let idx1 = index + index
            let idx2 = index + index + 1
            let num1 = idx1 % color.length
            let num2 = idx2 % color.length
            // console.log(idx1, idx2, num1, num2, style.useGradients);
            return {
                value: item.value,
                name: item.name,
                itemStyle: {
                    // color: color[index],
                    color: style.useGradients ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: color[num1],
                        },
                        {
                            offset: 1,
                            color: color[num2],
                        },
                    ]) : color[index],
                },
            };
        }),
        barWidth: style.barWidth,  // 柱状宽度
        coordinateSystem: 'polar',  // 使用坐标系  cartesian2d二维的直角坐标系 polar极坐标系 
        roundCap: style.roundCap, // 在4.5版本以上可以用  环形柱条两侧使用圆弧效果
        itemStyle: {
            opacity: style.barOpacity,// 图形透明度
        },
        barCategoryGap: '10%',
    },
],

最后以上极坐标系环形柱状图所使用的数据

var ebarPolarAttr = {
  id: 313,
  pid: 0,
  dataVisualizationId: 0,
  label: "极坐标柱状图",
  name: "ebarPolar",
  active: false,
  draggable: true,
  resizable: true,
  width: 375,
  height: 260,
  x: 100,
  y: 100,
  px: 0,
  py: 0,
  zindex: 1,
  showZIndex: 1,
  display: "block",
  style: {
    //基本
    rotate: 0, //旋转角度
    opacity: 100, //透明度

    // 内边距
    paddingTop: 30,
    paddingBottom: 30,
    paddingLeft: 30,
    paddingRight: 30,

    maxLoadNum: 2000, //最大加载量
    // 自动提示框
    clearInter: false, // 开启动画
    animationTime: 3, // 动画时间
    //柱形样式
    barWidth: 10, // 柱状宽度
    roundCap: true, // 在4.5版本以上可以用  环形柱条两侧使用圆弧效果
    showBackground: false, // 显示背景
    backgroundStyleColor: "#ccc",
    backgroundStyleOpacity: 1,
    barOpacity: 1, // 图形透明度
    useGradients: false, // 使用柱状渐变
    legendColorList: "#4671C6,#7CCE7A,#FFC655,#FF5C5C,#4BC2DF", //图例色系
    polarCenterX: 50, // 极坐标中心点x
    polarCenterY: 50, // 极坐标中心点x
    //标题
    titleText: "",
    titleFontFamily: "Microsoft YaHei",
    titleFontWeight: 400,
    titleFontSize: 16,
    titleColor: "#fff",
    subTitleText: "",
    subTitleFontFamily: "Microsoft YaHei",
    subTitleFontWeight: 400,
    subTitleFontSize: 12,
    subTitleColor: "#fff",
    titleTop: "top", // 垂直位置
    titleLeft: "left", //水平位置
    //值标签
    labelShow: false, //是否显示值标签
    labelFontFamily: "Microsoft YaHei",
    labelFontWeight: 400,
    labelFontSize: 16,
    labelColor: "#fff",
    labelPosition: "top", //显示位置
    labelUnit: "", //单位
    labelFormatter: "{c}",
    //提示框
    tooltipShow: true,
    tooltipColor: "#ffffff", //文字颜色
    tooltipFontFamily: "Microsoft YaHei",
    tooltipFontWeight: 400,
    tooltipFontSize: 12,

    tooltipBg: "#000000", //背景色
    tooltipBgOpacity: 50, //背景透明度
    tooltipBgRGBA: "rgba(00, 00, 00,0.5)", //背景RGBA形式的值
    tooltipBoxShadowColor: "#000000", //阴影颜色
    tooltipBoxShadowSize: 5, //阴影大小
    tooltipFormatterName: true,
    tooltipFormatterNameText: "名字:",
    tooltipFormatterValue: true,
    tooltipFormatterValueText: "值：",
    tooltipFormatterPercentage: true,
    tooltipFormatterPercentageText: "占比：",

    crosshairsColor: "#fff", //辅助线颜色
    crosshairsWidth: 1, //辅助线粗细

    //
    //
    // 极坐标系的角度轴
    angleAxisShow: true,
    angleAxisStartAngle: 90, // 起始角度
    angleAxisClockwise: true, // 刻度增长是否按顺时针
    angleAxisMin: 0, // dataMin 使用最小的值
    angleAxisMax: 300, // dataMax 使用最大的值
    angleAxisInterval: 50, // 分割间隔  单位 值
    // 坐标轴线设置
    angleAxisAxisLineShow: true,
    angleAxisAxisLineColor: "#ffffff",
    angleAxisAxisLineWidth: 1, // 线宽
    angleAxisAxisLineType: "solid", // 线条类型
    angleAxisAxisLineOpacity: 1, // 透明度
    // 坐标轴刻度设置
    angleAxisAxisTickShow: true,
    angleAxisAxisTickLength: 5, // 刻度长度
    angleAxisAxisTickColor: "#ffffff",
    angleAxisAxisTickWidth: 1,
    angleAxisAxisTickType: "solid", // 线条类型
    angleAxisAxisTickOpacity: 1, // 透明度
    // 坐标轴标签样式
    angleAxisAxisLabelShow: true,
    angleAxisAxisLabelMargin: 8, // 刻度标签与轴线之间的距离
    angleAxisAxisLabelColor: "#ffffff",
    angleAxisAxisLabelFontWeight: 400,
    angleAxisAxisLabelFontFamily: "微软雅黑",
    angleAxisAxisLabelFontSize: 14,
    // 分隔线
    angleAxisSplitLineShow: true,
    angleAxisSplitLineColor: "#ffffff",
    angleAxisSplitLineWidth: 1, // 线宽
    angleAxisSplitLineType: "solid", // 线条类型
    angleAxisSplitLineOpacity: 1, // 透明度
    //
    //
    // 极坐标系的径向轴
    radiusAxisShow: true,
    radiusAxisInverse: false, // 是否是反向坐标轴
    // 坐标轴线设置
    radiusAxisAxisLineShow: true,
    radiusAxisAxisLineColor: "#ffffff",
    radiusAxisAxisLineWidth: 1, // 线宽
    radiusAxisAxisLineType: "solid", // 线条类型
    radiusAxisAxisLineOpacity: 1, // 透明度
    // 坐标轴刻度设置
    radiusAxisAxisTickShow: true,
    radiusAxisAxisTickLength: 5, // 刻度长度
    radiusAxisAxisTickColor: "#ffffff",
    radiusAxisAxisTickWidth: 1,
    radiusAxisAxisTickType: "solid", // 线条类型
    radiusAxisAxisTickOpacity: 1, // 透明度
    // 坐标轴标签样式
    radiusAxisAxisLabelShow: true,
    radiusAxisAxisLabelColorGradients: true, // 颜色统一
    radiusAxisAxisLabelInterval: 0, // 标签显示间隔 0 显示全部 1给一个标签显示一个
    radiusAxisAxisLabelMargin: 8, // 刻度标签与轴线之间的距离
    radiusAxisAxisLabelColor: "#ffffff",
    radiusAxisAxisLabelFontWeight: 400,
    radiusAxisAxisLabelFontFamily: "微软雅黑",
    radiusAxisAxisLabelFontSize: 14,
    radiusAxisAxisLabelAlign: "right", // 标签位置  right center  left
    // 分隔线
    radiusAxisSplitLineShow: true,
    radiusAxisSplitLineColor: "#ffffff",
    radiusAxisSplitLineWidth: 1, // 线宽
    radiusAxisSplitLineType: "solid", // 线条类型
    radiusAxisSplitLineOpacity: 1, // 透明度

    //
    //
    //工具箱
    showDataZoom: false, //区域缩放
    showDataView: false, //数据视图
    showMagicType: false, //图表类型
    showStacking: false, //是否堆叠
    showRestore: false, //还原
    showSaveAsImage: false, //保存图片

  },
  data:
    '[{ "value": 150, "name": "Mon" },{ "value": 230, "name": "Tue" },{ "value": 224, "name": "Wed" },{ "value": 218, "name": "Thu" },{ "value": 135, "name": "Fri" }]',
};

---

 欢迎讨论~ 有问题的可以提出，那就是我错了~