美团实习总结一--Echarts看板总结


策略看板总结

(一)基础

  1. js的native和prevent
  • .native: 原生js的绑定系统事件,vue中绑定按键事件 @keyup.enter.native
  • .prevent: @submit.native.prevent 阻止默认提交
  1. 空对象补足,补充key:null,先拿到allkeys,key数组,在空对象中添加key和value

  2. 数据格式转换,infoMap

    对象数组中,相同key的值进行合并。

  3. async await

    异步执行,先执行async中的部分,await部分异步(请求到结果再返回)

  4. 请求方法request

  5. 样式布局 display:block,按组件划分,高度别写死,多使用margin-top,margin-bottom

  6. json处理

  • JSON.stringify(myJson); json转为对象格式;
  • JSON.parse(myObj); 对象转为json格式;

  1. # (二)vue知识
  2. vuex使用

  • store:在main.js中引用store.js,加入到根vue中;
  • state成员函数(变量)定义;
  • mutation相当于method,使用处 this.$store.commit(‘函数名’,’变量‘)进行保存;
  • action:处理异步,可以封装commit
    method1Action 。。。 commit(); 优点是mutation是同步操作,不能进行其中的变量追踪,action默认为一个primise,执行异步;
  • module:多个store划分管理;
  1. watch钩子使用–三种
  • 变量名:直接加方法名 city: ’fun1‘;city变化时才执行fun1;
  • immediate: true 立即执行handler方法
  • deep: true 监听对象的变化
  1. nextick原理和使用
  • this.$nextick(()=> {}) (异步)

  • vue.nextick 是获取到Dom对象进行操作,一般用于从后台获取数据后,进行DOM更新(如项目中用于更新echart渲染的图表)

  • this.nextick则绑定到了当前环境下的DOM实例

  • 使用:在mounted或method中执行,更新DOM,若用于created,在DOM渲染完之后,才能获取DOM值

    (三)element组件

    1、el-input

  • :maxlength=”2” 限制输入的最大长度为2(两个数字)注意:el-input-number 对maxlength属性无效(该组件有max,min)

  • 或者用原生js方法

  • 校验:@blur=“method1” 输入框失去焦点时执行method1 ,报错:this.$message.error(‘数据格式错误’);(el组件)

    2、el-button

  • plain:空心形式, size=”mini”

  • type=”primary”

  • @click=”method2” 绑定事件

    3、el-select el-option

    el-select

  • v-model=”selected” 绑定选中的值

  • filterable 支持输入搜索

  • :plaecholder=”请选择”

  • @change=”chooseMethod” 事件绑定在el-select上

el-option

  • < v-for=”item in options” :key=”item.value” :label=”item.label” :value=”item.value” >

  • {label:’选项一’, value: ‘1’ } label是显示的选项,key以value来确定每一个唯一

    4、el-date-picker

  • type=”date”,datetime, daterange 时间选择分别为“某天,某天具体到分,日期范围”

  • v-model=”toDate” toDate是日期数组,使用时须转为20200701格式

  • range-separator=”-“ start-placeholder=”开始日期” end-placeholder=”结束日期”>

    5、el-radio

  • 注:radiosList是一个对象数组,oneRadio是一个数字或字符,绑定的是 :label 的内容

  • 按钮形式:

选项一
x

6、el-form

  • el-form表单绑定form所有的数据,可放置多个控件 input,select等,



7、el-card

  • 卡片式展示,可实现阴影效果;


  • 8、el-upload

  • action=”https://jsonplaceholder.typicode.com/posts/" 上传位置,post方式

  • :limit=”3” 数量限制

  • on-success=”m1”

  • on-remove=”m2”

  • on-preview=”m3” 图片放大预览

image.png
,m3里 得到imgUrl

  • list-type=”picture-card/picture”展示类型:卡片或直接图片

    9、el-table

  • 用法与原理:

table按行展示数据,多行展示可以在tableData中n个对象–>n行
或: 数组v-for形式,每个el-table-column的prop与tableData中对应,如0303,0304

<el-table-column
v-for=”(item index) in tableHead”
:prop=”item”
:label=”item” //表头展示内容
:key=”index” >



tableData格式:【{0303: []; 0304: []; },{0303: []; 0304: [];}】是一个对象数组,

(四)echarts组件

  1. 主要用法:设置chartX和series
  • chartX值:从接口数据中读取,chartX = Object.keys(result);
  • series = [{name,data,type}] 数组,处理后的result push进数组;其中name为图例,data数组,type为line或bar;
  1. 读取接口数据,设置chartX,添加series–>chartInit
  • request中包含的请求参数,通过 async fun1 –> try{ await result=this.$service.接口名(request)}–>catch(err){} –>finally{}
  1. 图表渲染
  • setTooltip(提示词中的formatter,修改提示顺序,样式等),
  • setLegendOption,title,
  • setyAxis(formatter中 小数->百分比)
  1. tooltip提示词修改,排序
  2. 图例顺序修改
  3. 个人思考:大数据量情况下,echarts会不会慢?如何优化?

查阅资料,使用echarts中的datazoom方式。

  1. 如果不使用monitorChart,自己是否可以渲染图表?

    原本echarts组件所有设置均在option中,monitorChart对echarts的封装,完成配置项即可。

    (五)体会&思考

    1、组件化封装和使用

  • 单独功能划分为组件,保证组件内功能单一,不会影响其他功能;

  • 封装现有组件进行使用,修改配置项,如monitorCharts组件,对title,chartX,legend,tooltip,type等方面都涉及到;使用时查看组件如何封装、之前如何使用,或”echarts官网–>配置项”都能找到相关设置;

    2、通过接口获取数据,进行处理

  • 对接口的封装,理解接口封装的原理,使用request进行请求数据。

  • 后端数据如何处理,转换成自己所需要的格式,进行合理变换,再进行渲染,这一步很重要。


  • 个人思考:大数据量情况下,echarts会不会慢?如何优化?

  • 如果不使用monitorChart,自己是否可以渲染图表

    3、项目整体构思,实现思路

    (1)流程图

    image.png

    (2)策略看板–图表相关实现

    实现思路:
    image.png

(3)所遇难点及解决

难点 原因及解决
1、小数–>百分比保留两位小数
问题:Math.floor(num * 10000) /100 不起效果
已解决:(num *100).toFixed(2) ;
2、图例显示顺序
要求固定图例顺序及相应颜色
已解决: 在series中给初始值
缺点:通用性不好,不易扩展
3、城市监听问题,二级监听中一直晚一步 原因:点击查询后才将城市日期发到vuex中,监听时会造成两次请求接口的参数不一样,导致一直晚一步。
解决:在第一个折线图中,初始化时dispatch,让vuex中有日期和城市,table中每次变化,第一个折线图就发到vuex

#### (4)后续思考
  • 执行效率

    从接口请求数据,转为echarts所需的series格式,然后将series和chartX渲染。在柱状图中,请求数据范围一般在7天到30天,渲染时间5秒以内。
    若大数据量,如上百天的情况,使用datazoom为宜,datazoom是echarts自带缩放属性,可拖动x轴坐标的范围,只显示用户选择的数据,方法较好。

  • 如何优化

    一是echart渲染问题,使用datazoom;<br />     二是代码复用方面,三个chart中部分代码是相似的,如chartInit,请求接口等,可进行设定方法参数进行抽取; 缺点是后期扩展不便,可能需要对数据进行其他处理,或增加功能。<br />