浅谈echarts

来源：互联网发布：虎扑推荐淘宝匡威店铺编辑：程序博客网时间：2024/06/06 12:28

近日，工作原因接触到绘制图表，粗糙的查询了下绘制图表工具，也因此接触到了echarts，下面简单的谈一下使用时一些体会。

(ps：认识较为肤浅，大神勿喷)

首先，简单介绍一下echarts：百度出品，纯Javascript图表库，基于Canvas，底层依赖ZRender，商业产品通用图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表，支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图（内置世界地图、中国及全国34个省市自治区地理数据），同时支持任意维度的堆积和多图表混合展现。刚好迎合了现在的大数据时代。是一款十分好的免费开源插件。

首先谈一下初次接触echarts的感受，第一感觉：大气，优雅，而且能够清晰的体现数据的走势。通过网页审查元素，了解到在网页解析后通过HTML5中标签Canvas画板来进行绘制，毋庸置疑，后台必然通过JS来控制Canvas来绘制图表，又查看了一下数据传输，使用JSON数据格式配合来进行绘制，好了，初步了解到此为止。下面进行详细解释。

首先，要使用echarts，先要从echarts官网下载一下最新的源码包http://echarts.baidu.com/index.html          文章中设计相关名词可参见http://echarts.baidu.com/doc/doc.html#简介
  下面开始绘制图表开始：
   首先在网页中要创建好一个容器，即为一个具有固定宽高的div即可

接下来要做的就是生成图表需要使用的文件路径等

require.config({

paths:{

'echarts':'./ echarsjs/echarts', //echarts.js的路径

}

});

接下来还要做的一步就是动态加载echarts然后在编写一个回调函数，最后在回调函数中使用echarts设置参数，最后就能生成图表了。

