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一下,否则不会显示

直接往我们的前端界面直接传递两个列表就可以代替读取json。至于如何往前端界面传递数据,如果是python + flask的话请参考我的这篇博客:https://blog.csdn.net/lwgkzl/article/details/81148495

其他web框架肯定有前后端通信的方式。以上就是我的一些小实验,不防动手操作一下,

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

GitHub 加速计划 / js / json
18
5
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:2 个月前 )
960b763e 5 个月前
8c391e04 8 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