1. 摘要
十載的岳普湖網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整岳普湖建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“岳普湖網(wǎng)站設(shè)計(jì)”,“岳普湖網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
最近做項(xiàng)目遇到個(gè)統(tǒng)計(jì)相關(guān)需求，一個(gè)頁面中大概四個(gè)或更多圖形統(tǒng)計(jì)，百度地圖、餅圖、柱狀圖、線型圖。百度地圖上顯示所有店面在全國(guó)各地大概位置，目前暫定每省一個(gè)，在地圖上顯示散點(diǎn)。如默認(rèn)顯示鄭州散點(diǎn)閃動(dòng)，其他圖形顯示鄭州相關(guān)數(shù)據(jù)；5秒切換下一個(gè)區(qū)域點(diǎn)，其他的圖表數(shù)據(jù)對(duì)應(yīng)改變。先上個(gè)圖，各位有需要的可以再接著往下
2. 引入ECharts以及地圖相關(guān)json
ECharts 3 開始不再?gòu)?qiáng)制使用 AMD 的方式按需引入，代碼里也不再內(nèi)置 AMD 加載器。因此引入方式簡(jiǎn)單了很多，只需要像普通的 JavaScript 庫(kù)一樣用 script 標(biāo)簽引入。
3. 界面布局
一個(gè)頁面中布局多個(gè)圖表有幾個(gè)形式可以參考處理。
第一種：在網(wǎng)頁創(chuàng)建多個(gè)div用定位的方式，多個(gè)畫布。此方法聲明多個(gè)echarts對(duì)象，不再過多介紹，除非特別個(gè)性需求，不推薦使用。
第二種：一個(gè)div一個(gè)畫布，一個(gè)option，多個(gè)series，調(diào)整圖形x/y的百分百來定位圖形顯示到界面上的位置。本文用這個(gè)方法。
第三種：與第二種基本一樣，最大的不同是每個(gè)圖標(biāo)上都可以有一個(gè)標(biāo)題,多個(gè)optioins；也是多個(gè)畫布，但推薦這種。網(wǎng)址參考：http://gallery.echartsjs.com/editor.html?c=xBkXgRwejM
重慶分公司
重慶分公司
options = [
// 第一個(gè)graph
{
backgroundColor:'#FFFFFF',
title: {
text: 'Sales Revenue of CAN-LAX 2016-2017',
textStyle:{
fontSize:14
}
},
tooltip: { // 提示框組件
trigger: 'axis',
axisPointer: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
type: 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
}
},
legend: {
data: ['2016', '2017','Growing Rate'],
top:'18'
},
grid: {
left: '3%',
right: '5%',
bottom: '3%',
containLabel: true,
show: false // 網(wǎng)格邊框是否顯示，上和右邊框
},
toolbox: {
feature: {
dataView: {show: false, readOnly: false}, // 數(shù)據(jù)試圖是否在控件中顯示
//magicType: {show: true, type: ['stack', 'tiled']},
//restore: {show: true},
saveAsImage: {show: true}
}
},
xAxis: {
type: 'category',
boundaryGap: true, // 坐標(biāo)軸兩邊留白
splitLine: { // 網(wǎng)格線 x軸對(duì)應(yīng)的是否顯示
show: false
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: [ // 雙y坐標(biāo)軸
{
name: 'Revenue(10k)',
type: 'value',
splitLine: { // 網(wǎng)格線 y軸對(duì)應(yīng)的是否顯示
show: false
},
axisLabel: {
formatter: '{value}'
}
},
{
name: 'Growing\nRate (%)',
//nameLocation: 'start',
splitLine: { // 網(wǎng)格線 y軸對(duì)應(yīng)的是否顯示
show: false
},
min:0,
max: 300, // growing rate upper limit
type: 'value',
//top:10,
inverse: false,
axisLine: {
lineStyle: {
color: '#2f4554'
}
}
}],
series: [
{
name:'2016',
type:'bar',
color:'#00BFFF',
//stack: '總量',
markPoint : {
data : [
{type : 'max', name : '最大值'},
{type : 'min', name : '最小值'}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
},
data:[1741.9, 977, 1742.2, 1431.1, 1636.2, 1447, 1711.7, 1921.2, 2609.6, 3332.6, 3647.3, 2498.1]
},
{
name:'2017',
type:'bar',
color: '#DC143C',
//stack: '總量',
markPoint : {
data : [
{type : 'max', name : '最大值'},
{type : 'min', name : '最小值'}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
},
data:[2609, 1162.9, 2942.9, 5174.6, 5114.4, 5065.8, 3956.1, 3691.1, 4637.6, 4603.8, 6401.1, 4988.4]
},
{
name:'Growing Rate',
type:'line',
yAxisIndex: 1, // yAxisIndex 1 表示第二個(gè)y軸，默認(rèn)為0
color: '#FFD700',
//stack: '總量',
markPoint : {
data : [
{type : 'max', name : '最大值'},
//{type : 'min', name : '最小值'}
]
},
data:[49.8, 19, 68.9, 261.6, 212.6, 250.1, 131.1, 92.1, 77.7, 38.1, 75.5, 99.7]
}
]
},
// visualMap: { # 旁邊會(huì)有 視覺映射組件
// type: 'continuous',
// dimension: 1,
// text: ['High', 'Low'],
// inverse: true,
// itemHeight: 200,
// calculable: true,
// min: -2,
// max: 6,
// top: 60,
// left: 10,
// inRange: {
// colorLightness: [0.4, 0.8]
//},
// outOfRange: {
// color: '#bbb'
// },
// controller: {
// inRange: {
// color: '#01949B'
//}
// }
//},
//第2個(gè)graph
{
backgroundColor:'#FFFFFF', // 背景色
title: {
text: 'Cargo Load Factor-2016/2017',
textStyle:{
fontSize:14,
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['CLF-2016','CLF-2017'],
top:'18' // 距離容器頂端的距離
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
dataView: {show: false, readOnly: false}, // 數(shù)據(jù)試圖是否在控件中顯示
saveAsImage: {show:true}
}
},
xAxis: {
type: 'category',
boundaryGap: false, // 坐標(biāo)軸兩邊留白策略
splitLine: { // 網(wǎng)格線 x軸對(duì)應(yīng)的是否顯示
show: false
},
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
},
yAxis: {
type: 'value',
name: 'CLF(%)',
min: 70,
max: 100,
interval: 10,
splitLine: { // 網(wǎng)格線 y軸對(duì)應(yīng)的是否顯示
show: false
}
},
series: [
{
name:'CLF-2016',
type:'line',
data:[88.29, 83.68, 89.64, 90.47, 90.21, 93.63, 94.07, 90.85, 90.32, 90.56, 86.69, 81.77]
},
{
name:'CLF-2017',
type:'line',
data:[90.36, 86.21, 92.04, 89.91, 90.15, 90.38, 88.03, 88.99, 88.35, 87.18, 86.29, 81.23]
}
]
},
//第3個(gè)graph
{
backgroundColor:'#FFFFFF',
title: {
text: 'Sales Strcture of CAN-LAX in 2016',
//left:'center', // title位置
textStyle:{
fontSize:14,
}
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
type: 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
}
},
toolbox: {
feature: {
dataView: {show: false, readOnly: false}, // 數(shù)據(jù)試圖是否在控件中顯示
//magicType: {show: true, type: ['stack', 'tiled']},
//restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data: ['直達(dá)', '中轉(zhuǎn)', '聯(lián)程', '郵件'],
top:'18'
},
grid: {
left: '2%',
right: '9%',
bottom: '3%',
containLabel: true,
show: false // 網(wǎng)格邊框是否顯示，上和右邊框
},
xAxis: [{
type: 'category',
splitLine: { // 網(wǎng)格線 x軸對(duì)應(yīng)的是否顯示
show: false
},
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}],
yAxis: [{
name: 'Revenue(10k)',
type: 'value',
splitLine: { // 網(wǎng)格線 y軸對(duì)應(yīng)的是否顯示
show: false
},
axisLabel: {
formatter: '{value}'
},
}],
series: [{
name: '直達(dá)',
type: 'bar',
itemStyle:{
normal:{color:'#01949B'},
},
//markPoint : {
//data : [
//{type : 'max', name : '最大值'},
//{type : 'min', name : '最小值'}
//]
//},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
},
data: [919, 455.7, 1074.8, 911.7, 1006.8, 1075.6, 1106.1, 1274.5, 1755.6, 2562.7, 2056.1, 1227.9]
},
{
name: '中轉(zhuǎn)',
type: 'bar',
itemStyle:{
normal:{color:'#EBA954'},
},
//markPoint : {
//data : [
//{type : 'max', name : '最大值'},
//{type : 'min', name : '最小值'}
//]
//},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
},
data: [567.1, 261.4, 456.8, 387, 419.2, 227, 417, 413.1, 564, 583, 915.9, 666.3]
}, {
name: '聯(lián)程',
type: 'bar',
itemStyle:{
normal:{color:'#C23531'},
},
//markPoint : {
//data : [
//{type : 'max', name : '最大值'},
//{type : 'min', name : '最小值'}
//]
//},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
},
data: [255.9, 259.8, 210.5, 118.2, 196.5, 140.6, 188.6, 204.4, 290, 186.9, 661.3, 468.2]
},{
name: '郵件',
type: 'bar',
itemStyle:{
normal:{color:'#6495ED'},
},
//markPoint : {
//data : [
//{type : 'max', name : '最大值'},
//{type : 'min', name : '最小值'}
//]
//},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
},
data: [0, 0, 0, 14.2, 13.7, 3.8, 0, 29.2, 0, 0, 14, 135.8]
}]
},
//第4個(gè)graph
{
backgroundColor:'#FFFFFF',
title: {
text: 'Cargo Structure Percentage',
subtext: '2016',
left: 'center',
subtextStyle:{
fontSize:18
}
},
toolbox: {
feature: {
dataView: {show: false, readOnly: false}, // 數(shù)據(jù)試圖是否在控件中顯示
//magicType: {show: true, type: ['stack', 'tiled']},
//restore: {show: true},
saveAsImage: {show: true}
}
},
tooltip : {
trigger: 'item',
formatter: "{a}
: {c} (squ6kqw%)"
},
legend: {
// orient: 'vertical',
// top: 'middle',
bottom: 20,
left: 'center',
data: ['直達(dá)', '中轉(zhuǎn)', '聯(lián)程', '郵件'],
show:false // legend 不顯示
},
series : [
{
name:'Cargo Source',
type: 'pie',
avoidLabelOverlap: false,
radius : '50%',
center: ['50%', '58%'],
selectedMode: 'single',
label: {
normal: {
show: true,
textStyle:{
fontSize: '10',
//fontWeight: 'bold'
},
formatter: ' : squ6kqw%',
position: 'outer'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: true
}
},
data:[
{name: '直達(dá)', value: 61.8},
{name: '聯(lián)程', value: 13.2},
{name: '中轉(zhuǎn)', value: 24.2},
{name: '郵件', value: 0.8}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
},
// 第5個(gè)graph
{
backgroundColor:'#FFFFFF',
title: {
text: 'Sales Strcture of CAN-LAX in 2017',
//left:'center', // title位置
textStyle:{
fontSize:14,
}
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
type: 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
}
},
toolbox: {
feature: {
dataView: {show: false, readOnly: false}, // 數(shù)據(jù)試圖是否在控件中顯示
//magicType: {show: true, type: ['stack', 'tiled']},
//restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data: ['直達(dá)', '中轉(zhuǎn)', '聯(lián)程', '郵件'],
top:'18'
},
grid: {
left: '2%',
right: '9%',
bottom: '3%',
containLabel: true,
show: false // 網(wǎng)格邊框是否顯示，上和右邊框
},
xAxis: [{
type: 'category',
splitLine: { // 網(wǎng)格線 x軸對(duì)應(yīng)的是否顯示
show: false
},
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}],
yAxis: [{
name: 'Revenue(10k)',
type: 'value',
splitLine: { // 網(wǎng)格線 y軸對(duì)應(yīng)的是否顯示
show: false
},
axisLabel: {
formatter: '{value}'
},
}],
series: [{
name: '直達(dá)',
type: 'bar',
itemStyle:{
normal:{color:'#01949B'},
},
//markPoint : {
//data : [
//{type : 'max', name : '最大值'},
//{type : 'min', name : '最小值'}
//]
//},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
},
data: [1504.2, 622.8, 2132, 3668.6, 3797.3, 3632.8, 2716, 2320.6, 3288.1, 3220, 3911.4, 2942]
},
{
name: '中轉(zhuǎn)',
type: 'bar',
itemStyle:{
normal:{color:'#EBA954'},
},
//markPoint : {
//data : [
//{type : 'max', name : '最大值'},
//{type : 'min', name : '最小值'}
//]
//},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
},
data: [861.7, 196.6, 600.7, 836.2, 757.8, 804.2, 766.3, 797, 677.5, 734.2, 1363.5, 977.3]
}, {
name: '聯(lián)程',
type: 'bar',
itemStyle:{
normal:{color:'#C23531'},
},
//markPoint : {
//data : [
//{type : 'max', name : '最大值'},
//{type : 'min', name : '最小值'}
//]
//},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
},
data: [240.6, 294.4, 202.6, 476.9, 308.3, 376.4, 334.7, 401, 514, 506.2, 766.2, 794.4]
},{
name: '郵件',
type: 'bar',
itemStyle:{
normal:{color:'#6495ED'},
},
//markPoint : {
//data : [
//{type : 'max', name : '最大值'},
//{type : 'min', name : '最小值'}
//]
//},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
},
data: [2.5, 49.1, 7.6, 192.9, 251, 252.3, 139.1, 172.5, 157.9, 143.4, 359.9, 274.7]
}]
},
//第6個(gè)graph
{
backgroundColor:'#FFFFFF',
title: {
text: 'Cargo Structure Percentage',
subtext: '2017',
left: 'center',
subtextStyle:{
fontSize:18
}
},
toolbox: {
feature: {
dataView: {show: false, readOnly: false}, // 數(shù)據(jù)試圖是否在控件中顯示
//magicType: {show: true, type: ['stack', 'tiled']},
//restore: {show: true},
saveAsImage: {show: true}
}
},
tooltip : {
trigger: 'item',
formatter: "{a}
: {c} (squ6kqw%)"
},
legend: {
// orient: 'vertical',
// top: 'middle',
bottom: 20,
left: 'center',
data: ['直達(dá)', '中轉(zhuǎn)', '聯(lián)程', '郵件'],
show:false // legend 不顯示
},
series : [
{
name:'Cargo Source',
type: 'pie',
avoidLabelOverlap: false,
radius : '50%',
center: ['50%', '58%'],
selectedMode: 'single',
label: {
normal: {
show: true,
textStyle:{
fontSize: '10',
//fontWeight: 'bold'
},
formatter: ' : squ6kqw%',
position: 'outer'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: true
}
},
data:[
{name: '直達(dá)', value: 66.1},
{name: '聯(lián)程', value: 11.1},
{name: '中轉(zhuǎn)', value: 19.1},
{name: '郵件', value: 3.7}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
];因?yàn)?，剛開始做沒有發(fā)現(xiàn)第三種方式，所以暫時(shí)用的第二種方式，不太好控制位置和增減圖表。如果再讓我做我會(huì)選擇第三種，感覺更靈活一些。以上是我做整合的時(shí)候發(fā)現(xiàn)在的一個(gè)頁面多個(gè)圖表幾個(gè)實(shí)現(xiàn)方式，可能還有更好的，期待你的留言。
頁面靜態(tài)代碼很簡(jiǎn)單，下面來看網(wǎng)頁代碼布局：
綜合統(tǒng)計(jì) - 大屏
4. js實(shí)現(xiàn)圖形布局
5. 定時(shí)循環(huán)jquery實(shí)現(xiàn)
地圖上的散點(diǎn)閃動(dòng)5秒切換一次，所有地圖信息參與輪詢。具體js代碼如下：
6. 總結(jié)
以上就是我在處理同頁面多圖形統(tǒng)計(jì)且有級(jí)聯(lián)關(guān)系處理時(shí)的思路及采坑代碼，文中代碼均是從項(xiàng)目中復(fù)制出來的，完整率99.99%，代碼略亂，開發(fā)中整理的思路注釋什么的未處理，見諒。
好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。
