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

  • Post author:
  • Post category:vue

注意看这一段代码

 

 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读蹇心翟赃臼试技锡迅呜霓悬璧'},
                  ]
                }


              ]

            }
          ]
        })

 


版权声明:本文为qq_39313596原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。