1总的属性
1,title:标题组件
2.tooltip:提示框组件
tooltip: {
trigger: ‘axis’ // 触发类型。‘axis’,坐标轴触发;‘item’,数据项图形触发;
},
3.legend:图例组件: 里面放的是data
4.grid:工具栏
5.grid:网格区域
grid: {
left: ‘3%’, // 网格距离盒子左侧的距离。可以是具体的像素值,也可以是百分比
right: ‘4%’,
bottom: ‘3%’,
containLabel: false// 是否显示坐标轴的刻度标签。当刻度标签溢出的时候,grid 区域是否包含坐标轴的刻度标签。
},
6.xAxis:直角坐标系X轴。
xAxis: {
type: ‘category’, // 坐标轴类型。‘category’ 类目轴,必须通过 data 设置类目数据。
data: [‘周一’, ‘周二’, ‘周三’, ‘周四’, ‘周五’, ‘周六’, ‘周日’], // 坐标轴类目数据(刻度文字)
boundaryGap: false //坐标轴两边留白策略。类目轴中 boundaryGap 可以配置为 true 和 false。
},
7.yAxis:直角坐标系y轴
8.color:颜色
9.series:在 echarts 里,系列
(series)是指:一组数值以及他们映射成的图。
一张图表可以由多个图组成,所以series这个配置项的值为数组,数组中的每个元素为对象,每个对象最少有type和data两个属性。
series: [
{
name: ‘邮件营销’, // 名称,用于tooltip的显示,legend 的图例筛选 变化
type: ‘line’, // 类型 (什么类型的图表) 比如 line 是折线 bar 柱形等
data: [120, 132, 101, 134, 90, 230, 210] // 具体的数据项.值为数组。
},
{
name: ‘联盟广告’,
type: ‘line’,
data: [220, 182, 191, 234, 290, 330, 310]
}
]
边框图片
饼形图
option = {
// 提示框组件
tooltip: {
// trigger 触发方式。 非轴图形,使用item的意思是放到数据对应图形上触发提示
trigger: 'item',
// 格式化提示内容:
// a 代表series系列图表名称
// b 代表series数据名称 data 里面的name
// c 代表series数据值 data 里面的value
// d代表 当前数据/总数据的比例
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
// 控制图表
series: [
{
// 图表名称
name: '点位统计',
// 图表类型
type: 'pie',
// 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%
// 饼形图半径。 可以是像素。也可以是百分比( 基于DOM容器大小)第一项是内半径,第二项是外半径(通过它可以实现饼形图大小)
radius: ['10%', '70%'],
// 图表中心位置 left 50% top 50% 距离图表DOM容器
center: ['50%', '50%'],
// radius 半径模式,另外一种是 area 面积模式
roseType: 'radius',
**// 字体大小不要加单位**
label: {
fontSize: 10
},
**// 修饰引导线样式**
labelLine: {
// 连接到图形的线长度
length: 6,
// 连接到文字的线长度
length2: 8
}
// 数据集 value 数据的值 name 数据的名称
data: [
{
value:10, name:'rose1'},
{
value:5, name:'rose2'},
{
value:15, name:'rose3'},
{
value:25, name:'rose4'},
{
value:20, name:'rose5'},
{
value:35, name:'rose6'},
{
value:30, name:'rose7'},
{
value:40, name:'rose8'}