|
|
@@ -2,213 +2,199 @@
|
|
|
|
|
|
|
|
|
|
|
|
-<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
|
|
|
- <script type="text/javascript">
|
|
|
- // 路径配置
|
|
|
- require.config({
|
|
|
- paths:{
|
|
|
- 'echarts' : 'http://echarts.baidu.com/build/echarts'
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 使用
|
|
|
- require(
|
|
|
- [
|
|
|
- 'echarts',
|
|
|
- 'echarts/chart/pie', // 使用柱状图就加载bar模块，按需加载
|
|
|
- 'echarts/chart/bar'
|
|
|
+<!--<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>-->
|
|
|
+<script src="<?= WEB_SITE_GLOBAL ?>js/echarts.min.js"></script>
|
|
|
+<script type="text/javascript">
|
|
|
+ $(function(){
|
|
|
+ //1 最近30天客户数量与记录趋势//
|
|
|
+ // 基于准备好的dom，初始化echarts图表
|
|
|
+ var myChart = echarts.init(document.getElementById('chartContainer1'), 'macarons');
|
|
|
+ var option = {
|
|
|
+ color:['#e9af68','#57b7b6','#e4575a','#959eac','#ffa500',
|
|
|
+ '#d38b70','#8fb7cf','#cd5c5c','#5c616b','#40e0d0',
|
|
|
+ '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
|
|
|
+ '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
|
|
|
+ tooltip : {
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: "{b} <br/>{a}：{c} 位<br/>{a1}：{c1} 条"
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data:['添加客户数','添加客户记录数']
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ show : true,
|
|
|
+ feature : {
|
|
|
+ magicType : {show: true, type: ['line', 'bar']}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ calculable : true,
|
|
|
+ xAxis : [
|
|
|
+ {
|
|
|
+ type : 'category',
|
|
|
+ boundaryGap : false,
|
|
|
+ data : {{statisticsDay}}
|
|
|
+ }
|
|
|
],
|
|
|
- function(ec) {
|
|
|
- //1 最近30天客户数量与记录趋势//
|
|
|
- // 基于准备好的dom，初始化echarts图表
|
|
|
- var myChart = ec.init(document.getElementById('chartContainer1'));
|
|
|
- var option = {
|
|
|
- color:['#e9af68','#57b7b6','#e4575a','#959eac','#ffa500',
|
|
|
- '#d38b70','#8fb7cf','#cd5c5c','#5c616b','#40e0d0',
|
|
|
- '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
|
|
|
- '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
|
|
|
- tooltip : {
|
|
|
- trigger: 'axis',
|
|
|
- formatter: "{b} <br/>{a}：{c} 位<br/>{a1}：{c1} 条"
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data:['添加客户数','添加客户记录数']
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- show : true,
|
|
|
- feature : {
|
|
|
- magicType : {show: true, type: ['line', 'bar']}
|
|
|
- }
|
|
|
- },
|
|
|
- calculable : true,
|
|
|
- xAxis : [
|
|
|
- {
|
|
|
- type : 'category',
|
|
|
- boundaryGap : false,
|
|
|
- data : {{statisticsDay}}
|
|
|
- }
|
|
|
- ],
|
|
|
- yAxis : [
|
|
|
- { color:'#000',
|
|
|
- type : 'value',
|
|
|
- axisLabel : {
|
|
|
- formatter: '{value}'
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- lineStyle: {
|
|
|
- color:'#000000'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- splitArea : {show : true}
|
|
|
- }
|
|
|
- ],
|
|
|
- series : [
|
|
|
- {
|
|
|
- name:'添加客户数',
|
|
|
- type:'line',
|
|
|
- data:{{statisticsClient}},
|
|
|
- markPoint : {
|
|
|
- data : [
|
|
|
- {type : 'max', name: '最大值'},
|
|
|
- {type : 'min', name: '最小值'}
|
|
|
- ]
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name:'添加客户记录数',
|
|
|
- type:'line',
|
|
|
- data:{{statisticsLongle}},
|
|
|
- markPoint : {
|
|
|
- data : [
|
|
|
- {type : 'max', name: '最大值'},
|
|
|
- {type : 'min', name: '最小值'}
|
|
|
- ]
|
|
|
- },
|
|
|
- },
|
|
|
- ]
|
|
|
- };
|
|
|
-
|
|
|
- // 为echarts对象加载数据
|
|
|
- myChart.setOption(option);
|
|
|
- //1 最近30天客户数量与记录趋势//
|
|
|
- //2 最近30天客户数量地域//
|
|
|
- // 基于准备好的dom，初始化echarts图表
|
|
|
- var myChart = ec.init(document.getElementById('chartContainer2'));
|
|
|
- var option = {
|
|
|
- color:['#e9af68','#57b7b6','#e4575a','#959eac','#ffa500',
|
|
|
- '#d38b70','#8fb7cf','#cd5c5c','#5c616b','#40e0d0',
|
|
|
- '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
|
|
|
- '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
|
|
|
- title : {
|
|
|
- text: '最近30天客户分布',
|
|
|
- textAlign:"left",
|
|
|
- textStyle:{
|
|
|
- fontSize: 12,
|
|
|
- color:"#666",
|
|
|
- fontWeight:"normal"
|
|
|
- }
|
|
|
- },
|
|
|
+ yAxis : [
|
|
|
+ {
|
|
|
+ color:'#000',
|
|
|
+ type : 'value',
|
|
|
+ axisLabel : {
|
|
|
+ formatter: '{value}'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ lineStyle: {
|
|
|
+ color:'#000000'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitArea : {show : true}
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series : [
|
|
|
+ {
|
|
|
+ name:'添加客户数',
|
|
|
+ type:'line',
|
|
|
+ data:{{statisticsClient}},
|
|
|
+ markPoint : {
|
|
|
+ data : [
|
|
|
+ {type : 'max', name: '最大值'},
|
|
|
+ {type : 'min', name: '最小值'}
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'添加客户记录数',
|
|
|
+ type:'line',
|
|
|
+ data:{{statisticsLongle}},
|
|
|
+ markPoint : {
|
|
|
+ data : [
|
|
|
+ {type : 'max', name: '最大值'},
|
|
|
+ {type : 'min', name: '最小值'}
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ // 为echarts对象加载数据
|
|
|
+ myChart.setOption(option);
|
|
|
+ //1 最近30天客户数量与记录趋势//
|
|
|
+ //2 最近30天客户数量地域//
|
|
|
+ // 基于准备好的dom，初始化echarts图表
|
|
|
+ var myChart2 = echarts.init(document.getElementById('chartContainer2'), 'macarons');
|
|
|
+ var option = {
|
|
|
+ color:['#e9af68','#57b7b6','#e4575a','#959eac','#ffa500',
|
|
|
+ '#d38b70','#8fb7cf','#cd5c5c','#5c616b','#40e0d0',
|
|
|
+ '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
|
|
|
+ '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
|
|
|
+ title : {
|
|
|
+ text: '最近30天客户分布',
|
|
|
+ textAlign:"left",
|
|
|
+ textStyle:{
|
|
|
+ fontSize: 12,
|
|
|
+ color:"#666",
|
|
|
+ fontWeight:"normal"
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- tooltip : {
|
|
|
- trigger: 'item',
|
|
|
- formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- show : true,
|
|
|
- feature : {
|
|
|
- dataView : {show: true, readOnly:true},
|
|
|
- }
|
|
|
- },
|
|
|
- series : [
|
|
|
- {
|
|
|
- name:'客户所在地区',
|
|
|
- type:'pie',
|
|
|
- radius : '80%',
|
|
|
- center: ['50%', '50%'],
|
|
|
- data:{{statisticsCategory}}
|
|
|
- }
|
|
|
- ]
|
|
|
-};
|
|
|
- // 为echarts对象加载数据
|
|
|
- myChart.setOption(option);
|
|
|
+ tooltip : {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ show : true,
|
|
|
+ feature : {
|
|
|
+ dataView : {show: true, readOnly:true},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series : [
|
|
|
+ {
|
|
|
+ name:'客户所在地区',
|
|
|
+ type:'pie',
|
|
|
+ radius : '80%',
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ data:{{statisticsCategory}}
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ // 为echarts对象加载数据
|
|
|
+ myChart2.setOption(option);
|
|
|
|
|
|
- //2 客户地区分布//
|
|
|
- //3 最近30天客户数量地域//
|
|
|
- // 基于准备好的dom，初始化echarts图表
|
|
|
- var myChart = ec.init(document.getElementById('chartContainer3'));
|
|
|
- var option = {
|
|
|
- title : {
|
|
|
- text: '最近30天单位分布',
|
|
|
- textAlign:"left",
|
|
|
- textStyle:{
|
|
|
- fontSize: 12,
|
|
|
- color:"#666",
|
|
|
- fontWeight:"normal"
|
|
|
- }
|
|
|
- },
|
|
|
- tooltip : {
|
|
|
- trigger: 'item',
|
|
|
- formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- show : true,
|
|
|
- feature : {
|
|
|
- dataView : {show: true, readOnly:true},
|
|
|
- }
|
|
|
- },
|
|
|
- calculable : false,
|
|
|
- series : [
|
|
|
- {
|
|
|
- name:'单位性质',
|
|
|
- type:'pie',
|
|
|
- selectedMode: 'single',
|
|
|
- radius :"40%",
|
|
|
- itemStyle : {
|
|
|
- normal : {
|
|
|
- label : {
|
|
|
- position : 'inner'
|
|
|
- },
|
|
|
- labelLine : {
|
|
|
- show : false
|
|
|
- }
|
|
|
+ //2 客户地区分布//
|
|
|
+ //3 最近30天客户数量地域//
|
|
|
+ // 基于准备好的dom，初始化echarts图表
|
|
|
+ var myChart3 = echarts.init(document.getElementById('chartContainer3'), 'macarons');
|
|
|
+ var option = {
|
|
|
+ title : {
|
|
|
+ text: '最近30天单位分布',
|
|
|
+ textAlign:"left",
|
|
|
+ textStyle:{
|
|
|
+ fontSize: 12,
|
|
|
+ color:"#666",
|
|
|
+ fontWeight:"normal"
|
|
|
}
|
|
|
},
|
|
|
- data:{{statisticsNature}}
|
|
|
- },
|
|
|
- {
|
|
|
- name:'单位所在地区',
|
|
|
- type:'pie',
|
|
|
- radius : [90, 120],
|
|
|
- data:{{statisticsCompany}}
|
|
|
- }
|
|
|
- ]
|
|
|
-};
|
|
|
-var ecConfig = require('echarts/config');
|
|
|
-myChart.on(ecConfig.EVENT.PIE_SELECTED, function (param){
|
|
|
- var selected = param.selected;
|
|
|
- var serie;
|
|
|
- var str = '当前选择： ';
|
|
|
- for (var idx in selected) {
|
|
|
- serie = option.series[idx];
|
|
|
- for (var i = 0, l = serie.data.length; i < l; i++) {
|
|
|
- if (selected[idx][i]) {
|
|
|
- str += '【系列' + idx + '】' + serie.name + ' : ' +
|
|
|
- '【数据' + i + '】' + serie.data[i].name + ' ';
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- document.getElementById('wrong-message').innerHTML = str;
|
|
|
-})
|
|
|
+ tooltip : {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ show : true,
|
|
|
+ feature : {
|
|
|
+ dataView : {show: true, readOnly:true},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ calculable : false,
|
|
|
+ series : [
|
|
|
+ {
|
|
|
+ name:'单位性质',
|
|
|
+ type:'pie',
|
|
|
+ selectedMode: 'single',
|
|
|
+ radius :"40%",
|
|
|
+ itemStyle : {
|
|
|
+ normal : {
|
|
|
+ label : {
|
|
|
+ position : 'inner'
|
|
|
+ },
|
|
|
+ labelLine : {
|
|
|
+ show : false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data:{{statisticsNature}}
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'单位所在地区',
|
|
|
+ type:'pie',
|
|
|
+ radius : [90, 120],
|
|
|
+ data:{{statisticsCompany}}
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+// var ecConfig = require('echarts/config');
|
|
|
+// myChart3.on(ecConfig.EVENT.PIE_SELECTED, function (param){
|
|
|
+// var selected = param.selected;
|
|
|
+// var serie;
|
|
|
+// var str = '当前选择： ';
|
|
|
+// for (var idx in selected) {
|
|
|
+// serie = option.series[idx];
|
|
|
+// for (var i = 0, l = serie.data.length; i < l; i++) {
|
|
|
+// if (selected[idx][i]) {
|
|
|
+// str += '【系列' + idx + '】' + serie.name + ' : ' +
|
|
|
+// '【数据' + i + '】' + serie.data[i].name + ' ';
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// document.getElementById('wrong-message').innerHTML = str;
|
|
|
+// });
|
|
|
|
|
|
- // 为echarts对象加载数据
|
|
|
- myChart.setOption(option);
|
|
|
+ // 为echarts对象加载数据
|
|
|
+ myChart3.setOption(option);
|
|
|
|
|
|
- //3 单位地区分布//
|
|
|
- }
|
|
|
- );
|
|
|
- </script>
|
|
|
+ //3 单位地区分布//
|
|
|
+ })
|
|
|
+</script>
|
|
|
|
|
|
<body>
|
|
|
<div class="mainLayout">
|
