在平时开发项目时，免不了需要对数据进行图表显示的需求，比如：趋势图、饼状图、柱形图等。自己身为一个PHPer，除了PHP本身的功能，不得不需要借助js来实现显示。在了解众多趋势图插件，国内外开源的项目，感觉还是来自百度团队研发的Echarts.js效果更好。本身是中文的项目，使用过程和显示效果更加适合使用。
什么是Echarts.js?
Echarts.js是来自百度团队研发的图表js插件，利用HTML+js实现折线图、饼状图、热点图、3d图形等等，可在PC和移动端显示，加载速度快，功能丰富。
image.png
我在多了解这个软件后，深深的被其功能所折服。在官方实例中，提供了十多种显示的方式，感人感觉最厉害的属于显示地球还有城市热点的功能。
显示地球模型
官方提供的实例地址：http://echarts.baidu.com/examples/#chart-type-line
当然，这个功能在平时开发中很难需要用到，用到最多的还是折线图、饼状图之类的基础功能。
折线图功能实现实例
先看一下展示效果，模仿某广告平台在某天的24小时的流量走势。
image.png
实现步骤：
1、在页面中获取Echarts
在官网中根据需要的版本http://echarts.baidu.com/download.html
image.png
例如本例中实现的折线图，获取常用版或者精简版就够了。
2、引入Echarts
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
3、为Echarts放置一个具备宽高的DOM容器
<div id="show_charts" style="width:100%; height:600px; margin:80px 0 80px 0;"></div>
4、Echarts加载数据
<script type="text/javascript">
/*此段js来自百度Echart.js插件*/
var dom = document.getElementById("show_charts");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title : {
text: '趋势图',
subtext: '\r\n时间：2018-08-01\r\n\r\n广告类型：全部'
},
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: ["00:00~01:00","01:00~02:00","02:00~03:00","03:00~04:00","04:00~05:00","05:00~06:00","06:00~07:00","07:00~08:00","08:00~09:00","09:00~10:00","10:00~11:00","11:00~12:00","12:00~13:00","13:00~14:00","14:00~15:00","15:00~16:00","16:00~17:00","17:00~18:00","18:00~19:00","19:00~20:00","20:00~21:00","21:00~22:00","22:00~23:00","23:00~00:00"] }
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value}'
}
}
],
series : [
{
name:'请求',
type:'line',
data:["162408","84274","51885","32385","29434","44453","113740","228128","344679","462128","585712","661449","704045","698178","642736","621051","614459","604958","615722","606564","721321","700773","519813","297617"] },
{
name:'返回',
type:'line',
data:["152827","67202","37269","20956","18687","34066","103310","214873","327262","426414","524510","572305","600487","596252","544651","520815","509897","500239","501439","491926","577558","552850","401406","219789"] },
{
name:'展示',
type:'line',
data:["115483","47313","26211","14156","12454","24095","74951","157273","237750","305293","373653","403249","423604","409693","367890","349129","343804","333511","333344","327859","391295","371397","265205","143960"] },
{
name:'点击',
type:'line',
data:["4091","1735","959","632","664","1576","3996","7038","13033","14639","16757","17034","18368","17084","14718","14087","13928","13212","13042","13501","16424","15824","11331","6073"] },
{
name:'成本支出',
type:'line',
data:[622.02,260.1,144.37,82.63,75.92,159.33,491.01,976.69,1494.82,1859.92,2215.17,2379.43,2569.69,2477.18,2220.92,2134.79,2094.97,2039.94,2021,2000.8,2325.55,2222.01,1590.13,859.93] }
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
经过代码设置，一个折线图是不是已经好了呢。没好的话，请检查Echarts.js文件的引用，此案例本人亲测过。这是一个折线图的功能，有很多参数需要我们在平时开发中去发现，大家可以多读读官方的教程，以及案例。官网实例链接
好了，就介绍这些，希望此文章能对大家探索Echarts有所帮助。
网友评论