setOption({
title: {
text: '血压趋势图',//左上角大标题
},
color:['#578EFF','#78A4FF','#FFAA00'],//自定义折线图等等图的颜色,不写就默认颜色。
legend:{//显示右上角不同颜色的折线代表着什么数据
data: ['收缩压', '舒张压', '脉搏']
},
tooltip: {//是否鼠标放上去显示小框框
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'cross', // 默认为直线,可选为:'line' | 'shadow' | 'cross'
axis: "x",
},
},
grid: {
top: 15,//图表距离装该图容器顶部的距离
left: 15,//图表距离装该图容器左边的距离
right: 15,//图表距离装该图容器右边边的距离
bottom: 15,//图表距离装该图容器底部的距离
containLabel: true////当刻度标签溢出的时候,grid区域是否包含坐标轴的刻度标签,如果为true,则显示刻度标签,如果为false,则不显示刻度标签.
},
xAxis: {//xAxis为grid直角坐标轴中的x轴
type: 'category',
boundaryGap:true,//坐标两边留白边
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],//用来显示x轴的点表示内容
},
yAxis: {
type: 'value'//type属性只有一种,不用设置数据,它会根据我们给的数据自己生成纵坐标数值范围
},
series: [//数据配置
{
name: '收缩压',//名称和legend.data数据要一致legend才回显示
type: 'line',//折线
data: [120, 130, 140, 133, 122, 167, 176],//数据
},
{
name: '舒张压',
type: 'bar',//柱状
data: [110, 120, 140, 80, 112, 160, 170],
},
{
name: '脉搏',
type: 'pie',//饼状
data: [130, 170, 110, 180, 12, 110, 130],
}
]
})