echarts字体⼤⼩调整，坐标轴name设置等⼀些问题关于echarts的⼀些配置
⼀下记录中的记录规则，尽量以echarts对应的数据进⾏说明，#prop#表⽰可以设置的值
总结⼀下echarts的配置，⽅便扩展
（-）字体调整
1.1 坐标轴字体⼤⼩调整：
"yAxis":[{"axisLabel":fontSize:#fontSize#}] 或者"xAxis":[{"axisLabel":fontSize:#fontSize#}]
1.2 图表标题⼤⼩调整：
"title":[{textStyle:{"fontSize" : #fontSize#}}]
1.3 坐标轴的name⼤⼩设置：
"yAxis":[{"nameTextStyle":{ "fontSize":#fontSize#}}]
或者
"xAxis":[{"nameTextStyle":{ "fontSize":#fontSize#}}]
1.4坐标轴label字体旋转
"xAxis"：[{"axisLabel":{"rotate":60}}] 或者"yAxis"：[{"axisLabel":{"rotate":60}}]
（⼆）颜⾊调整
1.1：坐标轴字体颜⾊调整
"xAxis":[{"nameTextStyle":{"color":"red"}}]    坐标轴name颜⾊
"xAxis":[{"axisLabel":{"color":"red"}}]          坐标轴刻度label颜⾊
1.2：坐标轴背景颜⾊调整
"backgroundColor":"black"
1.3：柱⼦颜⾊调整
textstyle"series":[{
"itemStyle": {
//通常情况下：
normal:{
//每个柱⼦的颜⾊即为colorList数组⾥的每⼀项，如果柱⼦数⽬多于colorList的长度，则柱⼦颜⾊循环使⽤该数组
color: function (params){
return "#FFF";
}
}
}
}]
1.4：柱⼦颜⾊循环显⽰
"series":[{
"itemStyle": {
normal:{
//每个柱⼦的颜⾊即为colorList数组⾥的每⼀项，如果柱⼦数⽬多于colorList的长度，则柱⼦颜⾊循环使⽤该数组                            color: function (params){
var colorList = ['#000000','#FF0000','#00FF00','#0000FF','#00FFFF','#C0C0C0'];
var colorIndex = params.dataIndex;
if(params.dataIndex >= colorList.length){
colorIndex = params.dataIndex % colorList.length == 0?0:params.dataIndex % colorList.length;
}
return colorList[colorIndex];
}
}
}
}]
（三）数据取整数 echarts默认坐标轴数据出险⼩数
"xAxis":[{ "minInterval": 1}]
（四）柱⼦⼤⼩调整
1.1：柱⼦⼤⼩调整
"series":[{"barWidth":18}]
（六）坐标轴数据做运算⼆次处理
"yAxis":[{"axisLabel":
formatter: function(params){
return (params/1000) + "k";
}
}]
（七）折线实⼼
"series":[{
"symbol": 'circle',    //折点设定为实⼼点
"symbolSize": 15,  //设定实⼼点的⼤⼩
}]
条形图/树状图
grid:{
x:25,
y:45,
x2:5,
y2:20,
borderWidth:1
}
或者
grid:{
left:'8%',
right:'0',
bottom:'1%',
containLabel:true
}
饼图："series":[{"type": "pie",
"center": [
"20%",  //x 左上⾓                                    "30%"  //y 左上⾓                                ]
}]

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。