关于echart的一个小例子

最新推荐文章于 2025-05-07 15:45:09 发布

反斜杠青年

最新推荐文章于 2025-05-07 15:45:09 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： echart

本文链接：https://blog.youkuaiyun.com/echoerror/article/details/52766827

web 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用ECharts创建动态图表的实例。通过一个简单的输入控制，动态生成折线图，并详细解释了数据处理方法和图表配置技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（1）echart是什么

是一个简单的，面向对象的图表绘制工具库。对我唯一的感觉就是漂亮，百度开发出来的就是很漂亮。而且相对来说，类型更多。

（2）关于echart的一个小列子

我做这个的时候遇到的最难的问题是serise的数据类型

头开始我给于的是形式相同的一个字符串，百思不得其解，最后查资料应该是一个二维数组

但是当我换成二维数组发现换是不行，我又找到一个学长，他帮我解答了这个问题

问题不在数据，真是无语，我竟然在数据这个问题上纠结了那么长时间

下面是修改过的代码，复制粘贴就可运行

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.2.3/echarts.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
x0:<input id="x0" value="0"/>
y0:<input id="y0" value="0"/>
x1:<input id="x1" value="5"/>
y1:<input id="y1" value="2"/>
<button id="b1">生成</button>
<script type="text/javascript">
    $(function () {

        var tempY, m, y, k, dx, dy;
        var dataline = new Array();
        var Yarray = new Array();
        var Xarray = new Array();
        var y0, x0, y1, x1;

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

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'title',
                x: 'center',
                y: 0
            },

            tooltip: {
                formatter: 'Group {a}: ({c})'
            },
            xAxis: [
                {gridIndex: 0, min: 0, max: 5},

            ],
            yAxis: [
                {gridIndex: 0, min: 0, max: 5},

            ],
            series: [
                {
                    name: 'I',
                    type: 'scatter',
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    data: [],
                },

            ]
        };

        function accAdd(arg1, arg2) {

            var r1, r2;
            try {
                r1 = arg1.toString().split(".")[1].length
            } catch (e) {
                r1 = 0
            }
            try {
                r2 = arg2.toString().split(".")[1].length
            } catch (e) {
                r2 = 0
            }
            m = Math.pow(10, Math.max(r1, r2))
            return ((arg1 * m + arg2 * m) / m).toFixed(2);
        }

        function returnData(x0, y0, x1, y1) {

            dy = y1 - y0;
            dx = x1 - x0;
            k = dy / dx;
            y = parseInt(y0);
            p = 0.5;
            for (var sub1 = x0; sub1 < x1; sub1++) {
                tempY = parseInt(accAdd(y, p));
                Yarray[sub1] = tempY;//Y轴数据
                y = accAdd(y, k);
            }
            for (var sub2 = x0; sub2 < x1; sub2++) {
                Xarray[sub2] = parseInt(sub2);//X轴数据

            }
            for (var i = 0, len = Yarray.length; i < len; i++) {
                dataline[i] = [Xarray[i], Yarray[i]];
            }
            return dataline;
        }

        $("#b1").click(function () {

            myChart.clear();

            x0 = document.getElementById("x0").value;
            y0 = document.getElementById("y0").value;
            x1 = document.getElementById("x1").value;
            y1 = document.getElementById("y1").value;

            //绑定数据
            option.series[0].data = returnData(x0, y0, x1, y1);

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

    })

</script>
</body>
</html>