Echarts

Thought，持续几秒

使用 ECharts 制作单轴散点图，可以帮助你在单一坐标轴上展示数据点的分布情况。这类图表通常用于展示一维数据的分布，比如成绩分布、年龄分布等。下面是详细的步骤和示例代码，帮助你创建一个单轴散点图。

步骤概述

引入 ECharts 库
准备 HTML 容器
编写 JavaScript 配置
初始化 ECharts 实例并渲染图表

示例代码

以下是一个完整的示例，展示如何使用 ECharts 创建一个单轴散点图：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>单轴散点图示例</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <style>
        /* 设置图表容器的大小 */
        #main {
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
    <!-- 图表容器 -->
    <div id="main"></div>

    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 假设我们有一组一维数据
        var data = [
            5, 7, 3, 8, 2, 6, 9, 4, 5, 7, 3, 6, 8, 2, 4, 5, 7, 3, 6, 8
        ];

        // 为每个数据点生成一个随机的Y值，以便在图表中展示
        var scatterData = data.map(function(value, index) {
            return [value, Math.random() * 10];
        });

        // ECharts 配置
        var option = {
            title: {
                text: '单轴散点图示例'
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return 'X: ' + params.value[0] + '<br/>Y: ' + params.value[1].toFixed(2);
                }
            },
            xAxis: {
                name: '数值',
                type: 'value',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                show: false // 隐藏 Y 轴
            },
            series: [{
                name: '数据点',
                type: 'scatter',
                data: scatterData,
                symbolSize: 10,
                itemStyle: {
                    color: '#5470C6'
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

代码解析

引入 ECharts 库
```
html
  
```
使用 CDN 引入最新版本的 ECharts 库。
准备 HTML 容器
```
html
```
这是图表的容器，设置了宽度和高度以确保图表能正确显示。
准备数据
```
javascript
var data = [
    5, 7, 3, 8, 2, 6, 9, 4, 5, 7, 3, 6, 8, 2, 4, 5, 7, 3, 6, 8
];

var scatterData = data.map(function(value, index) {
    return [value, Math.random() * 10];
});
```
假设我们有一组一维数据 data，为了在图表中展示，我们为每个数据点生成一个随机的 Y 值。这种方法可以将一维数据转换为二维数据，使其能在散点图中展示。

ECharts 配置

javascript
var option = {
    title: {
        text: '单轴散点图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return 'X: ' + params.value[0] + '
Y: ' + params.value[1].toFixed(2);
        }
    },
    xAxis: {
        name: '数值',
        type: 'value',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        show: false // 隐藏 Y 轴
    },
    series: [{
        name: '数据点',
        type: 'scatter',
        data: scatterData,
        symbolSize: 10,
        itemStyle: {
            color: '#5470C6'
        }
    }]
};

标题：设置图表标题。
提示框：配置鼠标悬停时显示的数据格式。
X 轴：显示数据的主要轴，类型为 value，适用于数值型数据。
Y 轴：隐藏 Y 轴，因为这是单轴散点图。
系列：配置散点图的数据、样式等。

初始化并渲染图表
```
javascript
myChart.setOption(option);
```
使用配置项初始化 ECharts 实例并渲染图表。

自定义和扩展

数据来源：你可以将 data 数组替换为实际的数据集，或通过 AJAX 从服务器获取数据。
样式调整：可以调整 symbolSize、itemStyle 等属性，以更改散点的大小和颜色。
交互功能：ECharts 提供丰富的交互功能，如缩放、拖拽等，可以根据需要启用。

完整示例演示

你可以将上述 HTML 代码复制到本地文件中并在浏览器中打开，即可查看单轴散点图的效果。

参考资料

希望这些信息能帮助你顺利创建单轴散点图！如果有任何进一步的问题，欢迎继续提问。

使用 ECharts 制作折柱混合图（组合图），可以将折线图和柱状图结合在一个图表中，以便同时展示不同类型的数据。这种图表在对比不同数据类别或展示多维度数据时非常有用。例如，可以用柱状图展示销售额，用折线图展示利润率。

下面是详细的步骤和示例代码，帮助你创建一个折柱混合图。

步骤概述

引入 ECharts 库
准备 HTML 容器
编写 JavaScript 配置
初始化 ECharts 实例并渲染图表

示例代码

以下是一个完整的示例，展示如何使用 ECharts 创建一个折柱混合图：

html



    
      
    
      
<style><span class="css">
    /* 设置图表容器的大小 */
    #main {
        width: 800px;
        height: 600px;
        margin: 0 auto;
    }
</span></style>



    
    
<script><span class="javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // ECharts 配置
    var option = {
        title: {
            text: '月度销售与利润情况',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['销售额', '利润率'],
            top: 30
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                rotate: 45 // 旋转标签以防重叠
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '销售额（万元）',
                position: 'left',
                axisLine: {
                    lineStyle: {
                        color: '#5470C6'
                    }
                },
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                name: '利润率（%）',
                position: 'right',
                axisLine: {
                    lineStyle: {
                        color: '#91CC75'
                    }
                },
                axisLabel: {
                    formatter: '{value}%'
                }
            }
        ],
        series: [
            {
                name: '销售额',
                type: 'bar',
                data: [120, 200, 150, 80, 70, 110, 130, 220, 180, 160, 140, 190],
                itemStyle: {
                    color: '#5470C6'
                },
                barWidth: '60%'
            },
            {
                name: '利润率',
                type: 'line',
                yAxisIndex: 1, // 使用第二个Y轴
                data: [20, 30, 25, 15, 10, 20, 22, 35, 28, 26, 24, 30],
                itemStyle: {
                    color: '#91CC75'
                },
                smooth: true
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    // 响应式调整
    window.addEventListener('resize', function () {
        myChart.resize();
    });
</span></script>

代码解析

1. 引入 ECharts 库

html

使用 CDN 引入最新版本的 ECharts 库。

2. 准备 HTML 容器

html

这是图表的容器，通过设置宽度和高度确保图表能正确显示。你可以根据需要调整 #main 的样式。

3. 编写 JavaScript 配置

javascript
var option = {
    title: {
        text: '月度销售与利润情况',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['销售额', '利润率'],
        top: 30
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisTick: {
            alignWithLabel: true
        },
        axisLabel: {
            rotate: 45
        }
    },
    yAxis: [
        {
            type: 'value',
            name: '销售额（万元）',
            position: 'left',
            axisLine: {
                lineStyle: {
                    color: '#5470C6'
                }
            },
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            name: '利润率（%）',
            position: 'right',
            axisLine: {
                lineStyle: {
                    color: '#91CC75'
                }
            },
            axisLabel: {
                formatter: '{value}%'
            }
        }
    ],
    series: [
        {
            name: '销售额',
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130, 220, 180, 160, 140, 190],
            itemStyle: {
                color: '#5470C6'
            },
            barWidth: '60%'
        },
        {
            name: '利润率',
            type: 'line',
            yAxisIndex: 1,
            data: [20, 30, 25, 15, 10, 20, 22, 35, 28, 26, 24, 30],
            itemStyle: {
                color: '#91CC75'
            },
            smooth: true
        }
    ]
};

标题：设置图表的主标题，并居中显示。

javascript
title: {
    text: '月度销售与利润情况',
    left: 'center'
},

提示框：当鼠标悬停在图表上时显示详细信息。

javascript
tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'shadow'
    }
},

