echarts 模板代码(通用逻辑等)

柔情只为你懂 2021-07-25 00:55 503阅读 0赞

<template>
       <div class='s-c'>
         <div class='s-chart' ref='map'>
           
         </div>
       </div>
    </template>
    
    <script>
    
    
    export default { 
      name:'trender',
      data(){ 
        return{ 
          myMap:null,
          data:[]
        }
      },
      mounted()
      { 
          this._initChart();
          this._getData();
          window.onresize=this._resize;
          //第一次适配调用
          this._resize();
      },
      destroyed()
      { 
          window.removeEventListener('resize',this._resize);
      },
      methods:{ 
      	  //第一次配置样式
          _initChart()
          { 
              this.myMap=this.$echarts.init(this.$refs.map);
              const option={ 
    
              };
              this.myMap.setOption(option);
          },
          //获取数据
          async _getData()
          { 
    
              this._updateChart();
          },
          //第二次配置数据
          _updateChart()
          { 
              const option={ 
    
              };
              this.myMap.setOption(option);
          },
          //适配监听
          _resize()
          { 
              let container = this.$refs.map.offsetWidth;
              
              const option={ 
    
              };
    
              this.myMap.setOption(option);
              this.myMap.resize();
          }
      }
    
    }
    </script>
    
    <style lang='less' scoped>
    .s-c{ 
        width: 100%;
        height:100%;
        .s-chart{ 
          width: 100%;
          height:100%;
        }
    }
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，503人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android社交类APP动态详情代码实现通用模板

Android社交类APP动态详情代码实现通用模板 Android平台上一些比较流行的社交类APP比如微信、陌陌等，都有动态详情页，在该页面，用户发表的动态详情

た入场券/ 2023年10月16日 22:17/ 0 赞/ 6 阅读

相关收藏~通用系统测试计划模板(附参考模板)

以下以一常用的软件测试计划模板为例，介绍了如何制订好一份测试计划。用于软件评测第一阶段，业务系统使用时需根据实际情况来适当增删，以及风险管理应对方案。这里主要分为以下部

本是古典何须时尚/ 2023年10月13日 23:18/ 0 赞/ 129 阅读

相关代码逻辑整理

构建神经网络 1. 输入函数 get\_inputs() user相关：uid， user\_gender，user\_age，user\_job

小灰灰/ 2023年01月01日 01:58/ 0 赞/ 124 阅读

相关 makefile通用模板

makefile通用模板结合自己编译redis测试代码的过程，总结出一个makefile模板，以下makefile是以redis的测试代码为例进行验证的（请见我另

妖狐艹你老母/ 2022年03月18日 13:06/ 0 赞/ 238 阅读

相关 JDBC通用代码

一、在IDEA中新建一个空project工程项目 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

曾经终败给现在/ 2022年02月15日 11:46/ 0 赞/ 252 阅读

相关 idea中添加模板，提高代码的编写速度，引用通用代码

添加模板 1. 进入settings ![在这里插入图片描述][20190702200959907.png] 2. 搜索Live Templates

「爱情、让人受尽委屈。」/ 2021年12月18日 06:29/ 0 赞/ 443 阅读

相关 unity中通用单例模板

Singleton<T> using System; using System.Reflection; namespace LJFramework

Myth丶恋晨/ 2021年09月17日 23:14/ 0 赞/ 257 阅读

相关 echarts 模板代码(通用逻辑等)

<template> <div class='s-c'> <div class='s-chart' ref='map'>

柔情只为你懂/ 2021年07月25日 00:55/ 0 赞/ 504 阅读

相关 echarts 通用配置title

title:{ text:'标题显示', textStyle:{ 标题样式 color:'red'

绝地灬酷狼/ 2021年07月24日 18:50/ 0 赞/ 474 阅读

相关 echarts 通用配置提示组件tooltip

提示框组件，鼠标移动到图会显示内容 tooltip: { show:true, 是否显示提示框组件,默认显示

蔚落/ 2021年07月24日 15:14/ 0 赞/ 573 阅读