Echarts，多个点击切换/阴影/多折线图

页面代码：

<div>
	<div
		// 动态class判断div的是否有数据（有数据点击状态样式，有数据不点击状态样式，无数据样式）
		:class="(lifeSign.bloodPressure.length > 0) ? (lifeSign.bloodPressureIsActive ? 'active' : 'normal') : 'none'"
        class="pd-left-10"
        // 如果后台返回的数组有值就触发lineCharts()方法 判断显示哪个div下的折线图显示还有初始化折线图  下面都是如此
        @click="(lifeSign.bloodPressure.length > 0) ? lineCharts('bloodPressure') : ''">
        <el-col class="el-col-style">{{ 想要显示的值 }}</el-col>
        <el-col
          v-if="lifeSign.bloodPressure[lifeSign.bloodPressure.length-1] || lifeSign.bloodPressureBak[lifeSign.bloodPressureBak.length-1]"
          class="el-col-style">{{ 想要显示的值 }}</el-col>
    </div>
    <div
    	:class="(lifeSign.bloodSugar.length > 0) ? (lifeSign.bloodSugarIsActive ? 'active' : 'normal') : 'none'"
        class="pd-left-10"
	    @click="(lifeSign.bloodSugar.length > 0) ? lineCharts('bloodSugar') : ''">
	    <el-col class="el-col-style">{{ 想要显示的值 }}</el-col>
    </div>
    <div
    	:class="(lifeSign.bodyMassIndex.length > 0 ) ? (lifeSign.bodyMassIndexIsActive ? 'active' : 'normal') : 'none'"
        class="pd-left-10"
	    @click="(lifeSign.bodyMassIndex.length > 0 ) ? lineCharts('bodyMassIndex') : ''">
	    <el-col class="el-col-style">{{ 想要显示的值 }}</el-col>
    </div>
</div>
<div
      v-show="lifeSign.boxShow && (lifeSign.bodyMassIndex.length != 0 || lifeSign.bloodPressure.length != 0 || lifeSign.bloodSugar.length != 0)"
      id="myChartA"
      class="myChart-style">
    </div>

lineCharts()方法：

lineCharts (val) {
            let data = [] // 第一条折线的数据
            let dataBak = [] // 第二条折线的数据
            let name = [] // 第一条折线的名字
            let nameBak = [] // 第二条折线的名字
            let xdata = [] // x轴刻度
            if (val === 'bloodPressure') {
                data = 给第一条折线的数据赋值
                dataBak = 给第二条折线的数据赋值
                name = 给第一条折线的名字赋值
                nameBak = 给第二条折线的名字赋值
                // BMI折线图显示状态
                this.lifeSign.bodyMassIndexIsActive = false;
                // 血压折线图显示状态
                this.lifeSign.bloodPressureIsActive = true;
                // 血糖折线图显示状态
                this.lifeSign.bloodSugarIsActive = false;
            } else if (val === 'bloodSugar') {
            	// 如上
            } else {
            	// 如上
            }
            if (xdata.length === 0) {
                /* 动态传值xAxis data */
                for (var i = 0; i < data.length; i++) {
                    xdata.push('0' + (i + 1))
                }
            }
            let myChart = echarts.init(document.getElementById('myChartA'))
            let option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: '#eeeeee',
                    textStyle: {
                        fontSize: 12,
                        color: '#797979'
                    }
                },
                grid: {
                    x: 20,
                    y: 10,
                    x2: 15,
                    y2: 20,
                    width: 'auto',
                    height: '70%'
                },
                xAxis: {
                    type: 'category',
                    data: xdata,
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: { // 刻度线字体颜色设置
                        textStyle: {
                            color: '#797979'
                        }
                    },
                    axisLine: { // 刻度线颜色设置
                        lineStyle: {
                            color: '#CCCCCC'
                        }
                    }
                },
                yAxis: {
                    show: false,
                    type: 'value'
                },
                series: [{
                    name: name,
                    type: 'line', // 折线
                    data: data,
                    smooth: false, // true两点连接为平滑曲线 false为直线
                    symbol: 'circle',
                    symbolSize: 8, // 设定折线点的大小
                    animation: false, // false: hover圆点不缩放 .true:hover圆点默认缩放
                    lineStyle: { //  折线条的样式
                        normal: {
                            color: '#41A4FF',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    itemStyle: { // 折线拐点的样式
                        normal: {
                            color: '#1890FF'
                        },
                        emphasis: { // 鼠标经过时：
                            borderColor: 'white',
                            borderWidth: 2 // 拐点边框大小
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0.5, color: '#41A4FF' },
                                { offset: 1, color: '#eeeeee' }
                            ])
                        }
                    } // 阴影渲染颜色渐变样式
                }, {
                    name: nameBak,
                    type: 'line', // 为true是不支持虚线的，实线就用true
                    data: dataBak,
                    smooth: false, // true两点连接为平滑曲线 false为直线
                    symbol: 'circle', // 设定折线点的大小
                    symbolSize: 8, // false: hover圆点不缩放 .true:hover圆点默认缩放
                    animation: false,
                    lineStyle: { //  折线条的样式
                        normal: {
                            color: '#41A4FF',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    itemStyle: { // 折线拐点的样式
                        normal: {
                            color: '#1890FF'
                        },
                        emphasis: { // 鼠标经过时：
                            borderColor: 'white',
                            borderWidth: 2 // 拐点边框大小
                        }
                    },
                    areaStyle: { // 阴影渲染颜色渐变样式
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0.5, color: '#41A4FF' },
                                { offset: 1, color: '#eeeeee' }
                            ])
                        }
                    }
                }]
            }
            // echarts对象绑定配置选项
            myChart.setOption(option)
            // 宽度自适应
            window.onresize = function () {
                myChart.resize();
            }
        }

class样式：

.active {
          background: #D9F0FF;
          width: 73px;
          height: 36px;
          border-radius: 4px;
          margin-left: 8px;
        }
        .normal {
          width: 73px;
          height: 36px;
          border-radius: 4px;
          margin-left: 8px;
          background: #F8FAFB;
        }
        .none {
       	  // 鼠标悬浮样式 红色圈中一个斜线 表示不可点
          cursor: not-allowed;
          color: #888888;
          width: 73px;
          height: 36px;
          border-radius: 4px;
          margin-left: 8px;
          background: #F8FAFB;
        }

效果图：

最后：

作为一个新入行的小白，第一次写博客，需要学习的还有很多。这个虽然比较简单，但是还是要记下来，积少成多，砥砺前行！望各位大佬不吝赐教！！！