图例：展示不同系列的名称，并放置在图表的顶部。

javascript
legend: {
    data: ['销售额', '利润率'],
    top: 30
},

工具箱：提供保存图表为图片的功能。

javascript
toolbox: {
    feature: {
        saveAsImage: {}
    }
},

X 轴：分类轴，表示月份，并将标签旋转45度以防止重叠。

javascript
xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    axisTick: {
        alignWithLabel: true
    },
    axisLabel: {
        rotate: 45
    }
},

Y 轴：使用双Y轴，一个用于销售额（左侧），一个用于利润率（右侧）。

javascript
yAxis: [
    {
        type: 'value',
        name: '销售额（万元）',
        position: 'left',
        axisLine: {
            lineStyle: {
                color: '#5470C6'
            }
        },
        axisLabel: {
            formatter: '{value}'
        }
    },
    {
        type: 'value',
        name: '利润率（%）',
        position: 'right',
        axisLine: {
            lineStyle: {
                color: '#91CC75'
            }
        },
        axisLabel: {
            formatter: '{value}%'
        }
    }
],

系列：定义两个系列，一个是柱状图（销售额），另一个是折线图（利润率）。

javascript
series: [
    {
        name: '销售额',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130, 220, 180, 160, 140, 190],
        itemStyle: {
            color: '#5470C6'
        },
        barWidth: '60%'
    },
    {
        name: '利润率',
        type: 'line',
        yAxisIndex: 1,
        data: [20, 30, 25, 15, 10, 20, 22, 35, 28, 26, 24, 30],
        itemStyle: {
            color: '#91CC75'
        },
        smooth: true
    }
]

