1.柱狀圖
h5代碼
<div id="_bar" style="height: 500px; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; cursor: default; background-color: rgba(0, 0, 0, 0);padding-top: 15px;">js代碼
//初始化
var bar_echarts = echarts.init(document.getElementById("_bar"));
//option
bar_option = {
title: {
text: "設備數",
},
tooltip: {
trigger: "axis"
},
legend: {
data: ["庫存","銷售"]
},
toolbox: {
show: true,
x: "right",
feature: {
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ["line", "bar", ]
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
calculable: true,
xAxis: [{
type: "category",
data: []
}],
yAxis: [{
type: "value"
}],
series: []
};
//異步獲取數據
function requestStore(ec,option){
var requestUrl = "${baseURL}/index/showStore";
ec.showLoading({
text:'數據加載中...'
});
$.ajax({
url:requestUrl,
type:'get',
dataType:'json',
success:function(jsons){
ec.hideLoading();
var Item = function(){
return {
name:'',
type:'bar',
data:[]
}
};
var legends = [];
var Series = [];
var json = jsons;
console.log("store:"+jsons);
var it = new Item();
it.data = json.Ydata1;
it.name = "庫存";
Series.push(it);
var it2 = new Item();
it2.data = json.Ydata2;
it2.name = "銷售";
Series.push(it2);
option.xAxis[0].data = jsons.Xdata;
option.series = Series; // 設置圖表
ec.setOption(option);// 重新加載圖表
window.onresize = ec.resize;
},
error:function(){
ec.hideLoading();
console.log("requestStore error");
// alert("數據加載失敗！請檢查數據鏈接是否正確");
}
});
}後臺返回的數據
{Ydata1: [19998, 0, 0, 0, 0], Ydata2: [2, 0, 0, 0, 0], Xdata: ["A1", "A10", "A18", "A19", "A5"]}餅狀圖
h5
<div id="_pie" style="height: 500px; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; cursor: default; background-color: rgba(0, 0, 0, 0);padding-top: 20px; ">js
pie_option = {
title: {
text: "庫存佔總數比",
x: "center"
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: []
},
toolbox: {
show: true,
feature: {
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ["pie", "funnel"],
option: {
funnel: {
x: "25%",
width: "50%",
funnelAlign: "left",
max: 1548
}
}
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
series: [{
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [],
itemStyle: {
normal: {
label: {
show: true,
formatter: "{b}:({d}%)"
},
labelLine: {
show: true
}
}
}
}]
};
function requestPie(ec,option){
var requestUrl = "${baseURL}/index/showPie";
ec.showLoading({
text:'數據加載中...'
});
$.ajax({
url:requestUrl,
type:'get',
dataType:'json',
success:function(jsons){
ec.hideLoading();
var legends = [];
var Series = [];
var json = jsons;
console.log(json.legends)
option.legend.data = json.legends;
// option.xAxis[0].data = jsons.Xdata;
console.log(json.series);
option.series = {
name: "庫存佔比",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: json.series,
itemStyle: {
normal: {
label: {
show: true,
formatter: "{b}:({d}%)"
},
labelLine: {
show: true
}
}
}
} // 設置圖表
ec.setOption(option);// 重新加載圖表
window.onresize = ec.resize;
},
error:function(){
ec.hideLoading();
console.log("requestPie error");
// alert("數據加載失敗！請檢查數據鏈接是否正確");
}
});
}返回數據
{"legends":["A1","A10","A18","A19","A5"],"series":[{"name":"A1","value":19998},{"name":"A10","value":0},{"name":"A18","value":0},{"name":"A19","value":0},{"name":"A5","value":0}]}地圖
h5
{data: [{country: "中國", dayActive: 0, occupancy: "100.0%", count: 1, sum: 0}]}js
var nameMap = {
'United States':'美國',
'Afghanistan':'阿富汗',
'Singapore':'新加坡',
'Angola':'安哥拉',
'Albania':'阿爾巴尼亞',
'United Arab Emirates':'阿聯酋',
'Argentina':'阿根廷',
'Armenia':'亞美尼亞',
'French Southern and Antarctic Lands':'法屬南半球和南極領地',
'Australia':'澳大利亞',
'Austria':'奧地利',
'Azerbaijan':'阿塞拜疆',
'Burundi':'布隆迪',
'Belgium':'比利時',
'Benin':'貝寧',
'Burkina Faso':'布基納法索',
'Bangladesh':'孟加拉國',
'Bulgaria':'保加利亞',
'The Bahamas':'巴哈馬',
'Bosnia and Herzegovina':'波斯尼亞和黑塞哥維那',
'Belarus':'白俄羅斯',
'Belize':'伯利茲',
'Bermuda':'百慕大',
'Bolivia':'玻利維亞',
'Brazil':'巴西',
'Brunei':'文萊',
'Bhutan':'不丹',
'Botswana':'博茨瓦納',
'Central African Republic':'中非共和國',
'Canada':'加拿大',
'Switzerland':'瑞士',
'Chile':'智利',
'China':'中國',
'Ivory Coast':'象牙海岸',
'Cameroon':'喀麥隆',
'Democratic Republic of the Congo':'剛果民主共和國',
'Republic of the Congo':'剛果共和國',
'Colombia':'哥倫比亞',
'Costa Rica':'哥斯達黎加',
'Cuba':'古巴',
'Northern Cyprus':'北塞浦路斯',
'Cyprus':'塞浦路斯',
'Czech Republic':'捷克共和國',
'Germany':'德國',
'Djibouti':'吉布提',
'Denmark':'丹麥',
'Dominican Republic':'多明尼加共和國',
'Algeria':'阿爾及利亞',
'Ecuador':'厄瓜多爾',
'Egypt':'埃及',
'Eritrea':'厄立特里亞',
'Spain':'西班牙',
'Estonia':'愛沙尼亞',
'Ethiopia':'埃塞俄比亞',
'Finland':'芬蘭',
'Fiji':'斐',
'Falkland Islands':'福克蘭羣島',
'France':'法國',
'Gabon':'加蓬',
'United Kingdom':'英國',
'Georgia':'格魯吉亞',
'Ghana':'加納',
'Guinea':'幾內亞',
'Gambia':'岡比亞',
'Guinea Bissau':'幾內亞比紹',
'Equatorial Guinea':'赤道幾內亞',
'Greece':'希臘',
'Greenland':'格陵蘭',
'Guatemala':'危地馬拉',
'French Guiana':'法屬圭亞那',
'Guyana':'圭亞那',
'Honduras':'洪都拉斯',
'Croatia':'克羅地亞',
'Haiti':'海地',
'Hungary':'匈牙利',
'Indonesia':'印尼',
'India':'印度',
'Ireland':'愛爾蘭',
'Iran':'伊朗',
'Iraq':'伊拉克',
'Iceland':'冰島',
'Israel':'以色列',
'Italy':'意大利',
'Jamaica':'牙買加',
'Jordan':'約旦',
'Japan':'日本',
'Kazakhstan':'哈薩克斯坦',
'Kenya':'肯尼亞',
'Kyrgyzstan':'吉爾吉斯斯坦',
'Cambodia':'柬埔寨',
'South Korea':'韓國',
'Kosovo':'科索沃',
'Kuwait':'科威特',
'Laos':'老撾',
'Lebanon':'黎巴嫩',
'Liberia':'利比里亞',
'Libya':'利比亞',
'Sri Lanka':'斯里蘭卡',
'Lesotho':'萊索托',
'Lithuania':'立陶宛',
'Luxembourg':'盧森堡',
'Latvia':'拉脫維亞',
'Morocco':'摩洛哥',
'Moldova':'摩爾多瓦',
'Madagascar':'馬達加斯加',
'Mexico':'墨西哥',
'Macedonia':'馬其頓',
'Mali':'馬裏',
'Myanmar':'緬甸',
'Montenegro':'黑山',
'Mongolia':'蒙古',
'Mozambique':'莫桑比克',
'Mauritania':'毛里塔尼亞',
'Malawi':'馬拉維',
'Malaysia':'馬來西亞',
'Namibia':'納米比亞',
'New Caledonia':'新喀里多尼亞',
'Niger':'尼日爾',
'Nigeria':'尼日利亞',
'Nicaragua':'尼加拉瓜',
'Netherlands':'荷蘭',
'Norway':'挪威',
'Nepal':'尼泊爾',
'New Zealand':'新西蘭',
'Oman':'阿曼',
'Pakistan':'巴基斯坦',
'Panama':'巴拿馬',
'Peru':'祕魯',
'Philippines':'菲律賓',
'Papua New Guinea':'巴布亞新幾內亞',
'Poland':'波蘭',
'Puerto Rico':'波多黎各',
'North Korea':'北朝鮮',
'Portugal':'葡萄牙',
'Paraguay':'巴拉圭',
'Qatar':'卡塔爾',
'Romania':'羅馬尼亞',
'Russia':'俄羅斯',
'Rwanda':'盧旺達',
'Western Sahara':'西撒哈拉',
'Saudi Arabia':'沙特阿拉伯',
'Sudan':'蘇丹',
'South Sudan':'南蘇丹',
'Senegal':'塞內加爾',
'Solomon Islands':'所羅門羣島',
'Sierra Leone':'塞拉利昂',
'El Salvador':'薩爾瓦多',
'Somaliland':'索馬里蘭',
'Somalia':'索馬里',
'Republic of Serbia':'塞爾維亞',
'Suriname':'蘇里南',
'Slovakia':'斯洛伐克',
'Slovenia':'斯洛文尼亞',
'Sweden':'瑞典',
'Swaziland':'斯威士蘭',
'Syria':'敘利亞',
'Chad':'乍得',
'Togo':'多哥',
'Thailand':'泰國',
'Tajikistan':'塔吉克斯坦',
'Turkmenistan':'土庫曼斯坦',
'East Timor':'東帝汶',
'Trinidad and Tobago':'特里尼達和多巴哥',
'Tunisia':'突尼斯',
'Turkey':'土耳其',
'United Republic of Tanzania':'坦桑尼亞',
'Uganda':'烏干達',
'Ukraine':'烏克蘭',
'Uruguay':'烏拉圭',
'United States of America':'美國',
'Uzbekistan':'烏茲別克斯坦',
'Venezuela':'委內瑞拉',
'Vietnam':'越南',
'Vanuatu':'瓦努阿圖',
'West Bank':'西岸',
'Yemen':'也門',
'South Africa':'南非',
'Zambia':'贊比亞',
'Zimbabwe':'津巴布韋'
};
map_char_activition = echarts.init(document.getElementById('_add_map'));
requestActivationMapData("activation",7,option2,map_char_activition,userType,userStatus,values_activation);
option2 = {
timeline: {
axisType: 'category',
orient: 'vertical',
autoPlay: true,
inverse: true,
playInterval: 5000,
left: null,
right: -105,
top: 20,
bottom: 20,
width: 46,
data: ['2016',]
},
baseOption: {
visualMap: {
max: 100,
calculable: true,
inRange: {
color: ['#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
}
},
series: [{
type: 'map',
map: 'world',
roam: true,
nameMap: nameMap
}]
},
options: [{
title: {
},
series: {
data: value3
}
}, ]
};
function requestActivationMapData(type,date,options,ec,userType,userStatus,values){
var requestUrl = "${baseURL}/region/Map/"+type+"/"+date+"/"+userType+"/"+userStatus;
ec.showLoading({
text:'數據加載中...'
});
$.ajax({
url:requestUrl,
type:'get',
dataType:'json',
success:function(jsons){
ec.hideLoading();
var Item = function(){
return {
name:'',
value:0
}
};
var Series = [];
var data1 =[];
var json = jsons.data;
for(var i=0;i < json.length;i++){
var it = new Item();
it.name = json[i].country;
it.value = json[i].count;
values.push(it);
}
console.log(values);
optionk={
timeline: {
axisType: 'category',
orient: 'vertical',
autoPlay: true,
inverse: true,
playInterval: 5000,
left: null,
right: -105,
top: 20,
bottom: 20,
width: 46,
data: ['2016',]
},
baseOption: {
visualMap: {
max: 10000,
calculable: true,
inRange: {
color: ['#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
}
},
series: [{
type: 'map',
map: 'world',
roam: true,
nameMap: nameMap
}]
},
options: [{
title: {
},
series: {
data: values
}
}, ]
};
ec.setOption(optionk);
//ec.clear();
// ec.setOption(options);// 重新加載圖表
//values=[];
window.onresize = ec.resize;
},
error:function(){
ec.hideLoading();
console.log("show requestData error");
// alert("數據加載失敗！請檢查數據鏈接是否正確");
}
});
}返回數據
{data: [{country: "中國", dayActive: 0, occupancy: "100.0%", count: 1, sum: 0}]}折線圖
h5
<div id="_model_line" style="height:500px;padding-top: 10px;"></div>js
model_option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: []
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar', 'stack', 'tiled']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},返回數據
{"data":[{"sn":null,"dev_name":null,"country":null,"mobile_op":null,"mobile_model":null,"mobile_brand":"test","hour":null,"count":0,"dayActive":0,"sum":1,"occupancy":"100.0%"}]}