相关配置项讲解
先了解以下9个配置的作用,其余配置还有具体细节再查阅文档:文档菜单——配置项手册学echarts关键在于学会查阅文档,根据需求修改配置。
详细的配置项官方文档: https://echarts.apache.org/zh/option.html#title
以下是常用的配置项讲解
ECharts相关配置项
title : 标题组件
title: {
text: 'ECharts 入门示例'
},
tooltip : 提示框组件
tooltip: {
trigger: 'axis'
},
鼠标悬停在折线图的某个点上,就会出现这个提示框的信息,这个就是tooltip,其他图也一样。
trigger各个值进行分析:
‘axis’:坐标轴触发,主要在柱状图,折线图等会使用。
'item':图形形状触发,主要用在散点图、饼图等无类目轴的图标中使用。
'none':什么都不触发。
formatter分析
formatter: "{a} <br/>{b} : {c}({d}%)"
a 代表 series 系列图标名称
b 代表 series 数据名称 data 里面的 name
c 代表 series 数据值 data 里面的 value
d 代表当前数据/总数据的比例
legend : 图例组件
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
toolbox : 工具栏
toolbox: {
feature: {
saveAsImage: {}
}
},
grid : 直角坐标系内绘图网格
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
红色框框区域内的就是网格grid。
left、right、bottom就是grid网格到大盒子box的距离,也可以认为是边距;
containLabel:true 表示显示y轴的数字(刻度或称为标尺),如果不加这句 + left:0%,则grid网格会和box盒子left重合。
当刻度标签溢出后,grid区域是否包含坐标轴的刻度标签。如果为true,则显示刻度;如果是false,则不显示刻度。如果left、right、bottom等设置为0%,刻度标签就溢出了,此刻决定是否显示刻度标签。
xAxis : x轴
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
type: ‘category’ 的意思是类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
boundaryGap: false 的意思是分隔线与缝隙。默认为true,这时,刻度只是作为分隔线,标签和数据点都会在两个 刻度 之间的带(band)中间。
boundaryGap: true时
boundaryGap: false时
yAxis : y轴
yAxis: {
type: 'value'
},
不需要修改,会自动根据x轴的数据进行修改。
series : 系列列表(重点)
有多少个对象就有多少条线!!!
-
type决定自己的图标类型(什么类型的图标)
-
name: 系列名称,用于tooltip的显示,legend的图例筛选变化
-
stack:数据堆叠。 如果设置相同值,则会数据堆叠。
数据堆叠:
第二个数据值 = 第一个数据值 + 第二个数据值
第三个数据值 = 第二个数据值 + 第三个数据值…依次叠加如果给stack 指定不同值或者去掉这个属性则不会发生数据堆叠。
radius、center、roseType的设置与使用
radius : [“10%”,“70%”] 如果是百分比一定要加双引号。
radius : [50,100] 如果是像素值,可以不用加双引号。
radius : [“10%”,“70%”] 表示内圆半径为10%;外圆半径为70%。
center: [“50%”,“50%”] 表示图形的位置水平垂直居中。
roseType: “radius” (半径模式) 或者 roseType: “area”(面积模式)
如果字体超出了盒子范围,被盒子挡住了,可以使用以下方法:
方法一:
把字体改小一点
series 里的 label对象
方法二:
把引导的线条改短一点
series 里的 labelLine对象
color : 调色盘颜色列表
如果只写一个颜色,效果就是五条折线都是这个颜色。重点是color需要写在tooltip和series之间的位置。
color: ['pink','blue','skyblue','red','purple'],
小结
九个配置项中只有两个是数组:color 和 series系列列表