销售额：
- 类型为 bar（柱状图）。
- 数据数组表示每个月的销售额。
- itemStyle 设置柱子的颜色。
- barWidth 设置柱子的宽度。
利润率：
- 类型为 line（折线图）。
- yAxisIndex: 1 表示使用第二个Y轴（右侧）。
- 数据数组表示每个月的利润率。
- itemStyle 设置折线的颜色。
- smooth: true 使折线平滑。

4. 初始化并渲染图表

javascript
myChart.setOption(option);

// 响应式调整
window.addEventListener('resize', function () {
    myChart.resize();
});

使用 setOption 方法将配置项应用到 ECharts 实例上，渲染图表。
监听窗口的 resize 事件，确保图表在窗口大小变化时自动调整大小，保持响应式布局。

自定义和扩展

1. 数据来源

你可以将 series 中的 data 数组替换为实际的数据源。例如，可以通过 AJAX 从服务器获取数据，或者使用动态生成的数据。

javascript
// 示例：通过 AJAX 获取数据
fetch('your-data-source.json')
    .then(response => response.json())
    .then(data => {
        // 假设 data 包含 sales 和 profit 两个数组
        option.series[0].data = data.sales;
        option.series[1].data = data.profit;
        myChart.setOption(option);
    });

2. 样式调整

颜色：可以自定义每个系列的颜色，通过 itemStyle.color 属性设置。
图表大小：调整 #main 容器的宽度和高度以适应不同的布局需求。
标签旋转：根据标签的长度和数量，调整 xAxis.axisLabel.rotate 的角度，防止标签重叠。

3. 添加更多系列

如果需要，可以在 series 数组中添加更多的系列，例如增加一个面积图或其他类型的图表。

javascript
{
    name: '成本',
    type: 'line',
    yAxisIndex: 1,
    data: [15, 25, 20, 10, 5, 15, 17, 30, 25, 23, 21, 28],
    itemStyle: {
        color: '#EE6666'
    },
    smooth: true
}

4. 交互功能

ECharts 提供丰富的交互功能，如数据缩放、数据视图、刷选等。你可以在 toolbox 中启用这些功能。

javascript
toolbox: {
    feature: {
        saveAsImage: {},
        dataZoom: {
            yAxisIndex: 'none'
        },
        dataView: {readOnly: false},
        restore: {},
        magicType: {type: ['line', 'bar']}
    }
}

完整示例演示

你可以将上述 HTML 代码复制到本地文件中，并在浏览器中打开，即可查看折柱混合图的效果。根据需要调整数据和样式，以满足具体的业务需求。

参考资料

希望这些信息能帮助你顺利创建折柱混合图！如果有任何进一步的问题，欢迎继续提问。

