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
                }
              }
            },