VUE/使用echarts格式化浮窗自定義按鈕及事件
阿新 • • 發佈:2018-12-05
注意看這一段程式碼
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讀蹇心翟贓臼試技錫迅嗚霓懸璧'}, ] } ] } ] })