],
};
// 4.使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
3.1.2、显示
-
显示:数值显示、柱宽度、横向柱状图
-
label、barWidth、更改 x轴和 y轴的角色
=======================================================================
4.1.1、标记
-
标记最大值、最小值、平均值、标注区间
-
markPoint、markLine、markArea
4.1.2、线条控制
-
线条控制:平滑 风格
-
smooth、lineStyle
4.1.3、填充风格
-
填充风格
-
areaStyle
4.1.4、紧挨边缘
-
紧挨边缘、缩放(脱离0值比例,也就是不让x、y轴从0开始)
-
boundaryGap、scale
-
使得折线图紧贴左侧 y轴 开始绘制
-
如果我们的x、y轴一直都是从0开始,那么对于一列数组中元素相差很小,那么折线图就近乎是一条直线了
4.1.5、堆叠图
-
堆叠图
-
stack
=======================================================================
-
X 轴数据和 Y轴数据:二维数组
-
在 series 下设置
type:scatter
xAxis 和 yAxis 的 type都要设置为 value -
调整:将坐标轴都设置为 脱离 0值比例,scale
5.1.1、气泡图效果
-
散点的大小不同、散点的颜色不同
-
symbolSize 、itemStyle.color
①散点大小不同
arg如下:
②散点的颜色不同
arg如下,是一个对象:
5.1.2、涟漪动画效果
-
type :effectScatter 开启涟漪动画效果
-
showEffectOn:‘emphasis’ 控制鼠标移动到某一个散点时启动涟漪效果
-
rippleEffect:{ } 控制涟漪动画范围
=========================================================================
- 直角坐标系图表:柱状图、折线图、散点图
常用配置有三种
-
网格 grid
-
坐标轴 axis
-
区域缩放 dataZoom
6.1.1、网格 grid
-
grid 是用来控制直角坐标系的布局和大小,x 轴 和 y 轴就是在 grid 的基础上进行绘制的
-
显示 grid、
show
- grid 的边框
borderWidth、borderColor
- grid 的位置和大小
最后
由于文档内容过多,为了避免影响到大家的阅读体验,在此只以截图展示部分内容
data: axisData,
// symbolSize: 20
symbolSize: function(arg) {
var height = arg[0] / 100;
var weight = arg[1];
// bmi = 体重kg / (身高m * 身高) bmi大于 28 代表肥胖
var bmi = weight / (height * height)
if (bmi > 28) {
return 20;
} else {
return 5;
}
},
itemStyle: {
color: function(arg) {
var height = arg.data[0] / 100;
var weight = arg.data[1];
// bmi = 体重kg / (身高m * 身高) bmi大于 28 代表肥胖
var bmi = weight / (height * height)
if (bmi > 23) {
return ‘red’;
} else {
return ‘green’;
}
}
}
}]
}
// 4.使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
=========================================================================
- 直角坐标系图表:柱状图、折线图、散点图
常用配置有三种
-
网格 grid
-
坐标轴 axis
-
区域缩放 dataZoom
6.1.1、网格 grid
-
grid 是用来控制直角坐标系的布局和大小,x 轴 和 y 轴就是在 grid 的基础上进行绘制的
-
显示 grid、
show
- grid 的边框
borderWidth、borderColor
- grid 的位置和大小
最后
[外链图片转存中…(img-mLEV44c7-1718089084163)]
[外链图片转存中…(img-mg30HO39-1718089084164)]
由于文档内容过多,为了避免影响到大家的阅读体验,在此只以截图展示部分内容