<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('线状图')" />
</head>
<body class="gray-bg">
<span id="sparkline19"></span>
<span class="line" id="sparkline201"></span>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" class="line" ></div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: sparkline-js" />
<script th:inline="javascript">
$(function () {
var id = [[${id}]]
$.ajax({
type: "post",
url: ctx + "user/mapping",
data: {
},
success: function(r) {
//alert(r)
var str = [];
var str2 = [];
var str3 = [];
var str4 = [];
console.log(r.data);
str=JSON.parse("[" + r.data + "]");
str3=r.data;
str4=r.data;
console.log(str4);
for (i=0;i<str.length;i++ )
{
str2.push(str[i]);
}
console.log(str2);
var mapResult2 = str2.map(function(item,index,array){
return item-0;
});
$("#sparkline9").sparkline(mapResult2, {
type: 'line',
lineWidth: 1,
height: '300px',
lineColor: '#17997f',
fillColor: '#ffffff',
});
$("#sparkline19").sparkline([mapResult2], {
type: 'line',
lineWidth: 1,
height: '300px',
lineColor: '#17997f',
fillColor: '#ffffff',
});
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [mapResult2]
}, {
name: '邮件营销11',
type: 'line',
stack: '总量',
data: mapResult2
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
})
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('线状图')" />
</head>
<body class="gray-bg">
<span id="sparkline19"></span>
<span class="line" id="sparkline201"></span>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" class="line" ></div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: sparkline-js" />
<script th:inline="javascript">
$(function () {
var id = [[${id}]]
$.ajax({
type: "post",
url: ctx + "user/mapping",
data: {
},
success: function(r) {
//alert(r)
var str = [];
var str2 = [];
var str3 = [];
var str4 = [];
console.log(r.data);
str=JSON.parse("[" + r.data + "]");
str3=r.data;
str4=r.data;
console.log(str4);
for (i=0;i<str.length;i++ )
{
str2.push(str[i]);
}
console.log(str2);
var mapResult2 = str2.map(function(item,index,array){
return item-0;
});
$("#sparkline9").sparkline(mapResult2, {
type: 'line',
lineWidth: 1,
height: '300px',
lineColor: '#17997f',
fillColor: '#ffffff',
});
$("#sparkline19").sparkline([mapResult2], {
type: 'line',
lineWidth: 1,
height: '300px',
lineColor: '#17997f',
fillColor: '#ffffff',
});
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [mapResult2]
}, {
name: '邮件营销11',
type: 'line',
stack: '总量',
data: mapResult2
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
})
});
</script>
</body>
</html>关键处理代码
var mapResult2 = str2.map(function(item,index,array){
return item-0;
});
来源：oschina
链接：https://my.oschina.net/u/2299924/blog/4483551