当前位置: 首页 > Web前端 > vue.js

echart的一些参数;

时间:2023-04-01 11:38:47 vue.js

自学echart用到的一些参数。option={title:{//Title//text:'精品课程报名人数分类统计',//主标题textsubtext:'精品课程报名人数分类统计',//副标题text,'\n'指定换行符x:'center',//水平放置位置,默认为'left',可选:'center'|'左'|'正确'|{number}(x坐标,单位px)y:'250px',//垂直放置位置,默认为top,选项有:'top'|'底部'|'中心'|{number}(y坐标,单位px)textStyle:{//主标题文字样式{"fontSize":18,"fontWeight":"bolder","color":"#333"}fontFamily:'Arial,Verdana,sans...',fontSize:12,fontStyle:'normal',fontWeight:'normal',},subtextStyle:{//字幕文本样式{"color":"#aaa"}fontFamily:'Arial,Verdana,sans...',fontSize:12,fontStyle:'normal',fontWeight:'normal',},zlevel:0,//一级级联控件。默认为0,每个不同的zlevel会生成一个独立的画布,相同zlevel的组件或图标会渲染在同一个画布上。zlevel越高,离顶层越近,canvas对象越多,内存和性能消耗就越大。不建议设置过多的zlevel。大多数情况下,串级控制可以通过二次串级控制z来实现。z:6,//两层级联控制,默认为6,同一画布上z越高(相同zlevel)越靠近顶层。},tooltip:{//提示框,鼠标悬停时信息提示show:'true',//可见触发:'item',//根据item提示信息formatter:"{a}
{b}:{c}({d}%)",//提示内容trigger:'item',//默认值'item',触发类型,默认数据触发,见下图,optional:'item'|'axis'},//legend:{//图例,每个图表最多有一个图例//orient:'vertical',//left:'left',//icon:'circle',//icon是圆形,默认为正方形//align:'auto',//bottom:'bottom',//textStyle:{//fontSize:10,//color:'#666'//}//},series:[//系列列表,每个系列通过type确定自己的图表类型{name:'人数',type:'饼图',radius:'50%',label:{normal:{position:'inside',//inside(自适应,在直方图内居中)、top(刚好在柱子上方)、left(柱子外面左边)、right(柱子外面右边);//坐标[x,y](在直方图中顶部为原点)//insideTop,insideBottom,insideRight,insideLeftformatter:'{d}%',textStyle:{color:'#fff',//fontSize:'14px',//fontWeight:'300',}}},data:[{value:1048,name:'搜索引擎'},{value:735,name:'Direct'},{value:580,name:'Email'},{value:484,name:'UnionAds'},{value:300,name:'VideoAds'}],强调:{itemStyle:{shadowBlur:10,shadowOffsetX:0,shadowColor:'rgba(0,0,0,0.5)'}}}]};选项&&myChart.setOption(选项);}更完整的参数属性可以看看这位大佬的博客:https://www.cnblogs.com/web52...