通过学习js不难看出option就是用来配置图的效果的
此图来自于黑马程序员
option配置
可复制的代码
title: {
// 设置图表的标题
text: '折线图堆叠123'
},
//图表的提示框组件
tooltip: {
//触发方式
trigger: 'axis'//以坐标轴触发
},
//图例组件
legend: {//如果series里面有了name则data可以删掉
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
//网格,可以控制线形图、柱状图等直角坐标系的图表大小
grid: {
left: '3%',//左边距距离
right: '4%',//右边距距离
bottom: '3%',//下边距距离,同样还有top
containLabel: true//显示左边的刻度标签500、1000、1500。。。,如果不显示就false
},
//工具箱组件,有另存为图片等功能
toolbox: {
feature: {//保存为图片的按钮
saveAsImage: {}
}
},
xAxis: {
//type坐标轴类型可选
//value 数值轴,适用于连续数据
//category 类目轴,适用于离散的类目数据,用这个类型必须通过data设置类目数据
//time时间轴,适用于连续的时序数据,与数值轴相比有时间的格式化,刻度计算上会根据跨度决定用月、星期、日等
type: 'category',
boundaryGap: false,//是否让我们的线条和坐标轴有缝隙
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
//系列图表配置,决定了显示哪种类型的图标
series: [//里面是一个数组
{
name: '邮件营销',
type: 'line',//图的类型
stack: '总量',//这是个数据堆叠每条折线图填上一样的字符之后,每一条线都会在之前的线之上,使折线图不交叉
data: [120, 132, 101, 134, 90, 230, 210]//每条线里的相关数据
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
],
color:['pink','red','green','skyblue']//color设置我们线条的颜色,注意后面是个数组