【Echarts+Select下拉框】实现（同图表切换不同数据）的方法

一、需要下载 jquery.js和echarts.min.js 并引入html页面，版本不要求

echarts.js下载地址：https://echarts.baidu.com/download.html

jquery.js下载地址：Download jQuery | jQuery

二、编写页面以及样式

原生html：其中turangActive 的class属性，初始化选中状态

    

        

            
                水温
                浊度
                酸碱度
            
        
        

            

                

            
            

                

            
            

                

            
        
    

    // 引入 echarts
    
    

    
    // 水环境切换
    

css

.turangBox{
    width: 500px;
    padding: 20px;
    background: #13205a;
}
/* 下拉框 */
.changeItem {
    text-align: left;
    padding: 12px 200px;
    border: 1px solid #ACC6EB;
    margin-right: 50px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 24px;
}
.selectGroup {
    background: url('images/down.png') no-repeat 2.2rem center;
    padding-right: 0.375rem;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    /*去掉下拉箭头*/
    outline: 1px solid rgb(8, 47, 56);
}
.selectGroup option {
    height: 0.4375rem;
    line-height: 0.4375rem;
    background: rgba(0, 0, 0, 0);
    color: #000;
}
.selectGroup::-ms-expand {
    display: none;
}

/* echarts图表 */
#content .turangActive {
    display: block;
}
.turangNone {
    display: none;
}
.shuiwen {
    width: 500px;
    height: 400px;
}

三、编写 publicEchart.js 文件，并引入html页面

根据id名称找到对应标签，并渲染到页面上，注：id名所在的标签，必须要设置宽高

// 水环境图例
(function () {
    var tooltip = {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    };
    var grid = {
        top: 10,
        left: 5,
        right: 30,
        bottom: 5,
        containLabel: true
    };
    var xAxis = [
        {
            type: 'category',
            boundaryGap: false,
            data: ['11/9', '11/10', '11/11', '11/12'],
            axisLabel: {
                color: '#fff',
                fontSize: 18
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        }
    ];
    var yAxis = [
        {
            type: 'value',
            max: 1.0,
            min: 0,
            axisLabel: {
                color: '#fff',
                fontSize: 16
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            // 网格颜色
            splitLine: {
                lineStyle: {
                    color: '#00A0E9',
                    opacity: 0.5
                }
            }
        }
    ];
    // 水温
    var myChart1 = echarts.init(document.getElementById('shu1'));
    option1 = {
        tooltip: tooltip,
        grid: grid,
        xAxis: xAxis,
        yAxis: yAxis,
        series: [
            {
                name: '水温',
                smooth: true,
                type: 'line',
                stack: '总量',
                areaStyle: {},
                data: [0.1, 0.12, 0.01, 0.1]
            }
        ]
    };
    myChart1.setOption(option1);


    // 浊度
    var myChart2 = echarts.init(document.getElementById('shu2'));
    option2 = {
        tooltip: tooltip,
        grid: grid,
        xAxis: xAxis,
        yAxis: yAxis,
        series: [
            {
                name: '浊度',
                smooth: true,
                type: 'line',
                stack: '总量',
                areaStyle: {},
                data: [0.1, 0.12, 0.1, 0.1]
            }
        ]
    };
    myChart2.setOption(option2);


    //酸碱度
    var myChart3 = echarts.init(document.getElementById('shu3'));
    option3 = {
        tooltip: tooltip,
        grid: grid,
        xAxis: xAxis,
        yAxis: yAxis,
        series: [
            {
                name: '酸碱度',
                smooth: true,
                type: 'line',
                stack: '总量',
                areaStyle: {},
                data: [0.1, 0.12, 0.2, 0.1]
            }
        ]
    };
    myChart3.setOption(option3);

    // 3. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
    });
    
})();

     希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~