使用 ECharts 的 dataset 组件可以更加高效地管理和组织数据，尤其是在处理多系列、多维度数据时。通过 dataset，你可以将数据与图表配置分离，提高代码的可维护性和复用性。本文将介绍如何使用 dataset 配置以下三种图表：

单轴散点图
散点图
折柱混合图

每种图表都会提供详细的示例代码和解析，帮助你快速上手。

1. 使用 `dataset` 配置单轴散点图

概述

单轴散点图通常用于展示一维数据的分布情况。在使用 dataset 时，可以更方便地管理数据和图表配置。

示例代码

html



    
      
    
      
<style><span class="css">
    /* 设置图表容器的大小 */
    #main {
        width: 600px;
        height: 400px;
        margin: 50px auto;
    }
</span></style>



    
    
<script><span class="javascript">
    // 初始化 ECharts 实例
    var myChart = echarts.init(document.getElementById('main'));

    // 使用 dataset 定义数据
    var option = {
        title: {
            text: '单轴散点图 - 使用 Dataset',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                return 'X: ' + params.value[0] + '<br/>Y: ' + params.value[1].toFixed(2);
            }
        },
        dataset: {
            // 定义列名
            source: [
                ['value'],
                5, 7, 3, 8, 2, 6, 9, 4, 5, 7, 3, 6, 8, 2, 4, 5, 7, 3, 6, 8
            ]
        },
        xAxis: {
            name: '数值',
            type: 'value',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            show: false // 隐藏 Y 轴
        },
        series: [{
            type: 'scatter',
            encode: {
                x: 'value',
                y: '_index' // 使用索引作为 Y 值
            },
            symbolSize: 10,
            itemStyle: {
                color: '#5470C6'
            }
        }]
    };

    // 渲染图表
    myChart.setOption(option);

    // 响应式调整
    window.addEventListener('resize', function () {
        myChart.resize();
    });
</span></script>

代码解析

引入 ECharts 库
```
html
  
```
使用 CDN 引入 ECharts 库。
准备 HTML 容器
```
html
```
设置图表容器的宽度和高度。

配置 dataset

javascript
dataset: {
    source: [
        ['value'],
        5, 7, 3, 8, 2, 6, 9, 4, 5, 7, 3, 6, 8, 2, 4, 5, 7, 3, 6, 8
    ]
},

第一行 ['value'] 定义了数据的列名。
其余行是数据值。

配置系列

javascript
series: [{
    type: 'scatter',
    encode: {
        x: 'value',
        y: '_index' // 使用索引作为 Y 值
    },
    symbolSize: 10,
    itemStyle: {
        color: '#5470C6'
    }
}]

encode 用于指定数据列与图表属性的对应关系。
y: '_index' 表示使用数据的索引作为 Y 轴的值，实现单轴效果。

响应式调整

javascript
window.addEventListener('resize', function () {
    myChart.resize();
});

确保图表在窗口大小变化时自动调整。

2. 使用 `dataset` 配置标准散点图

概述

标准散点图用于展示二维数据的分布情况。使用 dataset 可以更清晰地管理 X 和 Y 的数据。

示例代码

html



    
      
    
      
<style><span class="css">
    /* 设置图表容器的大小 */
    #main {
        width: 700px;
        height: 500px;
        margin: 50px auto;
    }
</span></style>



    
    
<script><span class="javascript">
    // 初始化 ECharts 实例
    var myChart = echarts.init(document.getElementById('main'));

    // 使用 dataset 定义数据
    var option = {
        title: {
            text: '标准散点图 - 使用 Dataset',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                return 'X: ' + params.value[0] + '<br/>Y: ' + params.value[1].toFixed(2);
            }
        },
        dataset: {
            source: [
                ['X', 'Y'],
                [5, 7.2],
                [3, 4.5],
                [8, 9.1],
                [2, 3.8],
                [6, 6.3],
                [9, 10.4],
                [4, 5.5],
                [7, 8.2],
                [3, 4.1],
                [6, 6.7],
                [8, 9.3],
                [2, 3.9],
                [4, 5.2],
                [5, 7.0],
                [7, 8.5],
                [3, 4.0],
                [6, 6.5],
                [8, 9.0]
            ]
        },
        xAxis: {
            name: 'X 值',
            type: 'value',
            splitLine: {
                show: true
            }
        },
        yAxis: {
            name: 'Y 值',
            type: 'value',
            splitLine: {
                show: true
            }
        },
        series: [{
            type: 'scatter',
            encode: {
                x: 'X',
                y: 'Y'
            },
            symbolSize: 12,
            itemStyle: {
                color: '#EE6666'
            }
        }]
    };

    // 渲染图表
    myChart.setOption(option);

    // 响应式调整
    window.addEventListener('resize', function () {
        myChart.resize();
    });
