引言
在设计可视化大屏时，由于页面的上方已经有了条形柱状图，为了让页面显得不那么单一，我们开始思考如何将下方需要通过柱状图来展示的数据变得更多元化。
解决方案
在头部我们引入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] } ] }; |
