使用下拉选择器切换echarts图

最新推荐文章于 2024-05-09 15:43:02 发布

瑰

最新推荐文章于 2024-05-09 15:43:02 发布

阅读量1.9k

点赞数 2

分类专栏： Echarts 文章标签：下拉选择器切换echarts图 select切换echarts

本文链接：https://blog.csdn.net/lovexiuwei/article/details/117415790

版权

Echarts 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

默认选中第一个选项

1. 页面使用选择器

<el-select size="small" class="drop_down_list color_search" v-model="value"
             @change="searchSelect(value)" title="请选择饲喂模式">
      <template v-for="item in feedingStrategyMajor">
           <el-option
             :key="item.type"
             :value="item.type"
             :label="item.title">
           </el-option>
      </template>
</el-select>

        data() {
            return {
                
                value: 1,
                majorType: 1,
                feedingStrategyMajor: [], //存后台获取的数据
            }
        },

2.事件

            //获取选择器数据
            searchSelect(majorType) {
                this.majorType = majorType;

                this.$refs.mychild.getAllCurves(0, "", majorType); //我调用的组件里面的事件
            },

this.$refs.mychild.getAllCurves(0, "", majorType); //我调用的组件里面的方法,这里就是调用的获取曲线数据的方法

例: 获取曲线数据 -- 这里是组件里的事件

            //获取曲线所有数据
            getAllCurves(index, paramsName,majorType) {
                this.indexComponent = index;
                if (index != this.getAllCurvesIndex){
                    this.getAllCurvesIndex = 0
                }
                if (majorType != undefined){
                    this.majorType = majorType;
                }
                this.getAllCurvesIndex = index;
                polylineData('get', {
                    majorType: this.majorType
                }).then(res => {
                    const seriesArr = [];
                    const waterData = [];
                    const feedData = [];
                    if (res.code == 200) {
                        //获取全部折线数据
                        this.feedTitle = res.data.userFeedingCurves;
                        ......................省略