option对象包含一个图表的所需配置参数,这是一个多级嵌套的类json对象.

常用的第一级子元素

名称 描述
calculable 是否启用拖拽重计算特性，默认关闭
title 图表标题
toolbox 工具箱
toolip 提示框
legend 图例
dataRange 值域(作用于通常的y值)
dataZoom 数据区域缩放(作用于通常的x值)
grid 直角坐标系内绘图网格
xAxis 直角坐标系中横轴数组(x轴)
yAxis 直角坐标系中纵轴数组(y轴)
series 数据内容

常用第二级元素

名称 描述
show 当前元素是否显示
x 当前元素位置横坐标(起始)
x2 当前元素位置横坐标(结束)
y 当前元素位置纵坐标(起始)
y2 当前元素位置纵坐标(结束)
lineStyle 线条样式
itemStyle 当前元素样式
areaStyle 区域样式
textStyle 字符样式
calculable 是否可以拖曳重计算
formatter 字符显示格式化
text 元素内容
data 数据
markPoint 标注点
type 图表类型
name 数据系列名称

上述提到的元素大多数可以嵌套使用,比如itemStyle指当前元素的样式,可以用于所有有实体显示的元素内.

举例

标题:

title : {
    text : '本年度支出',
    x : 'center',
    y : 'center',
    textStyle : {
            color : 'black',
            fontSize : '25',
            fontFamily : '微软雅黑',
            fontWeight : 'bold'
        }
}

提示框

tooltip : {
    trigger: 'item',
    formatter: "{b} : {c} ({d}%)"
},

数据内容

series : [
    {
        name:'年度支出',
        type:'pie',
        radius : [80, 120],
        itemStyle : {
            normal : {
                label : {
                    show : true,
                    formatter : "{b}\n{c}\n({d}%)",
                },
                labelLine : {
                    show : true
                }
            },
        },
        data : [
            {value:3144686/10000*12, name:'CDN'},
            {value:2617522.15/10000*12, name:'IDC'},
        ],
        markPoint : {
            symbol: 'emptyCircle',
            tooltip:{
                show:false
                },
            itemStyle:{
                normal:{
                    label:{
                        show:true,
                        textStyle:{
                            fontSize:'20'
                            },
                        formatter:'详情'
                        }
                    },
                emphasis:{
                    label:{
                        show:false
                        }
                    }
                },
        data : [
            {name : '详情', x:'20%', y:50, symbolSize:32}
        ]
        }
    }
]

可见,series里有一个itemStyle参数,在series内的markPoint也有一个itemStyle参数,itemStyle里又包含了一个textStyle,如此可以定制很多元素的显示方式.