vue中的echarts图可根据关键词、月份范围进行搜索，还包含了简陋的带推荐搜索的输入框

前言

这次的小案例中包含了很多的bug，我只是提供了一种思路，如果大家有什么修改意见，可以留言，真的写的太简陋了，还有很多明显的bug因为时间原因，没能够去完善，实在抱歉

以下的代码是写在一个组件之中的，另外还需要elementUI的配合

• template代码

<template>
    <div class="chartWrap">
        <!-- 输入框 -->
        <el-autocomplete popper-class="my-autocomplete" v-model="state" :fetch-suggestions="querySearch"
            placeholder="请输入内容" @select="handleSelect" clearable>
            <i class="el-icon-search el-input__icon" slot="suffix" @click="handleIconClick">
            </i>
            <template slot-scope="{ item }">
                <div class="name">{{ item.name }}</div>
            </template>
        </el-autocomplete>
        <!-- 月份区间 -->
        <el-date-picker v-model="value1" type="monthrange" range-separator="至" start-placeholder="开始月份"
            end-placeholder="结束月份" class="monthChoose" @change="logMonth">
        </el-date-picker>
        <br>
        <!-- 带推荐搜索的输入框 -->
        <input type="text" :placeholder="getTip" @focus="stopIntro">
        <!-- 图表 -->
        <div id="chartBox"></div>
    </div>
</template>

• JS代码

