本文总结了Echarts中折线图和饼状图的常用样式配置，包括标题、坐标轴、类别和折线样式设置。通过示例代码详细展示了如何调整颜色、位置和字体大小等属性，以实现理想视觉效果。
自己在做项目的时候 会用到的统计图 需要用什么样的 直接在echart官网复制粘贴，这里只记录在使用echart的时候会使用的样式的调整：
折线图：
效果图：
一，标题的设置：在option 中：
title属性：折线图的标题：
title:{
text:'出入客流图',
textStyle:{ //设置标题的颜色，字体颜色
color:'#fff',
fontSize:'14',
},
left:'20',//设置标题的位置，可用 right，left，top，bottom，或者使用 x:'left',y:'20',但是不可以交叉使用
top:'20'
},
二，XY坐标系的设置：在option中
xAxis: {
type: 'category',
data: ['9:00', '10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00', ],//数据
axisLabel:{ //设置数据的样式，这里设置的是白色
textStyle:{
color:'#fff'
}
},
axisLine:{ //设置X坐标的样式，这里设置的是白色
lineStyle:{
color:'#fff'
}
}
},
yAxis: {
type: 'value',
axisLabel:{
textStyle:{ //设置数据的样式，这里设置的是白色
color:'#fff'
}
},
axisLine:{ //设置Y坐标的样式，这里设置的是白色
lineStyle:{
color:'#fff'
}
}
},
三，设置类别的样式：在option中
legend: {
data:['入流','出流'],
orient: 'vertical', //设置为垂直的类别
x:'right', //设置类别的位置，可用 right，left，top，bottom，或者使用 x:'left',y:'20',但是不可以交叉使用
textStyle:{ //设置类别的颜色，字体颜色
color:'#ffffff',
}
},
此时的效果图：
四，设置折线的样式：在option中
series: [
{
name:'入流',
type:'line',
stack: '总量',
data:[820, 932, 901,820,220,420, 934, 1290,820, 1330,520,420,220,],
itemStyle: { //设置折线的样式
normal: { //设置统计表上的折线样式
color: "#036BC8",
lineStyle: { //设置统计表中的折线样式
color: "#036BC8"
}
}
},
},
饼状图：
效果图：
饼状图的属性基本与折线图的一致，只有在设置每个饼块的颜色不一样:
饼状图的series的数据是这样的：
series : [
{
name: '年龄分析',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'18岁以下'},
{value:610, name:'19-30岁'},
{value:434, name:'31-40岁'},
{value:135, name:'41-50岁'},
{value:148, name:'50岁以上'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
所以，在设置颜色的时候 只需要在option中 定义一个color的数组：
option={
color:['red','yellow','blue','green','pink'],
title：{},
tooltip : {},
...
}
-------------------------------------------------------------------------------------------------------------------------------------------------------------------如遇到问题：+WX：WAZJ-0508，及时联系---------------------------------------------------------------------------------------------------------------------------------------------------
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
