echart symbol属性都有哪些
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echart symbol属性都有哪些相关的知识,希望对你有一定的参考价值。
在 echarts 中 symbol的样式内置了 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’ 几种,如果这些都不太符合需要就必须自定义我们需要的样式。 参考技术A 可以通过barWidth属性设置柱子的宽度。例子如下: series : [ name:'蒸发量', type:'bar', barWidth : 10, data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] ]echarts 自定义图表
参考技术A 首先附上实现效果,被分了段的柱状图幸亏了公司的设计师出的难题,不然我也不会去捣鼓这个东西的
这个图表的类型是 pictoriaBar ,在echarts 3.4版本(版本记得不太明确)之后有了这个类型的图
介绍下这个属性的具体用处:
barWidth: 设置柱子的宽度
symbol:设置小块的样式
symbolRepeat: 设置柱子上的小块是否重复,我尝试过发现,默认为false,只显示一个小块
symbolOffset: 设置每个柱子的位置(每个柱子的位置需要进行计算得出)
symbolSize: 设置每个小块的大小
constchartInit = color: ["#7AC9D2","#00C1DE","#00749F","#77BEE8","#1890FF","#3436C7","#0103A0","#000272"],backgroundColor:"transparent",grid: left:"10px",top:"50px",right:"50px",bottom:"16px",containLabel:true,xAxis: type:"category",data: ["2018/08/15","2018/10/02","2018/01/19","2018/05/23","2018/09/28","2018/02/21","2018/11/11","2018/06/14"],axisLabel: color:"#AFBCC4",axisTick: show:false,axisLine: show:false ,yAxis: name:"单位",axisLine: show:false,type:"value",nameGap:10,axisTick: show:false,axisLabel: color:"#747677",splitLine: lineStyle: color:"rgba(216,216,216,0.10)",type:"solid" ,legend: top:20,data: [ name:"东向西直行",icon:"square", name:"东向西右转",icon:"square", name:"西向东直行",icon:"square", name:"西向东左转",icon:"square", name:"南向北直行",icon:"square", name:"南向北左转",icon:"square", name:"北向南直行",icon:"square", name:"北向南左转",icon:"square" ] ,series: [ name:"东向西直行",type:"pictorialBar",symbol:"roundRect",symbolRepeat:true,// 分节barWidth:10,symbolSize: [10,5],//size,单个symbol的大小data: [120,132,101,134,90,230,210,180] , name:"东向西右转",type:"pictorialBar",barWidth:10,symbolRepeat:true,symbol:"roundRect",symbolOffset: [13,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小data: [220,182,191,234,290,330,310,290] , name:"西向东直行",type:"pictorialBar",symbolRepeat:true,symbol:"roundRect",symbolOffset: [26,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小barWidth:10,data: [150,232,201,154,190,330,410,430] , name:"西向东左转",type:"pictorialBar",symbolRepeat:true,symbol:"roundRect",symbolOffset: [39,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小barWidth:10,data: [320,332,301,334,390,330,320,503] , name:"南向北直行",type:"pictorialBar",barWidth:10,symbol:"roundRect",symbolRepeat:true,symbolOffset: [52,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小data: [820,932,901,934,1290,1330,1320,1222] , name:"南向北左转",type:"pictorialBar",barWidth:10,symbol:"roundRect",symbolRepeat:true,symbolOffset: [65,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小data: [820,932,901,934,1290,1330,1320,1290] , name:"北向南直行",type:"pictorialBar",barWidth:10,symbol:"roundRect",symbolRepeat:true,symbolOffset: [78,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小data: [120,132,101,134,90,230,210,180] , name:"北向南左转",type:"pictorialBar",barWidth:10,symbol:"roundRect",symbolRepeat:true,symbolOffset: [91,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小data: [120,132,101,134,90,230,210,180] ];
以上是关于echart symbol属性都有哪些的主要内容,如果未能解决你的问题,请参考以下文章