echarts画有三角形柱形的柱状图

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