Echarts 行情展示图表：折线图与柱状图组合示例

使用 Echarts 创建折线图和柱状图组合的图表

本文将介绍如何使用 Echarts 库创建包含折线图和柱状图的图表，展示行情数据。

实现思路

初始化 Echarts 实例: 使用 echarts.init() 函数初始化一个图表实例，并指定图表容器元素。
设置图表基本属性: 设置图表标题、图例、坐标轴等属性，以定义图表的整体结构。
准备数据: 准备好折线图和柱状图所需的数据，分别设置 X 坐标轴和 Y 坐标轴对应的数据。
添加图表: 在图表实例中添加折线图和柱状图，并设置对应的数据。
调整样式: 调整图表样式和布局，使其更加美观和易于查看。

代码实现

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Echarts 行情展示图表</title>
    <!-- 引入 echarts.js -->
    <script src='https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js'></script>
</head>
<body>
    <!-- 定义一个容器，用于展示图表 -->
    <div id='chart-container' style='width: 800px; height: 500px;'></div>

    <script>
        // 初始化一个图表实例
        var myChart = echarts.init(document.getElementById('chart-container'));

        // 设置图表的基本属性
        myChart.setOption({
            title: {
                text: '行情展示图表'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {
                data: ['折线图', '柱状图']
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
            },
            yAxis: [
                {
                    type: 'value',
                    name: '折线图',
                    min: 0,
                    max: 100,
                    interval: 20,
                    axisLabel: {
                        formatter: '{value}%'
                    }
                },
                {
                    type: 'value',
                    name: '柱状图',
                    min: 0,
                    max: 200,
                    interval: 40,
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    name: '折线图',
                    type: 'line',
                    data: [30, 40, 50, 60, 70, 80, 90],
                    yAxisIndex: 0
                },
                {
                    name: '柱状图',
                    type: 'bar',
                    data: [80, 100, 120, 140, 160, 180, 200],
                    yAxisIndex: 1
                }
            ]
        });
    </script>
</body>
</html>

效果截图

行情展示图表

总结

通过以上步骤，我们可以使用 Echarts 创建一个包含折线图和柱状图的图表，并通过配置图表属性和样式来满足不同的展示需求。