首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ThinkPHP5.1 实例配置 ECharts 的使用指导

ThinkPHP5.1 实例配置 ECharts 的使用指导

作者头像
泥豆芽儿 MT
发布2019-10-25 11:40:11
1.8K0
发布2019-10-25 11:40:11
举报

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/u011415782/article/details/100519873

一、背景

  • 最近因为基本业务的上线应用,需要对网站进行一些统计监控,想到可以拓展使用 echarts, 在此记录一下简单的使用方式,以作备忘,也方便后期直接拿来使用

简要介绍:

ECharts,
一个使用 JavaScript 实现的开源可视化库;
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等);
底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表

ECharts 
提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图;
用于地理数据可视化的地图、热力图、线图;
用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标;
还有用于 BI 的漏斗图,仪表盘;
并且支持图与图之间的混搭 ......

官方详情,就移步:—— ECHARTS (商业级数据图表)

二、使用步骤

  • 鄙人的使用环境为 "ThinkPHP5.1.2 + layui + echarts+ phpStudy"
  • 采用的方式为:下载官网的 echarts.js 文件,并进行本地引用,然后通过 异步数据加载和更新方法 进行页面数据渲染

①. 引入 ECharts

  • 注意从官网下载 echarts.js 文件,比如鄙人使用的是 开发版
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="__ECHARTS__/echarts.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>

②. 进行异步数据请求与页面渲染

  • 鄙人认为,异步数据的请求加载才是正常业务的应用场景,如下展示鄙人的源码以便参考
<script>
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题,图例和空的坐标轴
    myChart.setOption({
        title: {
            text: '热销产品环形统计图'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
            {
                name:'产品分类',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '32%'],

                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                }
            },
            {
                name:'热卖产品',
                type:'pie',
                radius: ['40%', '62%'],

                grid: { // 控制图的大小,调整下面这些值就可以,
                    x: 40,
                    x2: 100,
                    y2: 150 // y2可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上
                },
                xAxis: [
                    {
                        name: "",
                        type: 'category',
                        axisLabel:{
                            interval:0,//横轴信息全部显示
                            rotate:-30 //-30度角倾斜显示
                        }
                    }],

                label: {
                    normal: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}:}{c}  {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    }
                },
            }
        ]
    });
    //TODO 动态绑定数据,此请求地址为本人业务的数据处理反馈
    $.post("{:url('cms/analyze/hotGoodsPie')}").done(function (data) {
    	//因为我返回的数据是 json 形式,此处需要进行解析处理!
        var resData = JSON.parse(data);
        myChart.setOption({
            series: [{
                data:resData.data.catInfo
            },
                {
                    data:resData.data.goodsInfo
                }]
        });
    });
</script>

尤其要注意这一句的使用: "var resData = JSON.parse(data);"

③. 鄙人处理返回的数据形式

  • 这只是数据举例,采用框架为 ThinkPHP5.1.2
{"status":1,"message":"success",
"data":{
"goodsInfo":[
	{"name":"\u7eb3\u5b9d\u5e1d\u4e3d\u829d\u58eb\u5976\u916a\u5a01\u5316\u997c\u5e72145g*5","value":3},
	{"name":"\u4e2d\u539fG7100%\u901f\u6eb6\u5496\u5561800g*2","value":3},	
	{"name":"\u65bd\u5df4\u6d01\u80a4\u6c90\u6d74\u9732 200ml","value":1},
	{"name":"\u65bd\u5df4\u6d01\u80a4\u6c90\u6d74\u9732 400ml","value":1},
	{"name":"\u65bd\u5df4\u7c89\u523a\u62a4\u7406\u556b\u55b1 10ml","value":2},
	{"name":"\u96ea\u82b1\u79c0\u6ecb\u76c8\u808c\u672c\u6da6\u989c\u6c34125ml","value":1},
	{"name":"\u9038\u4e50\u8212\u6d53\u7f29\u6d17\u8863\u6db2\uff08\u85b0\u8863\u8349\uff09 1.5L","value":1},
	{"name":"\u9038\u4e50\u8212\u5185\u8863\u4e13\u7528\u6d53\u7f29\u6d17\u8863\u6db2 750ml","value":1},
	{"name":"\u5929\u7136\u4e4b\u6249\u91ce\u751f\u59dc\u76c8\u6da6\u6d17\u53d1\u9732 532ml","value":1},
	{"name":"\u7ef4\u53ef\u4e1d \u96f6\u611f\u536b\u751f\u5dfe -\u65e5\u7528\u62a4\u7ffc\u578b-\u91cf\u8d29\u88c5225mm 24\u7247","value":1}],
"catInfo":[
	{"name":"\u5f69\u5986","value":3},
	{"name":"\u65b9\u4fbf\u901f\u98df","value":4},
	{"name":"\u9762\u90e8\u62a4\u80a4","value":4},
	{"name":"\u9999\u6c34\u7cfb\u5217","value":1},
	{"name":"\u5934\u90e8\u62a4\u7406","value":1},
	{"name":"\u5973\u6027\u79c1\u62a4","value":2},
	{"name":"\u8eab\u4f53\u62a4\u7406","value":2},
	{"name":"\u997c\u5e72\u86cb\u7cd5","value":3},
	{"name":"\u5bb6\u5ead\u6e05\u6d01","value":4},
	{"name":"\u65e5\u5e38\u9632\u62a4","value":3}]
}}

④. 如上配置过后,得到的效果如下:

三、附录

  • 鄙人参考的官方实例为:Nested Pies(嵌套环形图)
  • 因个人的业务需求,进行了简单的处理,从视图上看只是去掉了左侧的图示列表而已
  • 再次提醒一下,一般后台请求接口返回的都是"JSON"数据,所以需要 上述的处理方法:var resData = JSON.parse(data);
  • 附录一个自行配置的柱状数据图,新大陆还是需要自己去发现的!
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-09-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、背景
  • 二、使用步骤
    • ①. 引入 ECharts
      • ②. 进行异步数据请求与页面渲染
        • ③. 鄙人处理返回的数据形式
          • ④. 如上配置过后,得到的效果如下:
          • 三、附录
          相关产品与服务
          腾讯云 BI
          腾讯云 BI(Business Intelligence,BI)提供从数据源接入、数据建模到数据可视化分析全流程的BI能力,帮助经营者快速获取决策数据依据。系统采用敏捷自助式设计,使用者仅需通过简单拖拽即可完成原本复杂的报表开发过程,并支持报表的分享、推送等企业协作场景。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档