ECharts多个折线图动态获取json数据

末蓝、 2021-09-15 03:22 450阅读 0赞

ECharts 多个折线图动态获取json数据

效果图如下：

![\\][20170803093924502.png]

**一.html部分**

<p id="TwoLineChart" style="width:100%; height:400px;"></p>

**二.js部分**

<script type="text/JavaScript">
     
    function loadTwoLine() {
        var myChart = echarts.init(document.getElementById('TwoLineChart'));
        // 显示标题，图例和空的坐标轴
        myChart.setOption({
            title: {
                text: '异步数据加载示例'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['进件', '办结']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: {
                type: 'category',
                boundaryGap: false, //取消左侧的间距
                data: []
            },
            yAxis: {
                type: 'value',
                splitLine: { show: false },//去除网格线
                name: ''
            },
            series: [{
                name: '进件',
                type: 'line',
                symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                data: []
            },
            {
                name: '办结',
                type: 'line',
                symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                data: []
            }]
        });
        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
        var names = [];    //类别数组（实际用来盛放X轴坐标值）    
        var series1 = [];
        var series2 = [];
        $.ajax({
            type: 'get',
            url: 'json/echarts/line/lineTwo.txt',//请求数据的地址
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象           
                $.each(result.jinJian, function (index, item) {
                    names.push(item.AREA);    //挨个取出类别并填入类别数组
                    series1.push(item.LANDNUM);
                });
                $.each(result.banJie, function (index, item) {
                    series2.push(item.LANDNUM);
                });
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                    xAxis: {
                        data: names
                    },
                    series: [{                    
                        data: series1
                    },
                    {
                        data: series2
                    }]
                });
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    };
    loadTwoLine();
    </script>

[.json格式如下：][.json]

** 三.json格式如下：**

{"jinJian":[{"AREA":"选址阶段","LANDNUM":190},{"AREA":"用地阶段","LANDNUM":200},{"AREA":"设计方案","LANDNUM":310},{"AREA":"工程规划","LANDNUM":290},{"AREA":"施工许可","LANDNUM":260},{"AREA":"销售许可","LANDNUM":300},{"AREA":"规划验收","LANDNUM":320},{"AREA":"综合验收","LANDNUM":290},{"AREA":"档案验收","LANDNUM":280}],"banJie":[{"AREA":"选址阶段","LANDNUM":100},{"AREA":"用地阶段","LANDNUM":120},{"AREA":"设计方案","LANDNUM":140},{"AREA":"工程规划","LANDNUM":160},{"AREA":"施工许可","LANDNUM":180},{"AREA":"销售许可","LANDNUM":200},{"AREA":"规划验收","LANDNUM":220},{"AREA":"综合验收","LANDNUM":240},{"AREA":"档案验收","LANDNUM":250}]}

[20170803093924502.png]: /images/20210724/669046fa01a2487b8c9b21459e06467a.png
[.json]: https://www.2cto.com/kf/201708/664377.html#

发表评论取消回复

表情：

评论列表（有 0 条评论，450人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts-折线图-多条线

//企业排名top5根据客车、货车 var optionTwo={

川长思鸟来/ 2023年10月17日 17:57/ 0 赞/ 55 阅读

相关 ECharts折线图渲染json格式数据（格式为对象）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

我会带着你远行/ 2023年01月21日 04:29/ 0 赞/ 20 阅读

相关 ECharts折线图渲染json格式数据（格式为数组）

ECharts折线图渲染json格式数据（json格式，为数组）需要对数组进行循环取值，将取到的值分别赋值给x轴和y轴 json格式，data为数组 {

朱雀/ 2023年01月21日 04:29/ 0 赞/ 19 阅读

相关 Ajax 获取 JSON 数据填充 ECharts 折线图

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

矫情吗；*/ 2022年12月21日 13:54/ 0 赞/ 130 阅读

相关 ECharts折线图渲染json格式数据（格式为对象）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

迈不过友情╰/ 2022年11月17日 03:50/ 0 赞/ 357 阅读

相关 ECharts折线图渲染json格式数据（格式为数组）

ECharts折线图渲染json格式数据(json格式，为数组) 需要对数组进行循环取值，将取到的值分别赋值给x轴和y轴 json格式，data为数组 {

超、凢脫俗/ 2022年11月17日 03:50/ 0 赞/ 242 阅读

相关 echarts ajax 动态获取数据

keys 和 values 都是动态数据注意如果数据是{value:335, name:'直接访问'}这种格式需要使用eval('(' + strtojso

末蓝、/ 2022年09月30日 00:59/ 0 赞/ 197 阅读

相关 echarts实现动态折线图

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

ゝ一纸荒年。/ 2022年05月15日 02:24/ 0 赞/ 812 阅读

相关 echarts 折线图多条数据为0

问题：本身想显示多条折线，但是由于其中一条(A)数据一年中12个月的值为0，另外一条（B）数据有数据，显示的样式只有另外一条样式，鼠标点击折线图，显示的数据是两个数据，另

╰半橙微兮°/ 2021年09月29日 08:50/ 0 赞/ 502 阅读

相关 ECharts多个折线图动态获取json数据

ECharts 多个折线图动态获取json数据效果图如下： ![\\][20170803093924502.png] 一.html部分 <p id="TwoL

末蓝、/ 2021年09月15日 03:22/ 0 赞/ 451 阅读