import * as echarts from 'echarts';
export default {
    name: "searchChart",
    data() {
        return {
            value1: '11',
            title: "统计表",
            waterData: [50, 60, 80, 50],
            electric: [10, 18, 53, 21],
            xData: [1, 2, 3, 4],   // 这是初始的x轴的数据
            finalXData: [1, 2, 3, 4],  // 这是需要呈现的x轴数据，因为要保存原数据，所以不对初始的x轴数据进行操作
            totalData: [{
                name: "小明",
                waterData: [50, 40, 30, 50],
                electric: [10, 18, 53, 21],
            },
            {
                name: "小红",
                waterData: [30, 50, 80, 50],
                electric: [10, 28, 71, 21],
            },
            {
                name: "小刚",
                waterData: [43, 60, 85, 50],
                electric: [10, 42, 35, 21],
            },
            {
                name: "小强",
                waterData: [75, 60, 20, 50],
                electric: [10, 45, 24, 53],
            }
            ],
            state: "",
            intervalTip: ["这是推荐内容1", "可能你想看", "可能你更想看", "可能你有点想看"],
            getTip: '初始推荐内容',
            flag: true  // 控制搜索框内容是否变换

        }
    },
    methods: {
        consoleErr() {
            alert(1)
        },
        getChart(title, xData, waterData, electric) {
            let mChart = echarts.init(document.getElementById("chartBox"))
            mChart.setOption({
                title: { text: title },
                xAxis: {
                    type: "category",
                    data: xData
                },
                yAxis: [
                    {
                        name: "用水量",
                        type: "value",
                        axisLine: {
                            show: true,
                        },
                    }, {
                        name: "用电量",
                        type: 'value',
                        axisLine: {
                            show: true,
                        },
                        min: 0,
                        max: 200
                    }
                ],
                tooltip: {
                    show: true
                },
                series: [
                    {
                        data: waterData,
                        type: 'line',
                        smooth: true
                    }, {
                        data: electric,
                        type: 'line',
                        smooth: true
                    }
                ]
            })
        }, // 获取echarts图的方法
        // --------------------------------------------------------------------------
        // 文本框中的方法，是elementui中自己定义的方法，让建议内容出现在下拉框中
        querySearch(queryString, cb) {
            var totalData = this.totalData; // 声明变量承接获取的数据
            var results = queryString ? totalData.filter(this.createFilter(queryString)) : totalData;
            cb(results);   // 这个回调函数是elementui自身定义的，必须要使用它
        },
        createFilter(queryString) {
            return (totalData) => {
                return (totalData.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        // -------------------------------------------------------------------------------------------------------
        // 点击框中的选项
        handleSelect(item) {
            this.state = item.name
            let searchData = this.totalData.filter(r => {  // 过滤数组，返回符合条件的值
                return r.name == this.state
            })
            this.getChart(this.title, this.xData, searchData[0].waterData, searchData[0].electric)   // 获取相应的数据，更新到echarts图表中
        },
        // 点击输入框的搜索图标
        handleIconClick() {
            let searchData = this.totalData.filter(r => {  // 过滤数组，返回符合条件的值
                return r.name == this.state
            })
            this.getChart(this.title, this.xData, searchData[0].waterData, searchData[0].electric)   // 更新到图表中
        },
        // 月份选择框发生变化时，执行以下代码，   使用月份来获取数据，实际上就是改变x轴的范围。所以接下来是操作x轴的数据
        logMonth() {
            let startTime = Number((this.value1[0]).getMonth() + 1)   // 获得开始的月份
            let endTime = Number((this.value1[1]).getMonth() + 1)    // 获得结束的月份
            let newXdata = []  // 声明一个空数组，用于存放，开始的月份到结束的月份
            if ((this.value1[0]).getFullYear() == (this.value1[1]).getFullYear()) {  // 在同一年，只需要从开始的月份循环到结束的月份即可
                for (let i = startTime; i <= endTime; i++) {
                    newXdata.push(i)
                }
            } else {   // 不在同一年，从开始的月份循环到12月。再从1月循环到结束的月份，但是其中仍然存在很大的bug，比如如果跨了两年或以上，就不适用了
                for (let k = startTime; k <= 12; k++) {
                    newXdata.push(k)
                }
                for (let j = 1; j <= endTime; j++) {
                    newXdata.push(j)
                }
            }
            this.finalXData = newXdata
            this.getChart(this.title, this.filterMonth(this.finalXData), this.waterData, this.electric)  // 将变化过后的x轴数据传到图表中
        },
        // 模拟输入框里的推荐搜索
        getTips() {
            let index = 0;
            let timer;
            if (this.flag) {
                timer = setInterval(() => {
                    index == 3 ? index = 0 : index++
                    this.getTip = this.intervalTip[index]
                }, 2000);
            } else {
                clearInterval(timer)
            }

        },
        stopIntro() {  // 想要焦点聚集时，停止循环定时器，但是没能成功，原因应该是，这里的flag虽然改变了，但是没能触发更新,还望大佬指教
            console.log(1);
            this.flag = false
        },
        filterMonth(arr) { // 相当于一个过滤器，将x轴数据的数字转换为月份
            let newArr = arr.map((r, i, a) => {
                switch (r) {
                    case 1:
                        return a[i] = "一月份"
                    case 2:
                        return a[i] = "二月份"
                    case 3:
                        return a[i] = "三月份"
                    case 4:
                        return a[i] = "四月份"
                    case 5:
                        return a[i] = "五月份"
                    case 6:
                        return a[i] = "六月份"
                    case 7:
                        return a[i] = "七月份"
                    case 8:
                        return a[i] = "八月份"
                    case 9:
                        return a[i] = "九月份"
                    case 10:
                        return a[i] = "十月份"
                    case 11:
                        return a[i] = "十一月份"
                    case 12:
                        return a[i] = "十二月份"
                }
            })
            return newArr
        }
    },
    mounted() {
        this.getChart(this.title, this.filterMonth(this.finalXData), this.waterData, this.electric)
        this.getTips()
    },
}

• css样式

<style lang="scss" scoped>
#chartBox {
    width: 800px;
    height: 600px;
    border: 1px solid;
}

.my-autocomplete {
    li {
        line-height: normal;
        padding: 7px;

        .name {
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .addr {
            font-size: 12px;
            color: #b4b4b4;
        }

        .highlighted .addr {
            color: #ddd;
        }
    }
}

.monthChoose {
    &::v-deep .el-range-separator {
        width: 24px;
    }
}
</style>

bug总结

1. 首先有个很明显的bug，自动切换推荐搜索的输入框，在focus时，不能够停止切换，我的做法估计有很大问题，希望指正
2. 数据格式存在很大问题，月份应该要与每个月的数据绑定在一起，否则通过月份范围进行搜索时，数据永远都会显示在前面，如果想案例更加完善，那么要对数据进行一个处理，不过有点怕麻烦，后面就没有修改了
3. 根据月份范围进行展示数据也存在很大的问题，我的思路是，要通过月份来展示数据，那么就是控制x轴上的数据。所以只要将开始月份一直到结束月份都展示在x轴上即可，但是其中存在的问题就是，如果开始月份和结束月份存在年份上的差异怎么办，案例中我只做了存在一年差异的解决方法，存在多年差异的解决方法还没有写出来，另外我觉得我的思路还是存在一定的问题的，希望多多提出意见。