</span></script>

代码解析

配置 dataset

javascript
dataset: {
    source: [
        ['X', 'Y'],
        [5, 7.2],
        [3, 4.5],
        [8, 9.1],
        [2, 3.8],
        [6, 6.3],
        [9, 10.4],
        [4, 5.5],
        [7, 8.2],
        [3, 4.1],
        [6, 6.7],
        [8, 9.3],
        [2, 3.9],
        [4, 5.2],
        [5, 7.0],
        [7, 8.5],
        [3, 4.0],
        [6, 6.5],
        [8, 9.0]
    ]
},

第一行 ['X', 'Y'] 定义了数据的列名。
后续行是 X 和 Y 的数据对。

配置系列

javascript
series: [{
    type: 'scatter',
    encode: {
        x: 'X',
        y: 'Y'
    },
    symbolSize: 12,
    itemStyle: {
        color: '#EE6666'
    }
}]

encode 指定数据列与图表属性的对应关系。
symbolSize 设置散点的大小。
itemStyle.color 设置散点的颜色。

其他配置
- 标题、提示框、X/Y 轴 都根据标准散点图进行配置。

3. 使用 `dataset` 配置折柱混合图

概述

折柱混合图（组合图）将折线图和柱状图结合在一个图表中，适用于同时展示不同类型的数据。使用 dataset 可以更方便地管理多系列数据。

示例代码

html



    
      
    
      
<style><span class="css">
    /* 设置图表容器的大小 */
    #main {
        width: 800px;
        height: 600px;
        margin: 50px auto;
    }
</span></style>



    
    
<script><span class="javascript">
    // 初始化 ECharts 实例
    var myChart = echarts.init(document.getElementById('main'));

    // 使用 dataset 定义数据
    var option = {
        title: {
            text: '月度销售与利润情况 - 使用 Dataset',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['销售额', '利润率'],
            top: 30
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        dataset: {
            source: [
                ['Month', 'Sales', 'Profit'],
                ['1月', 120, 20],
                ['2月', 200, 30],
                ['3月', 150, 25],
                ['4月', 80, 15],
                ['5月', 70, 10],
                ['6月', 110, 20],
                ['7月', 130, 22],
                ['8月', 220, 35],
                ['9月', 180, 28],
                ['10月', 160, 26],
                ['11月', 140, 24],
                ['12月', 190, 30]
            ]
        },
        xAxis: {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                rotate: 45 // 旋转标签以防重叠
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '销售额（万元）',
                position: 'left',
                axisLine: {
                    lineStyle: {
                        color: '#5470C6'
                    }
                },
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                name: '利润率（%）',
                position: 'right',
                axisLine: {
                    lineStyle: {
                        color: '#91CC75'
                    }
                },
                axisLabel: {
                    formatter: '{value}%'
                }
            }
        ],
        series: [
            {
                name: '销售额',
                type: 'bar',
                encode: {
                    x: 'Month',
                    y: 'Sales'
                },
                itemStyle: {
                    color: '#5470C6'
                },
                barWidth: '60%'
            },
            {
                name: '利润率',
                type: 'line',
                yAxisIndex: 1, // 使用第二个Y轴
                encode: {
                    x: 'Month',
                    y: 'Profit'
                },
                itemStyle: {
                    color: '#91CC75'
                },
                smooth: true
            }
        ]
    };

    // 渲染图表
    myChart.setOption(option);

    // 响应式调整
    window.addEventListener('resize', function () {
        myChart.resize();
    });
