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
}
}
},
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/153544.html
