前端ECharts可视化框架快速上手详解(一)

],

};

// 4.使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

3.1.2、显示

• 显示：数值显示、柱宽度、横向柱状图
• label、barWidth、更改 x轴和 y轴的角色

4、折线图

=======================================================================

4.1、折线图常见效果

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

5、散点图

=======================================================================

• X 轴数据和 Y轴数据：二维数组
• 在 series 下设置 type:scatter xAxis 和 yAxis 的 type都要设置为 value
• 调整：将坐标轴都设置为 脱离 0值比例，scale

5.1、散点图常见效果

5.1.1、气泡图效果

• 散点的大小不同、散点的颜色不同
• symbolSize 、itemStyle.color

①散点大小不同

arg如下：

②散点的颜色不同

arg如下，是一个对象：

5.1.2、涟漪动画效果

• type ：effectScatter 开启涟漪动画效果
• showEffectOn：‘emphasis’ 控制鼠标移动到某一个散点时启动涟漪效果
• rippleEffect：{ } 控制涟漪动画范围

6、直角坐标系

=========================================================================

• 直角坐标系图表：柱状图、折线图、散点图

6.1、直角坐标系的常用配置

常用配置有三种

• 网格 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);

6、直角坐标系

=========================================================================

• 直角坐标系图表：柱状图、折线图、散点图

6.1、直角坐标系的常用配置

常用配置有三种

• 网格 grid
• 坐标轴 axis
• 区域缩放 dataZoom

6.1.1、网格 grid

• grid 是用来控制直角坐标系的布局和大小，x 轴 和 y 轴就是在 grid 的基础上进行绘制的
• 显示 grid、

show

• grid 的边框

borderWidth、borderColor

• grid 的位置和大小

最后

[外链图片转存中…(img-mLEV44c7-1718089084163)]

[外链图片转存中…(img-mg30HO39-1718089084164)]

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容