以官网案例中的Examples - Apache ECharts为例。配置文档Documentation - Apache ECharts
折线图的学习请看Echarts之折线图_W_小T的博客-CSDN博客
一、图例
控制图例的属性是:legend
(一)图例的方位
left:图例组件离容器左侧的距离
bottom:图例组件离容器底部的距离
right:图例组件离容器右侧的距离
top:图例组件离容器顶部的距离
如下图,想让图例在右下方,通过方位bottom和right就能来控制
//图例所处方位
bottom: '5%',
right: '5%',
(二)图例列表的布局朝向-orient
可选:默认是水平方向
'horizontal'
'vertical'
如下图,图例是纵向排列
orient: 'vertical',
(三)图例列表之间的间距-itemGap
图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。
//图例之间的距离
itemGap: 10,
(四)图例图形的宽高
如下图,将图例的形状更改为正方形
itemWidth: 12,// 设置图例图形的宽
itemHeight: 12,
(五)图例文字颜色
如下图,文字颜色根据图例的颜色自动配置
// 图例的文字颜色
textStyle: {
color: 'auto'
}
二、环形图
文档中的案例一般给出的已经很完美了,按照自己所需可以细节性的调整,我调整的样子如下:
radius: ['40%', '47%'],//环形图的大小
鼠标移向饼环之上,不会提示
emphasis: {
label: {
show: false,//是否显示标签。
fontSize: '40',
fontWeight: 'bold'
}
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '47%'],//环形图的大小
avoidLabelOverlap: false,
// 饼图位置参数
// center: ["26%", "40%"], // 这个属性调整图像的位置!!!!!
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,//是否显示标签。
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
三、环条
如下图,修改环条的样子和环条与环条之间的间距(一般有底色的时候要按照底色来设置边框颜色)
在series里面添加
itemStyle: {//环形状和环之间的间距
borderRadius: 10,
borderColor: '#fff',//边框颜色
// borderWidth: 20//边框宽
},
四、开启延长线
series里面的 label和labelLine都需要开启(或者都不写,默认为true)
单独个环条显示延长线或者某条不显示,就在sweies下的data里面对应下添加 label和labelLine属性,如我的是绿色环条不显示延长线和提示词:
labelLine: {
show: false,
},
label: {
show: false,
},
data: [
{ value: 1048, name: 'Search Engine' ,},
{ value: 735, name: 'Direct',
labelLine: {
show: false,
},
label: {
show: false,
},
},
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
若想改变环条颜色,在对应的下面添加itemStyle和textStyle,这样环条和图例颜色会发生变化
itemStyle: {//环条颜色
color: '#47B5FF',
},
textStyle: {//图例颜色
color: '#47B5FF'
},
data: [
{ value: 1048, name: 'Search Engine' ,},
{ value: 735, name: 'Direct',
labelLine: {
show: false,
},
label: {
show: false,
},
itemStyle: {//环条颜色
color: '#47B5FF',
},
textStyle: {//图例颜色
color: '#47B5FF'
},
},
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
今日的学习到此结束,最后提一嘴,修改提示词可以用formatter