UCharts配置个性化图表：折柱混合、条状图、渐变
- 折线
- 圆滑折线
- 柱状图
- 饼图
- 条状图
- 折柱混合渐变
折线
效果图：
配置：
const opts = {
color: ["#B7E55D", "#78DAE6", "#FF432A", "#FF9641", "#FFDF3D"], //颜色配置
dataLabel: false, //不显示图表区域内数据点上方的数据文案
legend: {
position: "top", //图例相对画布的显示位置，可选值：'bottom','top','left','right'
margin: 10, //图例外侧填充边距
fontColor: "#333" //字体眼色
},
xAxis: {
disableGrid: true,
fontColor: "#999",
axisLineColor: "#DFE3EB"
},
yAxis: {
gridType: "dash",
gridColor: "#DFE3EB",
dashLength: 2,
showTitle: true,
data: [{
title: "万元",
fontColor: "#999",
titleFontColor: "#999",
axisLineColor: "#DFE3EB",
titleOffsetY: -5,
titleOffsetX: -12
}]
},
extra: {
line: {
type: "straight"
},
tooltip: { //提示窗
showArrow: false, //是否显示箭头
borderRadius: 4, //圆角大小
bgOpacity: 0.6, //背景色透明度
}
}
}
圆滑折线
效果图：
配置：
const opts = {
color: ["#B7E55D", "#78DAE6", "#FF432A", "#FF9641", "#FFDF3D"], //颜色配置
dataLabel: false, //不显示图表区域内数据点上方的数据文案
dataPointShape: false,
legend: {
position: "top", //图例相对画布的显示位置，可选值：'bottom','top','left','right'
margin: 10, //图例外侧填充边距
fontColor: "#333" //字体眼色
},
xAxis: {
disableGrid: true,
fontColor: "#999",
axisLineColor: "#DFE3EB"
},
yAxis: {
gridType: "dash",
gridColor: "#DFE3EB",
dashLength: 2,
showTitle: true,
data: [{
title: "万元",
fontColor: "#999",
titleFontColor: "#999",
axisLineColor: "#DFE3EB",
titleOffsetY: -5,
titleOffsetX: -12
}]
},
extra: {
line: {
type: "curve"
},
tooltip: { //提示窗
showArrow: false, //是否显示箭头
borderRadius: 4, //圆角大小
bgOpacity: 0.6, //背景色透明度
}
}
}
柱状图
效果图：
配置：
const opts = {
color: ["#1CC68E", "#5898FF"],
dataLabel: false, //不显示图表区域内数据点上方的数据文案
legend: {
position: "top", //图例相对画布的显示位置，可选值：'bottom','top','left','right'
float:"right",
margin: 10, //图例外侧填充边距
fontColor: "#333" //字体眼色
},
xAxis: {
disableGrid: true,
fontColor: "#999",
axisLineColor: "#DFE3EB"
},
yAxis: {
gridType: "dash",
gridColor: "#DFE3EB",
dashLength: 2,
showTitle: true,
data: [{
title: "万元",
fontColor: "#999",
titleFontColor: "#999",
axisLineColor: "#DFE3EB",
titleOffsetY: -5,
titleOffsetX: -12
}]
},
extra: {
tooltip: { //提示窗
showArrow: false, //是否显示箭头
borderRadius: 4, //圆角大小
bgOpacity: 0.6, //背景色透明度
}
}
}
饼图
效果图：
配置：
const opts = {
color: ["#FEB587", "#21ADF9", "#A896FE ", "#1FCC9A"],
legend: {
position: "top", //图例相对画布的显示位置，可选值：'bottom','top','left','right'
float: "right",
margin: 10, //图例外侧填充边距
fontColor: "#333" //字体眼色
},
extra: {
pie: {
},
tooltip: { //提示窗
showArrow: false, //是否显示箭头
borderRadius: 4, //圆角大小
bgOpacity: 0.6, //背景色透明度
}
}
}
条状图
效果图：
配置：
const opts = {
color: ["#FF6F5D", "#FFD589"],
dataLabel: false, //不显示图表区域内数据点上方的数据文案
legend: {
position: "top", //图例相对画布的显示位置，可选值：'bottom','top','left','right'
float:"right",
margin: 10, //图例外侧填充边距
fontColor: "#333" //字体眼色
},
xAxis: {
axisLine: false,
fontColor: "#999",
gridType: "dash",
gridColor: "#DFE3EB",
},
yAxis: {
gridType: "dash",
gridColor: "#DFE3EB",
dashLength: 2,
showTitle: true,
data: [{
title: "万元",
fontColor: "#999",
titleFontColor: "#999",
axisLineColor: "#DFE3EB",
titleOffsetY: -5,
titleOffsetX: -12
}]
},
extra: {
bar: {
type: "group",
width: 12,
linearType: "custom",
customColor:["#F64250", "#FF885D"],
barBorderCircle: true,
seriesGap: 2,
categoryGap: 2
},
tooltip: { //提示窗
showArrow: false, //是否显示箭头
borderRadius: 4, //圆角大小
bgOpacity: 0.6, //背景色透明度
}
}
}
折柱混合渐变
效果图：
配置：
const opts = {
color: ["#3D87FF", "#31C97C"],
dataLabel: false, //不显示图表区域内数据点上方的数据文案
legend: {
position: "top", //图例相对画布的显示位置，可选值：'bottom','top','left','right'
float: "right",
margin: 10, //图例外侧填充边距
fontColor: "#333" //字体眼色
},
xAxis: {
disableGrid: true,
fontColor: "#999",
axisLineColor: "#DFE3EB"
},
yAxis: {
gridType: "dash",
gridColor: "#DFE3EB",
dashLength: 2,
showTitle: true,
data: [{
title: "万元",
fontColor: "#999",
titleFontColor: "#999",
axisLineColor: "#DFE3EB",
titleOffsetY: -5,
titleOffsetX: -12
}]
},
extra: {
mix: {
column: {
type: "group",
width: 10,
seriesGap: 5,
linearOpacity: 0.5,
barBorderCircle: true,
linearType: "custom",
customColor: [
"#E7F2FD"
]
}
},
tooltip: { //提示窗
showArrow: false, //是否显示箭头
borderRadius: 4, //圆角大小
bgOpacity: 0.6, //背景色透明度
}
}
}