</span></script>

代码解析

配置 dataset

javascript
dataset: {
    source: [
        ['Month', 'Sales', 'Profit'],
        ['1月', 120, 20],
        ['2月', 200, 30],
        ['3月', 150, 25],
        ['4月', 80, 15],
        ['5月', 70, 10],
        ['6月', 110, 20],
        ['7月', 130, 22],
        ['8月', 220, 35],
        ['9月', 180, 28],
        ['10月', 160, 26],
        ['11月', 140, 24],
        ['12月', 190, 30]
    ]
},

第一行 ['Month', 'Sales', 'Profit'] 定义了数据的列名。
后续行是月份、销售额和利润率的数据。

配置系列

javascript
series: [
    {
        name: '销售额',
        type: 'bar',
        encode: {
            x: 'Month',
            y: 'Sales'
        },
        itemStyle: {
            color: '#5470C6'
        },
        barWidth: '60%'
    },
    {
        name: '利润率',
        type: 'line',
        yAxisIndex: 1, // 使用第二个Y轴
        encode: {
            x: 'Month',
            y: 'Profit'
        },
        itemStyle: {
            color: '#91CC75'
        },
        smooth: true
    }
]

销售额：
- type: 'bar' 表示柱状图。
- encode 指定 x 轴为 Month，y 轴为 Sales。
- itemStyle.color 设置柱状图的颜色。
- barWidth 设置柱子的宽度。
利润率：
- type: 'line' 表示折线图。
- yAxisIndex: 1 表示使用第二个 Y 轴（右侧）。
- encode 指定 x 轴为 Month，y 轴为 Profit。
- itemStyle.color 设置折线图的颜色。
- smooth: true 使折线平滑。

配置 Y 轴

javascript
yAxis: [
    {
        type: 'value',
        name: '销售额（万元）',
        position: 'left',
        axisLine: {
            lineStyle: {
                color: '#5470C6'
            }
        },
        axisLabel: {
            formatter: '{value}'
        }
    },
    {
        type: 'value',
        name: '利润率（%）',
        position: 'right',
        axisLine: {
            lineStyle: {
                color: '#91CC75'
            }
        },
        axisLabel: {
            formatter: '{value}%'
        }
    }
],

定义了双 Y 轴，一个用于销售额（左侧），一个用于利润率（右侧）。
通过 position 指定轴的位置，通过 axisLine.lineStyle.color 区分两个轴的颜色。

其他配置
- 标题、提示框、图例和 工具箱 都根据折柱混合图进行配置。

总结

通过使用 ECharts 的 dataset 组件，你可以更加高效地管理和组织图表数据。dataset 提供了一种将数据与图表配置分离的方法，使得代码更加清晰和易于维护。本文分别介绍了如何使用 dataset 配置单轴散点图、标准散点图和折柱混合图，并提供了详细的示例代码和解析。

参考资料

如果你有任何进一步的问题或需要更详细的定制，欢迎继续提问！

分享

步骤概述

示例代码

代码解析

自定义和扩展

完整示例演示

参考资料

步骤概述

示例代码

代码解析

1. 引入 ECharts 库

2. 准备 HTML 容器

3. 编写 JavaScript 配置

4. 初始化并渲染图表

自定义和扩展

1. 数据来源

2. 样式调整

3. 添加更多系列

4. 交互功能

完整示例演示

参考资料

1. 使用 dataset 配置单轴散点图

概述

示例代码

代码解析

2. 使用 dataset 配置标准散点图

概述

示例代码

代码解析

3. 使用 dataset 配置折柱混合图

概述

示例代码

代码解析

总结

参考资料

评论

1. 使用 `dataset` 配置单轴散点图

2. 使用 `dataset` 配置标准散点图

3. 使用 `dataset` 配置折柱混合图