美观的echarts散点图

ECharts是一个强大的JavaScript图表库，用于创建各种交互式图表。如果你想制作美观的散点图，可以按照以下步骤操作：

1. 引入ECharts库：首先，在HTML文件中引入ECharts的CDN链接或本地文件。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>

2. 创建ECharts实例：在需要放置图表的容器上添加ID，并编写初始化代码。

var myChart = echarts.init(document.getElementById('scatterPlot'));

3. 定义数据：创建一个数组，包含x轴和y轴的数据点。

var data = [
    {name: 'A', value: [820, 400]},
    {name: 'B', value: [930, 520]},
    // 更多数据...
];

4. 配置选项：设置图表的基本样式、标题、坐标轴等。下面是一个示例配置：

var option = {
    title: {
        text: '散点图示例',
        subtext: ''
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}%'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    xAxis: {
        type: 'value',
        name: 'X轴名称'
    },
    yAxis: {
        type: 'value',
        name: 'Y轴名称'
    },
    series: [{
        name: '散点',
        type: 'scatter',
        data: data,
        symbolSize: function (val) {
            return val[2] / 3; // 可以根据值动态调整大小
        }
    }]
};

5. 渲染图表：最后，将配置项应用到ECharts实例上。

myChart.setOption(option);