版权声明：本文为博主原创文章，遵循 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); - 附录一个自行配置的柱状数据图，新大陆还是需要自己去发现的！
