【原】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）