echarts画有三角形柱形的柱状图
Posted 算法与编程之美
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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）
以上是关于echarts画有三角形柱形的柱状图的主要内容，如果未能解决你的问题，请参考以下文章