1. 程式人生 > >VUE/使用echarts格式化浮窗自定義按鈕及事件

VUE/使用echarts格式化浮窗自定義按鈕及事件

注意看這一段程式碼

 

 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讀蹇心翟贓臼試技錫迅嗚霓懸璧'},
                  ]
                }


              ]

            }
          ]
        })