VUE/使用echarts格式化浮窗自定义按钮及事件
注意看这一段代码 mounted() { let that=this; window.detal = function () { that.$router.push({ path: "/traheader/accountInfo" //需要这样跳转 }) } }, ...
·
注意看这一段代码
mounted() {
let that=this;
window.detal = function () {
that.$router.push({
path: "/traheader/accountInfo" //需要这样跳转
})
}
},
<p><a href="javascript:void(0)" onclick="detal()" style="float: right;color: #d24b6a;margin-right: 10px;font-size: 16px">更多></a></p>
//onclick="detal()" 注意这里加事件需要这样写 用onclick 不能用@click
需要这样定义事件
export default {
mounted() {
let that=this;
window.detal = function () {
that.$router.push({
path: "/traheader/accountInfo" //需要这样跳转
})
}
},
// 绘制图表
myChart.setOption({
title: {
text: '资产总计:' + sum+"元",
x: 'right',
y: '90%'
},
tooltip: {
//enterable:true,//鼠标点击弹出tooltip提示框
trigger: 'item',
borderColor:'#00a1d6',//浮窗边框颜色
backgroundColor:'white',//浮窗背景颜色
borderWidth:1,//边框宽度
formatter: function(params){ //格式化浮窗显示
let data = params.data;
let str = '';
for(let i = 0; i <data.datas.length;i++){
str+='<tr class="tabtrcls">' +
'<td style="padding:1px 10px 4px 4px">'+data.datas[i].code+'</td>' +
'<td style="padding:1px 10px 4px 4px">'+data.datas[i].codeName+'</td>' +
'<td style="padding:1px 10px 4px 4px">'+data.datas[i].money+'</td>' +
'</tr>'
}
return '<div style="color: #00a1d6; background-color: white;border: 0;">' +
'<table style="text-align: center;">' +
'<tr>' +
'<th>产品代码</th>' +
'<th colspan="1">产品名称</th>' +
'<th colspan="1">产品金额</th>' +
'</tr>' +
str+
'</table><br/>' +
'<p><a href="javascript:void(0)" onclick="detal()" style="float: right;color: #d24b6a;margin-right: 10px;font-size: 16px">更多></a></p>' +
'</div>'
//onclick="detal()" 注意这里加事件需要这样写 用onclick 不能用@click
},
position: ['17%', '17%','17%','17%']//浮窗位置
},
series: [
{
name: '客户存款',
type: 'pie',
// radius: ['40%', '55%'],
label: {
normal: {
formatter: '{b|{b}:}{d}%',
fontSize: 20,
// backgroundColor: '#eee',
// borderColor: '#aaa',
// borderWidth: 1,
// borderRadius: 4,
rich: {
// a: {
// color: '#999',
// lineHeight: 15,
// align: 'center'
// },
// hr: {
// borderColor: '#aaa',
// width: '100%',
// borderWidth: 0.5,
// height: 0
// },
b: {
fontSize: 20,
lineHeight: 15
},
d:{
fontSize: 30,
lineHeight: 15
},
// per: {
// color: '#eee',
// backgroundColor: '#334455',
// padding: [2, 4],
// borderRadius: 2
// }
}
}
},
data: [
{value: this.holdFinanceSum.toFixed(2), name: '理财',datas:[
{money:1000000000.00,code:'YHFSP001SSSSS',codeName:'昙臼欠楷1453读蹇心翟赃臼试技锡迅呜霓悬璧'},
{money:7000000000.00,code:'YHFSP001SSSSS',codeName:'昙臼欠楷1453读蹇心翟赃臼试技锡迅呜霓悬璧'},
{money:1000000000.00,code:'YHFSP001SSSSS',codeName:'昙臼欠楷1453读蹇心翟赃臼试技锡迅呜霓悬璧'},
{money:1000000000.00,code:'YHFSP001SSSSS',codeName:'昙臼欠楷1453读蹇心翟赃臼试技锡迅呜霓悬璧'},
{money:1000000000.00,code:'YHFSP001SSSSS',codeName:'昙臼欠楷1453读蹇心翟赃臼试技锡迅呜霓悬璧'},
]
},
{value: this.holdFundSum.toFixed(2), name: '基金',datas:[
{money:1000000000.00,code:'YHFSP001SSSSS',codeName:'昙臼欠楷1453读蹇心翟赃臼试技锡迅呜霓悬璧'},
{money:7000000000.00,code:'YHFSP001SSSSS',codeName:'昙臼欠楷1453读蹇心翟赃臼试技锡迅呜霓悬璧'},
{money:1000000000.00,code:'YHFSP001SSSSS',codeName:'昙臼欠楷1453读蹇心翟赃臼试技锡迅呜霓悬璧'},
{money:1000000000.00,code:'YHFSP001SSSSS',codeName:'昙臼欠楷1453读蹇心翟赃臼试技锡迅呜霓悬璧'},
{money:1000000000.00,code:'YHFSP001SSSSS',codeName:'昙臼欠楷1453读蹇心翟赃臼试技锡迅呜霓悬璧'},
]
},
{value: this.dboSum.toFixed(2), name: '存款',
datas:[
{money:1000000000.00,code:'YHFSP001SSSSS',codeName:'昙臼欠楷1453读蹇心翟赃臼试技锡迅呜霓悬璧'},
{money:7000000000.00,code:'YHFSP001SSSSS',codeName:'昙臼欠楷1453读蹇心翟赃臼试技锡迅呜霓悬璧'},
{money:1000000000.00,code:'YHFSP001SSSSS',codeName:'昙臼欠楷1453读蹇心翟赃臼试技锡迅呜霓悬璧'},
{money:1000000000.00,code:'YHFSP001SSSSS',codeName:'昙臼欠楷1453读蹇心翟赃臼试技锡迅呜霓悬璧'},
{money:1000000000.00,code:'YHFSP001SSSSS',codeName:'昙臼欠楷1453读蹇心翟赃臼试技锡迅呜霓悬璧'},
]
}
]
}
]
})
更多推荐
已为社区贡献30条内容
所有评论(0)