Ehcarts+Vue+ElementUI进阶使用笔记

Ehcarts可以实现很多炫酷的数据可视化效果，但是当需求变得复杂时，例如需要结合Vue和Element的各种组件一起使用时，难度会指数上升。
今天到了一个很有意思的案例：
需求：使用Element的el-tabs标签页，但是具体会有多少标签页不确定，要根据后台传来的数据量动态渲染，在每一个标签页里，要渲染两个echarts树形图。
难点：1、动态渲染出若干个el-tab-pane；2、为一个标签绑定一个点击事件，使得点击对应标签时，可以渲染出当前标签对应的echarts；3、由于直到数据传到之前都不确定有多少标签页，也不知道有多少echarts要渲染，必须动态生成div并为每一个div动态绑定id

解决方案：
1、在created中进行数据检索，获得数据表；
2、获得数据表后，对el-tab-pane进行v-for循环；
3、根据v-for中item的主键动态生成div的主键，这里采用如下方式：

<!--标签-->
<div v-show="show01" :id="gernerateId('left' + '0')">
</div>

// js
gernerateId: function(index) {
     
      return index
    },

这里之所以使用函数而不是直接绑定，是为了应付id更加复杂、需要处理的情形
4、在渲染函数里传入参数，完成渲染

getChart(data) {
     
      const echarts = require('echarts')
      const myChart = echarts.init(document.getElementById(data + '1'))
      myChart.setOption(this.option, true)
      myChart.resize()
    },

5、为了避免加载不成功，使用this.$nextTick执行

this.$nextTick(() => {
     
              this.getChart(data)
            })

6、el-tabs使用小记
可能会遇到需要适配页面高度动态设定el-tabs整体高度的情况，但是element并没有为这个组件显式提供可修改的属性，这里我们就通过一些比较暴力的css手法实现动态设置高度的效果
01、为el-tabs套一个div，并使其class=‘wdd’。（必须是wdd，渲染以后自动生成的类名也是这个）
02、在style标签对中添加如下代码：

.wdd, .el-tabs--left, .el-tabs__header.is-left{
     
    height: 93%;
  }

7、为Y轴添加单位：

yAxis: {
     
          type: 'value',
          name: '%'
        },

8、个人认为比较好看的线条配色

itemStyle: {
     
              normal: {
     
                lineStyle: {
     
                  color: {
     

                    type: 'linear',

                    x: 0,

                    y: 0,

                    x2: 1,

                    y2: 0,

                    colorStops: [{
     

                      offset: 0, color: '#4C84FF' // 0% 处的颜色

                    }, {
     

                      offset: 1, color: '#F07AAD' // 100% 处的颜色

                    }],

                    globalCoord: false // 缺省为 false

                  },
                  width: 2,
                  opacity: 0.2
                }
              }
            },