数据开发平台使用echarts做数据可视化
<div id="main" style="width: 100%;height:400px;"></div>
var dx = new Array();
var dy_mobile_investment = new Array();
var dy_investamount = new Array();
var dy_mobile_percent = new Array();
<#list mobileBondSaledList as file>
dx.push("${file.mounth}");
dy_mobile_investment.push("${file.mobile_investment}");
dy_investamount.push("${file.investamount}");
dy_mobile_percent.push("${file.mobile_percent}");
</#list>
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('tryecharts'));
// 指定图表的配置项和数据
var option = {
title: {
text: '移动端月销售占比'
},
tooltip: {
trigger: 'axis',
},
toolbox: {
orient:'vertical',
iconStyle:{
normal:{
textPosition:'left',
textAlign:'left',
},
emphasis:{
textPosition:'left',
textAlign:'right',
}
},
feature: {
saveAsImage: {},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
dataZoom:{},
restore:{},
}
},
legend: {
data:['移动端月销售额(单位:百万)','月总销售额(单位:百万)','移动端月销售占比(%)','移动端月销售占比(折线)']
},
xAxis: {
data: dx,
name:'月份',
nameLocation:'middle',
nameGap: 25,
nameTextStyle: {
fontWeight: 'bold',
fontSize: 13,
},
},
yAxis:[
{
type: 'value',
name: '金额(百万)',
nameTextStyle: {
fontWeight: 'bold',
fontSize: 13,
},
},
{
type: 'value',
name: '占比(%)',
nameTextStyle: {
fontWeight: 'bold',
fontSize: 13,
},
splitLine:{
show:false,
}
},
],
series: [
{
name: '移动端月销售额(单位:百万)',
type: 'bar',
itemStyle:{
normal:{
barBorderRadius: 3,
color:'rgba(11,205,221,0.8)'
},
emphasis:{
barBorderRadius: 3,
color:'rgba(11,205,221,1)'
}
},
data: []
},
{
name: '月总销售额(单位:百万)',
type: 'bar',
itemStyle:{
normal:{
barBorderRadius: 3,
color:'rgba(191,115,187,0.8)'
},
emphasis:{
barBorderRadius: 3,
color:'rgba(191,115,187,1)'
}
},
data: []
},
{
name: '移动端月销售占比(%)',
type: 'bar',
itemStyle:{
normal:{
barBorderRadius: 3,
color:'rgba(255,104,180,0.8)'
},
emphasis:{
barBorderRadius: 3,
color:'rgba(255,104,180,1)'
}
},
yAxisIndex: 1,
data: []
},
{
name: '移动端月销售占比(折线)',
type: 'line',
itemStyle:{
normal:{
barBorderRadius: 3,
color:'rgba(255,104,180,0.8)'
},
emphasis:{
barBorderRadius: 3,
color:'rgba(255,104,180,1)'
}
},
yAxisIndex: 1,
data: []
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
function fetchData(cb) {
setTimeout(function () {
cb({
categories: dx,
dy_mobile_investment: dy_mobile_investment,
dy_investamount:dy_investamount,
dy_mobile_percent:dy_mobile_percent,
dy_mobile_percent_line:dy_mobile_percent
});
}, 1000);
}
// 异步加载数据
fetchData(function (data) {
myChart.setOption({
xAxis: {
data: data.categories
},
series: [
{
// 根据名字对应到相应的系列
name: '移动端月销售额(单位:百万)',
data: data.dy_mobile_investment,
label: {
normal: {
show: false,
}
},
},
{
// 根据名字对应到相应的系列
name: '月总销售额(单位:百万)',
data: data.dy_investamount,
label: {
normal: {
show: false,
}
},
},
{
// 根据名字对应到相应的系列
name: '移动端月销售占比(%)',
data: data.dy_mobile_percent,
label: {
normal: {
show: false,
}
},
},
{
// 根据名字对应到相应的系列
name: '移动端月销售占比(折线)',
data: data.dy_mobile_percent_line,
}
]
});
});