echarts怎么绘制effectscatter图
时间: 2023-07-11 21:50:07 浏览: 59
要使用 ECharts 绘制 effectscatter 图,需要按照以下步骤:
1. 引入 ECharts 库和主题
```html
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/theme/macarons.js"></script>
```
2. 准备容器
```html
<div id="main" style="width: 600px;height:400px;"></div>
```
3. 初始化 ECharts 实例
```javascript
var chart = echarts.init(document.getElementById('main'), 'macarons');
```
4. 配置 option
```javascript
var option = {
xAxis: {},
yAxis: {},
series: [{
type: 'effectScatter',
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
]
}]
};
```
5. 将配置项设置给 ECharts 实例
```javascript
chart.setOption(option);
```
以上代码可以绘制一个简单的 effectscatter 图。其中,`type` 属性设置为 `effectScatter`,`data` 属性是一个二维数组,每个元素是一个包含两个数值的数组,表示散点图上的一个点的横坐标和纵坐标。
你可以根据自己的需求修改配置项,比如添加轴线、修改散点的样式等。
相关推荐
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)