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

html：<div class="turangBox"><div class="backbg"><select name="status" id="tabs" class="selectGroup changeItem"><option>水温</option><option>浊度</option><optio

禾小毅

11716人浏览 · 2021-07-28 09:04:51

禾小毅 · 2021-07-28 09:04:51 发布

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

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

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

二、编写页面以及样式

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

<body>
    <div class="turangBox">
        <div class="backbg">
            <select name="status" id="tabs" class="selectGroup changeItem">
                <option>水温</option>
                <option>浊度</option>
                <option>酸碱度</option>
            </select>
        </div>
        <div id="content">
            <div id="shui0" class="turangNone turangActive">
                <div id="shu1" class="shuiwen"></div>
            </div>
            <div id="shui1" class="turangNone">
                <div id="shu2" class="shuiwen"></div>
            </div>
            <div id="shui2" class="turangNone">
                <div id="shu3" class="shuiwen"></div>
            </div>
        </div>
    </div>

    // 引入 echarts
    <script src="js/echarts.min.js"></script>
    <script src="js/publicEchart.js"></script>

    <script src="js/jquery.js"></script>
    // 水环境切换
    <script>
        (function () {
            $(function () {
                var li = $('#tabs');
                var cc = $('#tabs option');
                var len = cc.length;
                li.change(function () {
                    var t = parseInt(li.get(0).selectedIndex);
                    for (var i = 0; i < len; i++) { 
                        if (t==i) { $('#shui' + t).show(); 
                        } else { $('#shui' + i).hide();}
                    }
                });
            });
        })();
    </script>
</body>

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();
    });
    
})();

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