绘制极坐标图形时需要使用角度轴和径向轴两个方向的布局
角度轴其实类似于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" }]',
};
欢迎讨论~ 有问题的可以提出,那就是我错了~