echarts 尖峰图 三角形弧线
echarts随意一个示例代码
直接点击上方链接↑↑↑将此段代码↓↓↓放到echarts的示例代码编辑框里:
var xdata = ['返利人员', '下线人员', 123, 123, 123, 123];
var data = [100, 200, 23, 73, 123, 123];
option = {
grid: {
left: '2%',
right: '3%',
bottom: '2%',
top: '5%',
containLabel: true
},
xAxis: {
data: xdata,
triggerEvent: true,
axisTick: {
// 刻度线
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
rotate: 0,
interval: 0,
textStyle: {
color: '#9A9A9A',
fontSize: 15
}
}
},
yAxis: {
nameLocation: 'middle',
nameTextStyle: {
padding: 30,
fontSize: 14,
color: '#fff'
},
splitLine: {
show: true,
lineStyle: {
color: '#304849',
type: 'dashed'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
// y轴线
show: true,
textStyle: {
color: '#9A9A9A',
fontSize: 15
}
}
},
series: [
{
name: 'hill',
type: 'pictorialBar',
barCategoryGap:'-80%',/*多个并排柱子设置柱子之间的间距*/
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
itemStyle: {
borderColor: "#00FF66",
borderWidth: 1,
// 渐变色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(0, 239, 67, 0.3)'
},
{
offset: 1,
color: 'rgba(0, 81, 23, 0.3)'
}
])
},
label: {
// 数据上方显示数值
show: true,
position: 'top',
textStyle: {
color: '#fff',
fontSize: 15
}
},
data: data
}
]
};