版权声明:本文为博主原创文章,遵循 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.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}]
}}
var resData = JSON.parse(data);