引言
在设计可视化大屏时，由于页面的上方已经有了条形柱状图，为了让页面显得不那么单一，我们开始思考如何将下方需要通过柱状图来展示的数据变得更多元化。
解决方案
在头部我们引入echarts，并且设置一个固定大小的背景框架。初始化echarts示例后开始指定图标的配置项和数据。设置好x轴、y轴之后，引入内容数据时，我们将symbol这一项改为triangle，最后再佐以剩余的数据即可。
代码清单
var option = {
title: {
text: "Monthly traffic",
textStyle:{//主标题
color:'#fff'
},
padding:[0,0,100,100]
},
legend: {
type:'plain',
top:'1%',
selected:{
'sales':true,
},
textStyle:{
color:'#fff',
},
tooltip:{
show:true,
color:'red',
},
data:[/
{
name:'sales',
icon:'circle',
textStyle:{
color:'#fff',
}
}
],
},
tooltip: {
show:true,
trigger:'item',
axisPointer:{
type:'shadow',
axis:'auto',
},
padding:5,
textStyle:{
color:"#fff",
},
},
grid:{
show:false,
top:80,
containLabel:false,
tooltip:{
show:true,
trigger:'item',
textStyle:{
color:'white',
},
}
},
xAxis: {
show:true,
position:'bottom',
name:'month',
nameLocation:'end',
nameTextStyle:{
color:"#fff",
padding:[5,0,0,-5],
},
nameGap:15,
axisLine:{
show:true,
lineStyle:{
color:'#fff',
width:1,
type:'solid',
},
},
axisTick:{
show:true,
inside:true,
lengt:3,
lineStyle:{
//color:'red',
width:1,
type:'solid',
},
},
axisLabel:{
show:true,
inside:false,
rotate:0,
margin: 5,
//color:'red',
},
splitLine:{
show:false,
lineStyle:{
},
},
splitArea:{
show:false,
},
data: ["1","2","3","4","5","6","7","8"],
},
yAxis: {
show:true,
position:'left',
type:'value',
name:'sales',
nameLocation:'end',
nameTextStyle:{
color:"#fff",
padding:[5,0,0,5],
},
nameGap:15,
axisLine:{
show:true,
lineStyle:{
color:'#fff',
width:1,
type:'solid',
},
},
axisTick:{
show:true,
inside:true,
lengt:3,
lineStyle:{
width:1,
type:'solid',
},
},
axisLabel:{
show:true,
inside:false,
rotate:0,
margin: 8,
},
splitLine:{
show:true,
lineStyle:{
color:'#666',
width:1,
type:'dashed',
},
},
splitArea:{
show:false,
}
},
series: [
{
name: 'sales',
type: 'pictorialBar',
legendHoverLink:true,
label:{
show:false,
position:'insideTop',
rotate:0,
color:'#eee',
},
itemStyle:{
color:'blue',
barBorderRadius:[18,18,0,0],
},
barWidth:'20',
barCategoryGap:'20%',
symbol:'triangle',
data: [4600,6900,2980,3020,5020,5900,3500,2350]
}
]
};
实习编辑：李欣容
稿件来源：深度学习与文旅应用实验室（DLETA）
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
