大数据量散点图echarts scatter配置项内容和展示
配置项如下
var hours = [ "20190408-20190414",
"20190415-20190421",
"20190422-20190428",
"20190429-20190505",
"20190506-20190512"];
var days = [
"aliexpress",
"amazon",
"banggood",
"cdiscount",
"chicdeals",
"ebay",
"hiselling",
"newchic",
"newegg",
"priceminster",
"secrexy",
"shopify",
"walmart",
"wish",
"yoins",
"品牌站"
];
var result = [
[
"20190408-20190414",
"aliexpress",
"0.957440"
],
[
"20190415-20190421",
"aliexpress",
"0.962130"
],
[
"20190422-20190428",
"aliexpress",
"0.978220"
],
[
"20190408-20190414",
"amazon",
"0.971020"
],
[
"20190415-20190421",
"amazon",
"0.975710"
],
[
"20190422-20190428",
"amazon",
"0.979150"
],
[
"20190408-20190414",
"banggood",
"0.982980"
],
[
"20190415-20190421",
"banggood",
"0.999420"
],
[
"20190422-20190428",
"banggood",
"0.999020"
],
[
"20190408-20190414",
"cdiscount",
"1.000000"
],
[
"20190415-20190421",
"cdiscount",
"1.000000"
],
[
"20190422-20190428",
"cdiscount",
"1.000000"
],
[
"20190408-20190414",
"chicdeals",
"0.525000"
],
[
"20190415-20190421",
"chicdeals",
"0.941670"
],
[
"20190422-20190428",
"chicdeals",
"0.859500"
],
[
"20190408-20190414",
"ebay",
"0.999950"
],
[
"20190415-20190421",
"ebay",
"0.999920"
],
[
"20190422-20190428",
"ebay",
"0.999960"
],
[
"20190408-20190414",
"hiselling",
"0.900000"
],
[
"20190415-20190421",
"hiselling",
"1.000000"
],
[
"20190422-20190428",
"hiselling",
"0.976740"
],
[
"20190408-20190414",
"newchic",
"1.000000"
],
[
"20190415-20190421",
"newchic",
"1.000000"
],
[
"20190422-20190428",
"newchic",
"1.000000"
],
[
"20190408-20190414",
"newegg",
"0.352940"
],
[
"20190415-20190421",
"newegg",
"1.000000"
],
[
"20190408-20190414",
"priceminster",
"1.000000"
],
[
"20190415-20190421",
"priceminster",
"1.000000"
],
[
"20190422-20190428",
"priceminster",
"1.000000"
],
[
"20190408-20190414",
"secrexy",
"1.000000"
],
[
"20190415-20190421",
"secrexy",
"0.987340"
],
[
"20190422-20190428",
"secrexy",
"1.000000"
],
[
"20190408-20190414",
"shopify",
"0.990000"
],
[
"20190415-20190421",
"shopify",
"0.797300"
],
[
"20190422-20190428",
"shopify",
"0.982460"
],
[
"20190408-20190414",
"walmart",
"0.998740"
],
[
"20190415-20190421",
"walmart",
"0.996230"
],
[
"20190422-20190428",
"walmart",
"0.997820"
],
[
"20190408-20190414",
"wish",
"0.799240"
],
[
"20190415-20190421",
"wish",
"0.765540"
],
[
"20190422-20190428",
"wish",
"0.624390"
],
[
"20190408-20190414",
"yoins",
"0.878470"
],
[
"20190415-20190421",
"yoins",
"0.963850"
],
[
"20190422-20190428",
"yoins",
"0.938920"
],
[
"20190422-20190428",
"newegg",
"0.800000"
],
[
"20190429-20190505",
"aliexpress",
"0.876160"
],
[
"20190429-20190505",
"amazon",
"0.875270"
],
[
"20190429-20190505",
"banggood",
"0.798050"
],
[
"20190429-20190505",
"cdiscount",
"0.900290"
],
[
"20190429-20190505",
"chicdeals",
"0.588710"
],
[
"20190429-20190505",
"ebay",
"0.856800"
],
[
"20190429-20190505",
"hiselling",
"1.000000"
],
[
"20190429-20190505",
"newchic",
"0.726700"
],
[
"20190429-20190505",
"priceminster",
"0.876400"
],
[
"20190429-20190505",
"secrexy",
"0.849320"
],
[
"20190429-20190505",
"shopify",
"0.932200"
],
[
"20190429-20190505",
"walmart",
"0.836110"
],
[
"20190429-20190505",
"wish",
"0.693040"
],
[
"20190429-20190505",
"yoins",
"0.340210"
],
[
"20190429-20190505",
"newegg",
"0.250000"
],
[
"20190506-20190512",
"aliexpress",
"0.913640"
],
[
"20190506-20190512",
"amazon",
"0.933330"
],
[
"20190506-20190512",
"banggood",
"0.878800"
],
[
"20190506-20190512",
"cdiscount",
"0.921490"
],
[
"20190506-20190512",
"chicdeals",
"0.883720"
],
[
"20190506-20190512",
"ebay",
"0.892830"
],
[
"20190506-20190512",
"hiselling",
"0.909090"
],
[
"20190506-20190512",
"newchic",
"0.358720"
],
[
"20190506-20190512",
"priceminster",
"0.866670"
],
[
"20190506-20190512",
"secrexy",
"0.956520"
],
[
"20190506-20190512",
"shopify",
"0.969700"
],
[
"20190506-20190512",
"walmart",
"0.905940"
],
[
"20190506-20190512",
"wish",
"0.670100"
],
[
"20190506-20190512",
"yoins",
"0.760000"
],
[
"20190506-20190512",
"newegg",
"1.000000"
],
[
"20190506-20190512",
"品牌站",
"0.000000"
]
];
var metas = [{
"chinese":"周日期范围",
"columnTypeName":"VARCHAR",
"numType":3,
"sortType":"DEFAULT",
"uuid":"a7a78efc-1a87-46db-ab60-de2c003b447c"
},{
"chinese":"平台",
"columnTypeName":"VARCHAR",
"numType":3,
"sortType":"DEFAULT",
"uuid":"105655eb-84ea-469b-9708-6f6c07732bc9"
},{
"chinese":"邮件下载数",
"columnTypeName":"DECIMAL",
"numType":0,
"sortType":"DEFAULT",
"uuid":"64ca0ef5-e774-4979-bd23-55721cf0f0e4"
}];
var data = result.map(item => {
var y = days.findIndex(v => item[1] == v)
var x = hours.findIndex(v => item[0] == v)
console.log('data',[x,y,item[2]])
return [x,y,item[2]];
});
option = {
legend: {
data: ['邮件下载数'],
left: 'right'
},
tooltip: {
position: 'top',
formatter: function (params) {
return days[params.value[1]] + '：' + params.value[2];
}
},
grid: {
left: 2,
bottom: 10,
right: 10,
containLabel: true
},
xAxis: {
type: 'category',
data: hours,
boundaryGap: false,
splitLine: {
show: true,
lineStyle: {
color: '#999',
type: 'dashed'
}
},
axisLine: {
show: false
}
},
yAxis: {
type: 'category',
data: days,
axisLine: {
show: false
}
},
series: [{
name: '邮件下载数',
type: 'scatter',
symbolSize: (value, params) => {
console.log('value',value)
return value[2]*30
},
data: data,
animationDelay: function (idx) {
return idx * 5;
}
}]
};
截图如下
