ThinkPHP5.1 实例配置 ECharts 的使用指导
- 2019 年 10 月 25 日
- 笔记
版权声明：本文为博主原创文章，遵循 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":"u7eb3u5b9du5e1du4e3du829du58ebu5976u916au5a01u5316u997cu5e72145g*5","value":3}, {"name":"u4e2du539fG7100%u901fu6eb6u5496u5561800g*2","value":3}, {"name":"u65bdu5df4u6d01u80a4u6c90u6d74u9732 200ml","value":1}, {"name":"u65bdu5df4u6d01u80a4u6c90u6d74u9732 400ml","value":1}, {"name":"u65bdu5df4u7c89u523au62a4u7406u556bu55b1 10ml","value":2}, {"name":"u96eau82b1u79c0u6ecbu76c8u808cu672cu6da6u989cu6c34125ml","value":1}, {"name":"u9038u4e50u8212u6d53u7f29u6d17u8863u6db2uff08u85b0u8863u8349uff09 1.5L","value":1}, {"name":"u9038u4e50u8212u5185u8863u4e13u7528u6d53u7f29u6d17u8863u6db2 750ml","value":1}, {"name":"u5929u7136u4e4bu6249u91ceu751fu59dcu76c8u6da6u6d17u53d1u9732 532ml","value":1}, {"name":"u7ef4u53efu4e1d u96f6u611fu536bu751fu5dfe -u65e5u7528u62a4u7ffcu578b-u91cfu8d29u88c5225mm 24u7247","value":1}], "catInfo":[ {"name":"u5f69u5986","value":3}, {"name":"u65b9u4fbfu901fu98df","value":4}, {"name":"u9762u90e8u62a4u80a4","value":4}, {"name":"u9999u6c34u7cfbu5217","value":1}, {"name":"u5934u90e8u62a4u7406","value":1}, {"name":"u5973u6027u79c1u62a4","value":2}, {"name":"u8eabu4f53u62a4u7406","value":2}, {"name":"u997cu5e72u86cbu7cd5","value":3}, {"name":"u5bb6u5eadu6e05u6d01","value":4}, {"name":"u65e5u5e38u9632u62a4","value":3}] }}
④. 如上配置过后，得到的效果如下：
三、附录
- 鄙人参考的官方实例为：Nested Pies(嵌套环形图)
- 因个人的业务需求，进行了简单的处理，从视图上看只是去掉了左侧的图示列表而已
- 再次提醒一下，一般后台请求接口返回的都是"JSON"数据，所以需要 上述的处理方法：
var resData = JSON.parse(data); - 附录一个自行配置的柱状数据图，新大陆还是需要自己去发现的！
