vue tab切换本日，本月，本周数据以及 click点击执行多次的问题

最新推荐文章于 2024-05-22 17:41:37 发布

一只害虫

最新推荐文章于 2024-05-22 17:41:37 发布

阅读量471

点赞数

本文链接：https://blog.csdn.net/qq_35363709/article/details/104650516

版权

HTML部分：

<html>
   <head>
       <meta charset="utf-8">
       <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
       <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
       <script src="echarts.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="echarts-gl.min.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <style type="text/css">
       * {
           margin: 0;
           padding: 0;
       }

       .box {
           width: 300px;
           height: 300px;
           border: 1px solid #ccc;
           margin: 10px auto;
       }

       ul {
           height: 30px;
           line-height: 30px;
       }

       li {
           list-style: none;
           float: left;
           margin: 0 5px;
           cursor: pointer;
           text-align: right;
       }

       li.active {
           color: red;
       }

       #myChart1 {
           width: 300px;
           height: 270px;
           background: pink;
       }
   </style>
   <body>
       <div id="app">
           <div class="box">
               <ul>
                   <li v-for="(item, index) in tabs" :key='index' :class="{ active: num == index }" @click="table(index)">{{ item }}</li>
               </ul>
               <div ref="myChart1" id="myChart1"></div>
           </div>
       </div>

js部分：

new Vue({
               el: '#app',
               data: {
                   num: 0,
                   tabs: ['本日', '本周', '本月'],
                   newData: [
                       [
                           { value: 335, name: '危险源' },
                           { value: 310, name: '学校' },
                           { value: 234, name: '道路' },
                           { value: 135, name: '主要景点' },
                           { value: 1548, name: '铁路' },
                           { value: 1548, name: '重要目标' }
                       ],
                       [
                           { value: 335, name: '危险源1' },
                           { value: 310, name: '学校2' },
                           { value: 234, name: '道路3' },
                           { value: 135, name: '主要景点4' },
                           { value: 1548, name: '铁路5' },
                           { value: 1548, name: '重要目标6' }
                       ],
                       [
                           { value: 335, name: '危险源11' },
                           { value: 310, name: '学校22' },
                           { value: 234, name: '道路33' },
                           { value: 135, name: '主要景点44' },
                           { value: 1548, name: '铁路55' },
                           { value: 1548, name: '重要目标66' }
                       ]
                   ],
                   datas:[
                       ['危险源', '学校', '道路', '主要景点', '铁路', '重要目标'],
                       ['危险源1', '学校2', '道路3', '主要景点4', '铁路5', '重要目标6'],
                       ['危险源11', '学校22', '道路33', '主要景点44', '铁路55', '重要目标66'],
                   ]
               },
               methods: {
                   table(index,datas) {
                       debugger
                       this.num = index;
                       this.downSelect(this.newData[index],this.datas[index])
                   },
                   downSelect(newData,datas) {
                       debugger
                       // 基于准备好的dom，初始化echarts实例
                       var myChart1 = echarts.init(document.getElementById('myChart1'));

myChart1.off('click') // 这里很重要！！！
                       myChart1.setOption({
                           tooltip: {
                               trigger: 'item',
                               formatter: '{a} <br/>{b} : {c} ({d}%)'
                           },
                           color: ['rgba(234,234,38,.7)', 'rgba(144,107,249,.7)', 'rgba(254,86,86,.7)', 'rgba(1,225,126,.7)', 'rgba(61,209,249,.7)', 'rgba(255,173,5,.7)'],
                           legend: {
                               left: 'center',
                               top: window.innerHeight * 0.01,
                               data:datas,
                               textStyle: {
                               color: '#ffffff',
                               fontSize: 10,
                               }
                           },
                           series: [
                               {
                                   name: '影响个数',
                                   type: 'pie',
                                   radius: '50%',
                                   center: ['50%', '45%'],
                                   data: newData,
                                   emphasis: {
                                       itemStyle: {
                                           shadowBlur: 10,
                                           shadowOffsetX: 0,
                                           shadowColor: 'rgba(0, 0, 0, 0.5)'
                                       }
                                   }
                               }
                           ]
                       });

myChart1.on('click', function(params) {
                           console.log('paramssss', params);
                       });
                   }
               },
               mounted() {
                   this.downSelect(this.newData[0],this.datas[0])
               }
           })

myChart1.off('click') // 这里很重要！！！可以移除多次点击执行的问题

一只害虫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue tab切换本日，本月，本周数据以及 click点击执行多次的问题

HTML部分：<html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="jquery.min.js" type="text/javascrip...
复制链接

扫一扫