效果图:
配置:
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, //背景色透明度
}
}
}