ECharts加载json数据解决方案（以折线图为例）

ECharts是一个纯 Javascript 的图表库，提供了常规的折线图、柱状图、散点图、饼图、k线图等十分炫酷的图表，最主要的要文档还是中文的，制作者为baidu.

官方文档和五分钟上手教程：

http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

不过美中不足的是，每次示例代码是从其服务器上异步加载的数据，对于使用者而言，不知道json的格式，而加载json数据大多路径不对（因为这个主要在html界面展示，然而html界面不能加载本地的json文件），所以一度陷入图表虽然好看，不过我却用不上的尴尬境地。我仅提供我的解决方案，供各位参考。

我要画的是折线图，长这样的：

地址：http://echarts.baidu.com/option.html#series-line

他的代码如下：

$.get('data/asset/data/aqi-beijing.json', function (data) {
    myChart.setOption(option = {
        title: {
            text: 'Beijing AQI'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            data: data.map(function (item) {
                return item[0];
            })
        },
        yAxis: {
            splitLine: {
                show: false
            }
        },
        toolbox: {
            left: 'center',
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: [{
            startValue: '2014-06-01'
        }, {
            type: 'inside'
        }],
        visualMap: {
            top: 10,
            right: 10,
            pieces: [{
                gt: 0,
                lte: 50,
                color: '#096'
            }, {
                gt: 50,
                lte: 100,
                color: '#ffde33'
            }, {
                gt: 100,
                lte: 150,
                color: '#ff9933'
            }, {
                gt: 150,
                lte: 200,
                color: '#cc0033'
            }, {
                gt: 200,
                lte: 300,
                color: '#660099'
            }, {
                gt: 300,
                color: '#7e0023'
            }],
            outOfRange: {
                color: '#999'
            }
        },
        series: {
            name: 'Beijing AQI',
            type: 'line',
            data: data.map(function (item) {
                return item[1];
            }),
            markLine: {
                silent: true,
                data: [{
                    yAxis: 50
                }, {
                    yAxis: 100
                }, {
                    yAxis: 150
                }, {
                    yAxis: 200
                }, {
                    yAxis: 300
                }]
            }
        }
    });
});

我们可以看到，数据来源于某一个json文件，然后通过回调函数直接加载到代码中的data中。既然我们无法加载json文件，那我们为什么不能直接改变data呢？说干就干，首先把他的加载函数去掉。就是把上述代码的第一行和最后一行去掉。相当于去掉这个异步加载数据的函数体。

然后，看剩下的代码中几处地方用到了data，两处，一个是加载x轴数据，一个加载y轴数据。emmm,貌似是个map映射，也不知道他是怎么映射的。简单粗暴的全部删了，换成1，2，3如下代码：

    xAxis: {
        data: [1,2,3]
    },
    series: {
        name: 'Beijing AQI',
        type: 'line',
        data: [1,2,3],
        markLine: {
            silent: true,

注意括号与逗号。改完之后图片成了这个样子：

看来数据改的很成功，其实现在已经成功大部分了。我们已经知道，这个data就是由两个类似于python里面的列表构成的东东。

那我们能在函数开始时直接申明两个列表，然后传进来吗？试一试就知道了。

在这段代码之前添加：

var aa = [1,2,3,4]
var bb = [1,20,3,40]
myChart.setOption(option = {
    title: {
        text: 'Beijing AQI'
    },
    xAxis: {
        data: aa
    },
    series: {
        name: 'Beijing AQI',
        type: 'line',
        data: bb,
        markLine: {
            silent: tru

注意两个地方data的修改。为了使图像看起来有折线图的感觉，我就没有用1,2,3,4了。结果如图：

完整可执行代码：

<script>
 
var myChart = echarts.init(document.getElementById('main')); //记得加上这个申明
 
    var bb= {{ bb }} //这是我从后端送过来的数据
    var aa = {{ aa }}
    myChart.setOption(option = {
        title: {
            text: 'title'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            data: aa
        },
        yAxis: {
            splitLine: {
                show: false
            },
            max: function(value) {
    return value.max = 20;
},
        },
        toolbox: {
            left: 'center',
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: [{
            startValue: '2014-06-01'
        }, {
            type: 'inside'
        }],
        visualMap: {
            top: 10,
            right: 10,
            pieces: [{
                gt: 0,
                lte: 3,
                color: '#096'
            }, {
                gt: 3,
                lte: 6,
                color: '#ffde33'
            }, {
                gt: 6,
                lte: 10,
                color: '#ff9933'
            }, {
                gt: 10,
                lte: 14,
                color: '#cc0033'
            }, {
                gt: 14,
                lte: 20,
                color: '#660099'
            }, {
                gt: 20,
                color: '#7e0023'
            }],
            outOfRange: {
                color: '#999'
            }
        },
        series: {
            name: 'score',
            type: 'line',
            data: bb,
            markLine: {
                silent: true,
                data: [{
                    yAxis: 3
                }, {
                    yAxis: 6
                }, {
                    yAxis: 10
                }, {
                    yAxis: 14
                }, {
                    yAxis: 20
                }]
            }
        }
    });
myChart.setOption(option) //记得最后需要set一下，否则不会显示

————————————————
版权声明：本文为CSDN博主「lwgkzl」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lwgkzl/article/details/81148902