echarts 散点图
官网：Documentation - Apache ECharts
********************
配置属性
option = {
xAxis: {
data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
yAxis: {},
series: [
{
type: 'scatter', //type: scatter表示散点图
data: [220, 182, 191, 234, 290, 330, 310]
}
]
};
基本属性
id：组件id，默认不指定
name：系列名称
type：series图表类型，常用值：bar（柱形图）、line（折线图）、pie（饼图）、scatter（散点图）
colorBy: series（同一系列颜色相同）、data（同一维度颜色相同）
legendHoverLink：鼠标滑过时legend（图标）是否高亮，默认true
coordinateSystem：series使用的坐标系，可选值（cartesian2d，直角坐标系，默认）、polar（极坐标系）
cursor：鼠标悬浮时的鼠标样式
xAxisIndex：x轴的index，单个图表实例中有多个x轴时使用
yAxisIndex：y轴的index，单个图表实例中有多个y轴时使用
polarIndex：极坐标轴index，单个图表实例中有多个polar时使用
geoIndex：地理坐标系的index，单个图表实例中存在多个地理坐标系时使用
calendarIndex：日历坐标系的index，单个图表实例中存在多个日历坐标系时使用
symbol：标记的图形，可选值：circle、emptyCircle、rect、roundRect、image://url、path://等
symbilSize：标记大小
symbolRotate：标记的旋转角度
symbolKeepAspect：symbol为path://时，是否在缩放时保持长宽比，默认false
symbolOffset：标记偏移量，如：[0,0]
large：是否开启大数据量优化，默认false
largeThreshold：开启绘制优化的阈值，默认2000
progressive：渐进式渲染时每一帧绘制图形数量，0表示不启用渐进式渲染，默认400
progressiveThreshold：启用渐进式渲染的图形数量阈值，默认2000
dimensions：数据维度
encode：数据映射规则
seriesLayoutBy：数据映射方式，可选值：column（默认）、row
datasetIndex：数据集索引
dataGroupId：数据组id
data：series中使用的数据，一般在数据集（dataset）中设置数据，实现数据与配置分离
clip：是否裁剪超出坐标系部分的图形
zlevel：柱状图所有图形的zlevel值，用于canvas分层，数值大的在上面
z：柱状图组件的所有图形的z值，数值大的在上面，优先级比zlevel低
silent：图形是否不响应和触发鼠标事件，默认false（响应并且触发鼠标事件）
动画属性
animation：是否开启动画，默认true
animationThreshold：动画阈值，动画数量大于该值会关闭动画，默认2000
animationDuration：动画持续时间，默认1000ms
animationEasing：动画缓动效果，如：cubicOut
animationDelay：动画初始延时时间，默认0
animationDurationUpdate：动画更新时长
animationEasingUpdate：动画更新缓动时长
animationDelayUpdate：动画延时更新时长
# universalTransition：全局过渡动画配置
：是否开启全局延时动画
：如何关联需要动画的系列，默认取系列的id
：对多或者多对一的动画中，当前系列的图形如何分裂成多个图形，可选值：
split：通过一定的算法将分割图形成为多个（柱状图默认）
clone：从当前图形克隆得到多个（散点图默认）
：一对多或者多对一的动画中每个图形的动画延时
标签属性：label
：是否显示标签,默认false
：文本标签位置，如：top、left、right、bottom、[10,10]、[10%,10%]等
：距离图形元素的距离
：标签旋转,从-90度到90度,正值是逆时针
：是否对文字进行偏移，默认不偏移，如：[30, 40]表示文字在横向上偏移30,纵向上偏移40
：标签内容格式器，支持字符串模板和回调函数两种形式
模板字符串：formatter: '{b}: {@score}'
{a}：系列名
{b}：数据名
{c}：数据值
{@×××}：维度名对应的数据，如{@product}：表示维度名为product的值
{@[n]}：维度n对应的数据，如{@[2]}：表示维度2对应的数据，维度从0开始计数
回调函数：(params: Object|Array) => string
：标签颜色，如："#fff"
：字体风格，可选值：normal、italic、oblique
：字体粗细，可选值：normal、bold、bolder、lighter、100|200|300|400...
：字体设置，可选值：sans-serif、serif、monospace、Arial、Courier New、Microsoft YaHei等
：字体大小，如：12
：水平对齐方式，可选值：left、center、right
：垂直对齐方式，可选值：top、middle、bottom
：文本宽度
：文本高度
：行高
：标签背景色，如：'#123234', 'red', 'rgba(0,23,11,0.3)'
：边框颜色
：边框宽度
：边框类型，可选值：solid、dashed、dotted、5、[5, 10]
：虚线偏移量
：边框圆角，默认0
：内边距，默认0
：阴影颜色
：阴影长度
：阴影水平偏移
：阴影垂直偏移
：文本边框颜色
：文本边框宽度
：文本边框类型，可选值：solid、dashed、dotted、5、[5,10]等
：文字虚线偏移量
：文字阴影颜色
：文字阴影大小
：阴影水平偏移
：阴影垂直偏移
：文本超出长度后，是否截断或者换行
none：不截断或者换行，默认
truncate：截断
break：单词间换行
breanAll：除单词间换行，单词内也换行
：文本超出长度，截断（truncate）后显示的文本，如:...
：文本超过高度是否截断，配置生效
none：不截断
truncate：截断
：自定义富文本样式
标签视觉引导线：labelLine
：是否显示视觉引导线
：是否显示在图形上方
labelLine.length2：视觉引导项第二段的长度
：是否平滑视觉引导线，默认false
：视觉引导线的最小转角，0-180度
：颜色，如：rgb(255,255,255)，rgba(255,255,255,1)，#fff
：宽度
：线型，如：solid、dashed、dotted、[5,10]等
：虚线偏移量
：线段末端绘制方式，可选值：butt（方形，默认）、round、square（矩形）
：连接属性，可选值：bevel（三角形，默认）、round、miter（菱形）
：菱形斜接面比例，默认为10，负数、0、Infinity、NaN均会被忽略
：阴影模糊大小
：阴影颜色
：阴影水平偏移
：阴影垂直偏移
：透明度，默认为1，数值为从0到1的数字（0不显示）
labelLayout：标签布局
：是否隐藏重叠的标签
：在标签重叠的时候是否挪动标签位置以防止重叠
：标签的水平位置，如：2（像素值）、20%
：标签的垂直位置，如：2（像素值）、20%
：标签在 x 方向上的像素偏移，可以和x一起使用
：标签在 y 方向上的像素偏移，可以和y一起使用
：标签旋转角度
：标签宽度
：标签高度
：标签水平对其方式，可选值：left、center、right
：标签垂直对齐方式，可选值：top、middle、bottom
：标签字体大小
：标签是否可以拖拽
：标签引导线三个点的位置，格式为：[[x, y], [x, y], [x, y]]
图形样式：itemStyle
：颜色，默认为，可设置：rgb(255,255,255)，rgba(255,255,255,1)，#fff
：边框颜色
：边框宽度，默认无宽度
：边框线型，可选值：solid（默认）、dashed、dotted
：虚线偏移量
：线段末端的绘制方式，可选值：butt（方形，默认）、round、square（矩形）
：末端连接方式，可选值：bevel（三角形连接）、round、miter（菱形）
：斜截面限制比列，borderJoin为miter时有效
：阴影模糊大小
：阴影颜色
：阴影水平偏移
：阴影垂直偏移
：柱条透明度，默认为0.8，0表示不显示
高亮样式：emphasis
：是否开启高亮后扇区的放大效果，默认true
：高亮图形时，是否淡出其它数据的图形已达到聚焦的效果，可选值：
none：不淡出其他图形，默认
self：只聚焦（不淡出）当前高亮的数据的图形
series：聚焦当前高亮的数据所在的系列的所有图形
：配置淡出范围，可选值：
coordinateSystem：淡出范围为坐标系，默认
series：淡出范围为系列
global：淡出范围为全局
：文本标签高亮配置，属性同label
：标签视觉引导线高亮配置，属性同labelLine
：图形高亮配置，属性同itemStyle
淡出样式：blur
：标签淡出配置，属性同label
：标签视觉引导线淡出配置，属性同labelLine
：图形淡出配置，属性同itemStyle
选中样式：select，开启selectMode后有效
selectMode：是否支持多选，可选值：true、false（默认）、single、multiple
：标签选中配置，属性同label
：标签视觉引导线选中配置，属性同labelLine
：图形选中配置，属性同itemStyle
图表标注：markPoint
：标记的图形，可选值：circle、rect、round、pin、image://url、path://等
：标记的大小，默认50
：标记的旋转角度，正值表示逆时针
：如果symbol是path://的形式，是否在缩放时保持该图形的长宽比
：标记偏移，如[0,0]
：图形是否不响应和触发鼠标事件，默认为 false
：标注的数据数组
：标注的文本，属性同label
：标注的样式，属性同itemStyle
：标注的高亮样式，内含label、itemStyle
：标注的淡出样式，内含label、itemStyle
#标注的动画属性
：是否开启动画，默认true
：动画阈值，动画数量大于该值会关闭动画，默认2000
：动画持续时间，默认1000ms
：动画缓动效果，如：cubicOut
：动画初始延时时间
：动画更新时长
：动画更新缓动时长
：动画延时更新时长
图表标线：markLine
：标线两端的标记类型，可选值：circle、rect、round、pin、image://url、path://等
：标线两端的标记大小，默认50
：图形是否不响应和触发鼠标事件，默认为 false
：标线数值的精度，默认为2
：标线的数据数组
：标注的文本，属性同label
：标注的样式，属性同lineStyle
：标注的高亮样式，内含label、lineStyle
：标注的淡出样式，内含label、lineStyle
#标注线的动画属性
：是否开启动画，默认true
：动画阈值，动画数量大于该值会关闭动画，默认2000
：动画持续时间，默认1000ms
：动画缓动效果，如：cubicOut
：动画初始延时时间
：动画更新时长
：动画更新缓动时长
：动画延时更新时长
图表区域：markArea
：图形是否不响应和触发鼠标事件，默认为 false
：标注的数据数组
：标注区域的文本，属性同label
：标注区域的样式，属性同itemStyle
：标注区域的高亮样式，内含label、itemStyle
：标注区域的淡出样式，内含label、itemStyle
#标注区域的动画属性
：是否开启动画，默认true
：动画阈值，动画数量大于该值会关闭动画，默认2000
：动画持续时间，默认1000ms
：动画缓动效果，如：cubicOut
：动画初始延时时间
：动画更新时长
：动画更新缓动时长
：动画延时更新时长
********************
示例
**************
基础散点图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/echarts/"></script>
<script src="/jquery/jquery-3.6."></script>
<script type="text/javascript">
$(function (){
const myChart = ($("#container")[0]);
const option = {
title: {
left: 'center',
text: '水果季度销量散点图',
textStyle: {
color: '#6d6'
}
},
tooltip: {},
legend: {
left: 'right'
},
dataset: {
source: [
['quarter', '一季度', '二季度', '三季度', '四季度'],
['apple', 400, 250, 380, 320],
['banana', 100, 160, 120, 100]
]
},
xAxis: {
type: 'category'
},
yAxis: {},
series: [
{
name: 'apple',
type: 'scatter',
seriesLayoutBy: 'row',
symbolSize: 20,
itemStyle: {
color: '#e48'
}
},
{
name: 'banana',
type: 'scatter',
seriesLayoutBy: 'row',
symbolSize: 40,
itemStyle: {
color: '#6df'
}
}
]
};
(option);
})
</script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div style="width: 600px;height:400px;"></div>
</body>
</html>
**************
笛卡尔散点图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/echarts/"></script>
<script src="/jquery/jquery-3.6."></script>
<script type="text/javascript">
$(function (){
const myChart = ($("#container")[0]);
const option = {
title: {
left: 'center',
text: '笛卡尔散点图',
textStyle: {
color: '#6d6'
}
},
tooltip: {},
legend: {
left: 'right'
},
dataset: {
source: [
[0, 50, 380, 320],
[100, 160, 220, 100]
]
},
xAxis: {},
yAxis: {},
series: [
{
type: 'scatter',
seriesLayoutBy: 'row',
symbolSize: 20,
itemStyle: {
color: '#e48'
}
}
]
};
(option);
})
</script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div style="width: 600px;height:400px;"></div>
</body>
</html>
