纯Javascript图表库：echarts使用初体验

1、ECharts介绍

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

2、ECharts官方教程及示例

https://echarts.baidu.com/echarts2/index.html

3、ECharts使用初体验

原始折线图
点击右上角工具栏切换为柱状图
鼠标移动查看实时数据

4、第一个demo实例

首先，不管你用哪一种方式使用echarts，数据定义(option)部分都是相同的。下面我以折线图为例，顺便通过注释说一下各个定义项吧。
html页面：

<!-- 为ECharts准备一个具备大小（宽高）的Dom，必须的准备条件 -->
<div id="detailChart" style="width: 85%;height:400px;margin-left: 20px"></div>

js脚本：

function heartRateData() {
    var detailChart = echarts.init(document.getElementById('detailChart'));//进行echarts图表的初始化
    $.ajax({
        type: "POST",
        url: "/getSportDetail",
        dataType: "text",
        traditional: true,
        contentType: false,
        processData: false,
        success: successPost,
        error: errorPost
    });

    function successPost(data) {
        var hearttime = [];
        var heartrate = [];
        var step = [];
        var altitude = [];
        var steptime = [];
        var sportData=JSON.parse(data);
        var heartRatedic=sportData.data.heartRate;
        for (var i = 0; i < heartRatedic.length; i++) {//动态提前后端返回的数据，供图表上展示
            hearttime.push(heartRatedic[i][0]);
            heartrate.push(heartRatedic[i][1]);
        }
        var stepdic=sportData.data.steps;
        for (var i = 0; i < stepdic.length; i++) {
            steptime.push(stepdic[i][0]);
            step.push(stepdic[i][1]);
        }
        var latlngdic=sportData.data.latlng;
        for (var i = 0; i < latlngdic.length; i++) {
            altitude.push(latlngdic[i][3]);
        }
        detailoption = {
            title: {//图表标题，可以通过show:true/false控制显示与否，还有subtext:二级标题
                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}
                }
            },
            xAxis: {//x轴定义
                type: 'category',
                data: hearttime,
                name:"时间（秒）",
                //axisLabel :{
                //    interval: 60  //x轴间隔30个单位显示
                //},
            },
            yAxis: {//y轴定义
                type: 'value'
            },
            series: [{//数据展示
                name:'心率',
                data: heartrate,
                type: 'line',
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },{
                name:'步频',
                data: step,
                type: 'line',
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },{
                name:'海拔',
                data: altitude,
                type: 'line',
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            ]
        };
        detailChart.setOption(detailoption);//获取数据动态加载到option
    }
    function errorPost() {
        warning_msg("数据加载失败！请检查数据链接是否正确");
    }
}

5、小结

很简单地就实现了在线图表的绘制，后续将对继续深入研究图表的定制。