模仿腾讯疫情地图,Y轴有个百分比,也就是Y轴有单位,使用JS代码如下:
tooltip: {
trigger: 'axis',
formatter: function (params) {
var relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '%'
}
return relVal;
}
},
X轴倾斜代码如下:
axisLabel: {
interval: 0,
rotate: 35
}
demo的实现效果如下:
完整的demo代码如下:
function showLine(container, time, valueMap) {
timeTmp = time.reverse();
time = [];
for (i = 0; i < timeTmp.length; i++) {
args = timeTmp[i].split("-");
time.push(args[1] + "-" + args[2])
}
a = valueMap.get("亚洲").reverse();
b = valueMap.get("欧洲").reverse();
c = valueMap.get("北美洲").reverse();
d = valueMap.get("南美洲").reverse();
e = valueMap.get("非洲").reverse();
f = valueMap.get("大洋洲").reverse();
arate = [];
brate = [];
crate = [];
drate = [];
erate = [];
frate = [];
for (i = 1; i < time.length; i++) {
console.log(a[i]);
arate.push(Math.floor((a[i] - a[i - 1]) / a[i - 1] * 10000 + 0.5) / 100);
brate.push(Math.floor((b[i] - b[i - 1]) / b[i - 1] * 10000 + 0.5) / 100);
crate.push(Math.floor((c[i] - c[i - 1]) / c[i - 1] * 10000 + 0.5) / 100);
drate.push(Math.floor((d[i] - d[i - 1]) / d[i - 1] * 10000 + 0.5) / 100);
erate.push(Math.floor((e[i] - e[i - 1]) / e[i - 1] * 10000 + 0.5) / 100);
frate.push(Math.floor((f[i] - f[i - 1]) / f[i - 1] * 10000 + 0.5) / 100);
}
time = time.slice(1);
console.log(time);
var dom = document.getElementById(container);
var myChart = echarts.init(dom, 'theme');
var app = {};
option = null;
option = {
tooltip: {
trigger: 'axis',
formatter: function (params) {
var relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '%'
}
return relVal;
}
},
legend: {
data: ['亚洲', '欧洲', '北美洲', '南美洲', '非洲', '大洋洲']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
//x 轴
data: time,
axisLabel: {
interval: 0,
rotate: 35
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value}%'
},
show: true
},
series: [
{
name: "亚洲",
type: 'line',
data: arate
},
{
name: '欧洲',
type: 'line',
data: brate
},
{
name: '北美洲',
type: 'line',
data: crate
},
{
name: '南美洲',
type: 'line',
data: drate
},
{
name: '非洲',
type: 'line',
data: erate
},
{
name: '大洋洲',
type: 'line',
data: frate
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}