require([

'echarts',

'echarts/chart/line'

下面说一下需要设置的各项具体有
title （标题）、tooltip（气泡提示框）、legend（图例）、toolbox（辅助工具箱）、calculable（固定是否可计算）、xAxis（X轴）、yAxis（Y轴）、series（数据系列）大体的设置项有这些，其实其中好多东西都是为了生成的图表更好看而添加的设置项，所以大家可以按照自己的所需来进行添加，这点我就不多说了，毕竟每个人的审美观不一样。

咱们在详细的说一下各设置项需要注意的东西

title：标题可分为正标题和副标题

tooltip：气泡提示框说白了就是鼠标放在对应位置动态出来的一个提示框

legend：图例，每一项代表一个系列的name，默认布局到达边缘会自动分行这里面需要设置的一项是data，这里面的data会根据该值索引series中同名系列所用的图表类型和itemStyle，如果索引不到，该item将默认为没启用状态

toolbox：这里面要设置的是显示策略和具体的显示信息

calculable：让图表一些值能够可计算

xAxis：X轴显示的数据

yAxis：Y轴显示的数据

series：这就是echarts的核心了，是各项数据的详细，对应索引的是lengend

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <title>收成表</title>    <script src="./echarsjs/esl.js"></script></head><body>     <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>   <script>    require.config({            paths:{                'echarts':'./Public/admin/js/echarsjs/echarts',                'echarts/chart/line' : './Public/admin/js/echarsjs/echarts'            }        });        require([            'echarts',            'echarts/chart/line'            ],            function(ex){                var myChart = ex.init(document.getElementById('main'));                                myChart.showLoading({                        text: '正在努力的读取数据中...',    //loading话术                    });                 var option = {"title":{                                        //正标题                                        "text":"收成对比表",                                        //副标题                                        "subtext":"A:15年  B:14年"                                        },                                //气泡提示框，常用于展现更详细的数据                                "tooltip":{"trigger":"axis"},                                  //图例，表述数据和图形的关联                                "legend":{                                            //数据  每一项代表一个系列的name，默认布局到达边缘会自动分行                                            "data":[                                                    //使用根据该值索引series中同名系列所用的图表类型和itemStyle，如果索引不到，该item将默认为没启用状态。                                                    "A收入",                                                    "A支出",                                                    "B收入",                                                    "B支出"                                                  ]                                          },                                //辅助工具箱，辅助功能，如添加标线，框选缩放等                                "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":[{                                            //类目型'category'                                            "type":"category",                                            //坐标轴两端空白策略，数组内数值代表百分比                                            "boundaryGap":false,                                            //类目列表                                            "data":[                                                        "一月",                                                        "二月",                                                        "三月",                                                        "四月",                                                        "五月",                                                        "六月",                                                        "七月",                                                        "八月",                                                        "九月",                                                        "十月",                                                        "十一月",                                                        "十二月",                                                    ]                                          }                                        ],                                //直角坐标系中的纵轴，通常并默认为数值型                                "yAxis":[{                                            //纵轴默认为数值型'value'                                            "type":"value",                                            //坐标轴文本标签                                            "axisLabel":{                                                            //间隔名称格式器                                                            "formatter":"{value} 元"                                                        }                                        }],                                //数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据                                "series":[{                                            //系列名称，如启用legend，该值将被legend.data索引相关                                            "name":"A收入",                                            //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。                                            "type":"line", //折线                                            //平滑曲线显示，smooth为true时lineStyle不支持虚线                                            "smooth":true,                                            //系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的                                            "data":[                                                        39880,                                                        30228,                                                        16923,                                                        12182,                                                        10328,                                                        9826,                                                        31565,                                                        51428,                                                        61827,                                                        64096,                                                        60613,                                                        60884,                                                    ],                                            //系列中的数据标注内容                                            "markPoint":{                                                            //标注的数据内容数组，最直接的数据项可直接指定标注相关名称type : 'max', name: '自定义名字'                                                            "data":[{                                                                     "type":"max",                                                                     "name":"峰值"                                                                    },                                                                    {                                                                    "type":"min",                                                                    "name":"最小值"                                                                    }                                                                    ]                                                        },                                            //系列中的数据标线内容                                            "markLine":{                                                            //type : 'max', name: '自定义名字' 平均值水平线或垂直线                                                            "data":[{                                                                        "type":"average",                                                                        "name":"平均值"                                                                    }                                                                    ]                                                        }                                            },                                                                                        {"name":"A支出",                                                "type":"line",                                                "smooth":true,                                                "data":[16407,12533,6954,5018,4268,4281,12818,20538,24768,25547,24692,25331],                                                "markPoint":{"data":[{"type":"max","name":"支出峰值"},                                                                    {"type":"min","name":"支出最小值"}                                                                    ]                                                            },                                                "markLine":{"data":[{"type":"average",                                                                     "name":"平均值"}                                                                    ]                                                            }                                            },                                            {"name":"B收入",                                             "type":"line",                                             "smooth":true,                                             "data":[14446,10484,6023,4713,3672,5174,11897,19406,20943,22420,22856,22586],                                             "markPoint":{"data":[{"type":"max",                                                                    "name":"收入峰值"},                                                                  {"type":"min","name":"\u6700\u5c0f\u503c"}                                                                 ]                                                        },                                            "markLine":{"data":[{"type":"average",                                                                 "name":"平均值"}                                                                ]                                                        }                                            },                                            {"name":"B支出","type":"line","smooth":true,                                             "data":[1283,1002,564,443,340,462,1106,1845,2059,2184,2249,2211],                                             "markPoint":{"data":[{"type":"max",                                                                    "name":"支出峰值"},                                                                  {"type":"min","name":"\u6700\u5c0f\u503c"}                                                                  ]                                                          },                                            "markLine":{"data":[{"type":"average",                                                                 "name":"平均值"}                                                                ]                                                        }                                            }                                        ]                                    };                 myChart.setOption(option);                  myChart.hideLoading();            }            );    </script></body></html>

上面最后两句也就是咱们最后要做的两句设置，截止到此，咱们的echarts图表就是生成完了。
最后呢，我想在说一下，之前网上查了查，完全利用动态数据来生成图表的貌似很少，我在这里说一下吧，其实仔细观察一下每个设置项不难发现，其实很明显的是json的数据格式，那么既然是json的数据格式，最先想到的就是利用ajax来进行数据传递，毕竟js操作起来json数据还是非常的好的，既然是利用ajax那么我在后台就是加工一下数据，说白了，json数据其实可以由php的数组来进行转换，那么现在的问题就是转换成了，我去加工一个数据，然后再转换成json的格式输出到前台，无论是你使用框架中的模板替换还是直接使用ajax来进行加载都是可行的，当然对于ajax个人认为使用ajax的同步处理较异步处理要好，试想一下当数据量庞大时，异步处理可能造成情况为前台就是一个空的图表，过一会才会有数据出来，所以个人认为采用ajax同步处理更为好

好了，以上就是小弟一些浅显的认识，欢迎大家来进行交流，谢谢。

0 0