首先,我们需要安装ECharts库,可以使用以下命令进行安装:
```bash
npm install echarts
```
接下来,我们将创建一个简单的散点图。以下是使用ECharts创建散点图的步骤:
1. 引入ECharts库和相关依赖;
2. 初始化一个HTML文档,并设置其宽度和高度;
3. 创建一个SVG容器,并将其添加到HTML文档中;
4. 定义数据系列和配置项;
5. 使用`option`对象初始化图表配置;
6. 使用`render`方法渲染图表;
7. 最后,将图表添加到HTML文档中。
以下是具体的代码实现:
```html
- 引入ECharts库 -->
- 创建一个SVG容器 -->
// 定义数据系列和配置项
var option = {
tooltip: {
trigger: 'axis'
},
series: [
{
name: '散点图',
type: 'scatter',
data: [
[1, 1],
[2, 2],
[3, 3],
[4, 4],
[5, 5]
],
symbolSize: 10, // 散点大小
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [
new echarts.graphic.LinearGradientEntry('#FF0000', '#FF0000'),
new echarts.graphic.LinearGradientEntry('#00FF00', '#00FF00')
]
),
shadowBlur: 10, // 阴影模糊度
shadowOffsetX: 0, // 阴影偏移X轴
shadowOffsetY: 0, // 阴影偏移Y轴
borderWidth: 1, // 边框宽度
borderColor: '#CCCCCC' // 边框颜色
},
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
},
dataView: {
show: true,
readOnly: false
},
zoom: {
pan: {
enable: true,
easy: true,
scrollbar: {
show: true,
track: {
show: true
}
}
},
roll: {
enable: true,
listeners: {
rollend: function () {
this.setOption({
- xAxisIndex: this._global.currentIndex
- 1, yAxisIndex: this._global.currentIndex
- 1
});
}
}
}
}
}
]
};
// 使用option对象初始化图表配置
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption(option);
```
这个示例中,我们创建了一个简单的散点图,其中包含两个数据系列。每个数据系列包含四个点,分别对应于`data`数组中的四个元素。我们还为散点设置了不同的颜色、大小和样式。