JS/JQUERY（14）——使用echarts插件
/**
* 获取每个基金下的资产配置数据信息
*/
function addFundAsset(){
var type = "";
var arr = obj.split(",");
require.config({
paths: {
'echarts':'/javascript'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/pie' // 使用折线图就加载line模块
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
for(var i = 0; i < arr.length; i++){
type="asset_"+i;
var myChart = ec.init(document.getElementById(type));
myChart.showLoading({
text : "loading...",
effect : "bar",
textStyle : {
fontSize : 20
}
});
jQuery.getJSON(sinosoft.base + '/shop/fund_compare!addFundAsset.action',
{'productCode':arr[i]},
function(data) {
var hx = [];
var d1 = [];
var arr = [];
var map = data.ladder;
for (var key in map) {
var x = key;
var y = map[key];
var w = {value:y, name:x};
hx.push(x);
d1.push(w);
var n;
if(y==null){
n = 0;
} else {
n = y.substr(0,y.length-1);
}
var m = {value:y, name:n};
arr.push(m);
}
if(hx.length==0) hx.push("暂无数据");
if(d1.length==0) d1.push("暂无数据");
if(arr.length==0) arr.push("暂无数据");
option = {
/*tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},*/
color:['#f3931a','#71542a','#af8146'],
legend: {
y : 'bottom',
data:arr
},
calculable : true,
series : [
{
name:'资产配置',
type:'pie',
startAngle:15,
radius : ['10%', '28%'],
itemStyle : {
normal : {
label : {
show : true,
textStyle: {
color: '#808080',
fontWeight:'bolder'
}
},
labelLine : {
show : true,
lineStyle: {
color: '#808080'
}
},
borderColor : '#FFFFFF'
}
},
data:d1
}
]
};
// 为echarts对象加载数据
myChart.hideLoading();
myChart.setOption(option);
//处理IE8版本的兼容
var ver = getInternetExplorerVersion();
if(ver > -1){
if(ver == 8.0){
$("#"+type).css({filter:'alpha(opacity:'+100+')',backgroundColor:''});
$(".div_asset div").css({marginTop:(-40)+'px',marginLeft:(-7)+'px'});
}
}
});
}
}
);
}
/**
* 获取基金每个阶段收益数据信息
*/
function addFundProfit(){
var type = "";
var arr = obj.split(",");
require.config({
paths: {
'echarts':'/javascript',
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar'
],
function (ec) {
for(var i = 0; i < arr.length; i++){
for(var j = 0; j < 5; j++){
if(j==0) type="1m_"+i;
if(j==1) type="3m_"+i;
if(j==2) type="6m_"+i;
if(j==3) type="1y_"+i;
if(j==4) type="all_"+i;
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById(type));
myChart.showLoading({
text : "loading...",
effect : "bar",
textStyle : {
fontSize : 10
}
});
jQuery.getJSON(sinosoft.base + '/shop/fund_compare!addFundProfit.action',
{'productCode':arr[i],'type':j},
function(data) {
var hx = [];
var zy1 = [];
var zy2 = [];
var unit_net = data.unit_net_chng_pct;
var unit_avg = data.unit_avg;
// hx.push(unit_net+"%"+"\t\t\t\t\t\t"+unit_avg+"%");
hx.push(unit_net+"%"+" "+unit_avg+"%");
zy1.push(unit_net);
zy2.push(unit_avg);
option = {
animation:false,
/*tooltip : {
trigger: 'axis',
axisPointer:{
type : 'line',
lineStyle : {
color: '#b3b3b3',
width: 1,
type: 'solid'
},
shadowStyle : {
size: 'auto',
color: 'red'
}
},
itemStyle: {
normal: {
lineStyle : {
color: '#dfc199',
width: 2,
type: 'solid'
},
color: '#dfc199'
},
emphasis: {
lineStyle : {
color: 'red',
width: 2,
type: 'solid'
},
color: 'red'
}
}
},*/
color:['#33CCFF','#E63F00'],
legend: {
data:['收益率','同类平均'],
y :'bottom'
},
calculable : true,
xAxis : [
{
type : 'category',
axisLine :false,
data : hx
}
],
yAxis : [
{
type : 'value',
axisLine :false
}
],
series : [
{
name:'收益率',
type:'bar',
data:zy1
},
{
name:'同类平均',
type:'bar',
data:zy2
}
]
};
// 为echarts对象加载数据
myChart.hideLoading();
myChart.setOption(option);
var ver = getInternetExplorerVersion();
if(ver > -1){
if(ver == 8.0){
$("#"+type).css({filter:'alpha(opacity:'+100+')',backgroundColor:''});
$(".content04 div").css({marginTop:(-41)+'px',marginLeft:(-17)+'px'});
}
}
});
}
}
}
);
}
/**
* 获取走势图线的数据
*/
var fn1="",fn2="",fn3="",fn4="",fn5="",fn=[];
var zy1=[],zy2=[],zy3=[],zy4=[],zy5=[];
function setAccumaData(name,curcel){
fn1="",fn2="",fn3="",fn4="",fn5="";
fn.splice(0,fn.length);
zy1.splice(0,zy1.length);
zy2.splice(0,zy2.length);
zy3.splice(0,zy3.length);
zy4.splice(0,zy4.length);
zy5.splice(0,zy5.length);
require.config({
paths: {
'echarts':'/javascript'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line' // 使用折线图就加载line模块
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById(name+curcel));
myChart.showLoading({
text : "loading...",
effect : "bar",
textStyle : {
fontSize : 20
}
});
jQuery.getJSON(sinosoft.base + '/shop/fund_compare!profit.action',
{'productCode':obj,'type':curcel},
function(data) {
var hx = [];
var num = 0;
var maxMap = data.value;
for(var maxKey in maxMap){
fn.push(maxKey);//基金名称
num++;
hx.splice(0, hx.length);
if(num==1){
var minMap = maxMap[maxKey];
for(var minKey in minMap){
hx.push(minKey);
zy1.push(minMap[minKey]);
}
}
if(num==2){
var minMap = maxMap[maxKey];
for(var minKey in minMap){
hx.push(minKey);
zy2.push(minMap[minKey]);
}
}
if(num==3){
var minMap = maxMap[maxKey];
for(var minKey in minMap){
hx.push(minKey);
zy3.push(minMap[minKey]);
}
}
if(num==4){
var minMap = maxMap[maxKey];
for(var minKey in minMap){
hx.push(minKey);
zy4.push(minMap[minKey]);
}
}
if(num==5){
var minMap = maxMap[maxKey];
for(var minKey in minMap){
hx.push(minKey);
zy5.push(minMap[minKey]);
}
}
}
for(var i = 0; i < fn.length; i++){
if(i==0) fn1 = fn[i];
if(i==1) fn2 = fn[i];
if(i==2) fn3 = fn[i];
if(i==3) fn4 = fn[i];
if(i==4) fn5 = fn[i];
}
option = {
tooltip : {
trigger: 'axis',
axisPointer:{
type : 'line',
lineStyle : {
color: '#b3b3b3',
width: 1,
type: 'solid'
},
shadowStyle : {
size: 'auto',
color: 'red'
}
},
itemStyle: {
normal: {
lineStyle : {
color: '#dfc199',
width: 2,
type: 'solid'
},
color: '#dfc199'
},
emphasis: {
lineStyle : {
color: 'red',
width: 2,
type: 'solid'
},
color: 'red'
}
}
},
legend: {
// orient : 'vertical',
x : 'right',
data:fn
},
calculable : true,
xAxis : [
{
type: 'category',
axisLine :false,
data:hx
}
],
yAxis : [
{
type: 'value',
axisLine :false
}
],
series : [
{
name:fn1,
type:'line',
data:zy1
},
{
name:fn2,
type:'line',
data:zy2
},
{
name:fn3,
type:'line',
data:zy3
},
{
name:fn4,
type:'line',
data:zy4
},
{
name:fn5,
type:'line',
data:zy5
}
]
};
// 为echarts对象加载数据
myChart.setTheme({
line: {
smooth : true,
symbol: 'emptyCircle', // 拐点图形类型
symbolSize: 0 // 拐点图形大小
}
});
myChart.hideLoading();
myChart.setOption(option);
});
}
);
}
浙公网安备 33010602011771号