在最近业务开展过程中,涉及到highcharts和echarts的图表数据展示颇多,后UI设计师根据数据展示要求设计出花里胡哨的图表样式,正好最近也来研究一下,后续会补几篇相关博文。废话也不多说,先上效果:
以下为实例代码(可直接复制至echarts官网查看效果)
option = {
grid: {
left: '-5%',
right: '7%',
bottom: '3%',
top:'7%',
containLabel: true
},
xAxis: {
type: 'category',// x轴写为value Y轴写为category为横向
axisLine:{
show:false // 是否显示坐标轴
},
axisTick: {
show: false //是否显示坐标轴刻度
},
splitLine:{show: false},//去除网格线
data: ['手术室', '手术室', '手术室', '手术室', '手术室', '手术室', '手术室', '手术室', '手术室', '手术室']
},
yAxis: {
type: 'value',
show:false
},
series: [{
type: 'bar',
color:'#3f9ed4',
barWidth:'25',
label:{ // 数据标签
show:true,
position: 'insideTop' ,
backgroundColor:'#fff',
padding:10,
borderRadius :10,
formatter:''
},
itemStyle:{
barBorderRadius:15
},
markPoint:{ // 标记的图形
symbol:'pin',
itemStyle: {
borderWidth: 3 ,
},
label:{
color:'#000',
},
data: [
{
value:210,
itemStyle: {
borderColor: "#0ea8ff" ,
color:'#fff'
},
coord: [0, 215]
},{
value:190,
itemStyle: {
borderColor: "#ed5162" ,
color:'#fff'
},
coord: [1, 195]
},{
value:180,
itemStyle: {
borderColor: "#ff8f28" ,
color:'#fff'
},
coord: [2, 185]
},{
value:170,
itemStyle: {
borderColor: "#feaf03" ,
color:'#fff'
},
coord: [3, 175]
},{
value:160,
itemStyle: {
borderColor: "#34b2e4" ,
color:'#fff'
},
coord: [4, 165]
},{
value:150,
itemStyle: {
borderColor: "#62d3dc" ,
color:'#fff'
},
coord: [5, 155]
},{
value:140,
itemStyle: {
borderColor: "#6cdabd" ,
color:'#fff'
},
coord: [6, 145]
},{
value:130,
itemStyle: {
borderColor: "#915fbe" ,
color:'#fff'
},
coord: [7, 135]
},{
value:120,
itemStyle: {
borderColor: "#d06083" ,
color:'#fff'
},
coord: [8, 125]
},{
value:110,
itemStyle: {
borderColor: "#7e74ff" ,
color:'#fff'
},
coord: [9, 115]
}
]
},
data: [210, 190, 180, 170, 160, 150, 140, 130, 120, 110],
}]
}