利用ECharts轻松绘制y=x函数曲线：简单方程，精彩图像！

站长

2024年04月21日 23:30 · 阅读数 3

开篇

如果你以为数学和绘图只能让人头疼，那你可大错特错了！今天将揭开一个小小的秘密：利用ECharts绘制 y=x 函数曲线，竟然可以简单到像是做加法算术题一样。就让我们抛开复杂的数学公式，戴上数据可视化的魔法帽，一起探索这个简单方程背后的精彩图像吧！

实现代码

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>y = x Function Curve with Different Colored Positive Axes Area using ECharts</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <style>
        /* 可选的样式 */
        #chart {
            width: 500px;
            height: 400px;
        }
    </style>
</head>

<body>
    <!-- 在页面中创建一个容器来放置 ECharts 实例 -->
    <div id="chart"></div>
    <script>
        // 初始化 ECharts 实例
        var myChart = echarts.init(document.getElementById('chart'));

        // 定义 x 的取值范围
        var xData = [];
        for (var x = 0; x < 10; x += 0.1) { // 仅保留正半轴的部分
            xData.push(x);
        }

        // 根据 y = x 计算 y 的值
        var yData = xData.map(function (x) {
            return x;
        });

        // 计算上方阴影区域的数据
        var positiveYData = xData.map(function (x) {
            return x; // 将y轴值设为x，以形成正方形
        });

        // 配置项
        var option = {
            xAxis: {
                type: 'value',
                name: 'x', // x轴标签
                axisLine: { // 坐标轴线相关设置
                    symbol: ['none', 'arrow'], // 使用箭头
                    symbolSize: [8, 16], // 箭头大小
                    symbolOffset: [0, 10], // 箭头偏移量
                },
                splitLine: { // 刻度线设置
                    show: false // 隐藏网格线
                },
                axisLabel: {
                    formatter: '{value}'  // 显示x轴值
                }
            },
            yAxis: {
                type: 'value',
                name: 'y', // y轴标签
                axisLine: {
                    symbol: ['none', 'arrow'],
                    symbolSize: [8, 16],
                    symbolOffset: [10, 0],
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    formatter: '{value}'  // 显示y轴值
                }
            },
            tooltip: { // 提示框组件
                trigger: 'axis', // 触发类型为坐标轴触发
                axisPointer: { // 坐标轴指示器配置
                    type: 'cross' // 默认为直线，可以设置为 'cross'，以在 x 轴和 y 轴上都显示标线
                },
                formatter: function (params) {
                    return 'x: ' + params[0].value + '<br/>y: ' + params[0].value;  // 自定义提示框内容
                }
            },
            series: [
                {
                    type: 'line',
                    data: yData,
                    smooth: true,
                    symbol: 'none',
                    lineStyle: {
                        color: 'blue' // 折线颜色设置为蓝色
                    },
                    areaStyle: {
                        color: 'rgba(0, 128, 255, 0.3)' // 填充颜色
                    }
                },
                {
                    type: 'line',
                    data: positiveYData, // 使用上方阴影区域的数据
                    smooth: true,
                    symbol: 'none',
                    lineStyle: {
                        color: 'blue' // 折线颜色设置为蓝色
                    },
                    areaStyle: {
                        color: 'rgba(255, 0, 0, 0.3)', // 上方阴影颜色
                        origin: 'end' // 阴影的起始位置，始终从起点开始填充
                    }
                }
            ]
        };

        // 使用配置项设置图表
        myChart.setOption(option);
    </script>
</body>

</html>

效果图如下：

利用ECharts轻松绘制y=x函数曲线：简单方程，精彩图像！

结语

现在，你已经拥有了一项超能力——利用ECharts绘制 y=x 函数曲线！无论你是数学小白还是图表大师，都能轻松玩转这个简单方程，创造出令人惊叹的精彩图像。所以，让我们继续在数据的海洋里航行，用幽默和趣味点缀我们的程序人生，让每一行代码都充满快乐与创意！