使用单选框radio切换echarts图,和lable绑定

最新推荐文章于 2023-05-08 11:39:50 发布

瑰

最新推荐文章于 2023-05-08 11:39:50 发布

阅读量643

点赞数 2

分类专栏： Echarts 文章标签：单选框切换echarts图 radio切换echarts图单选框切换和lable绑定

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

版权

Echarts 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

该博客主要展示了如何在Vue项目中利用模板和data属性创建一个动态折线图组件。页面包含一个可滚动区域，显示多个折线图选项，用户可以通过点击选择不同的折线图。折线图使用了ECharts库，数据来源于后台，包括'胖的水'和'胖的料'两个系列，同时配置了图例、网格和坐标轴等细节。

摘要由CSDN通过智能技术生成

默认选中第一个

1. 页面使用

<template>
    <div class="headerH">
        <div style="height: 15%;overflow: auto;">
            <template v-for="(curveTitle,index) in feedTitle">
                <input type="radio" name="check"
                       :value="curveTitle.feedingCurveTitle" :id=index
                       @click="getAllCurves(index)" :checked="index == getAllCurvesIndex"/>
                <label :for=index style="cursor:pointer">{{curveTitle.feedingCurveTitle}}
                    <i style="color: #ff5e03;margin-right: 8px">{{curveTitle.otherTypeTitle}}</i></label>
            </template>
        </div>
        <div style="height: 85%">
            <lineEcharts v-model="option" v-on:paramsName="echartsParams"></lineEcharts>
        </div>
    </div>
</template>

        data() {
            return {
                option: {},
                feedTitle: '', //存后台传过来的数据
                feedingCurveData: [],
                getAllCurvesIndex: 0,
                majorType: 1,
            };
        },

2. 折线数据

                        this.option = {
                            backgroundColor: "#fff",
                            tooltip: {
                                trigger: "axis",
                                show: true,
                            },
                            series: [{
                                name: "胖的水",
                                type: "line",
                                smooth: true,
                                symbol: "circle",
                                symbolSize: 13,
                                itemStyle: {
                                    color: "#fb7636",
                                    borderColor: "#fff",
                                    borderWidth: 2,
                                },
                                data: waterData,
                            }, {
                                name: "胖的料",
                                type: "line",
                                smooth: true,
                                symbol: "circle",
                                symbolSize: 13,
                                itemStyle: {
                                    color: "#24b314",
                                    borderColor: "#fff",
                                    borderWidth: 2,
                                },
                                data: feedData, //后台数据
                            }],
                            legend: {
                                show: true,
                                icon: "circle",
                                top: 20,
                                textStyle: {
                                    fontSize: 12,
                                    color: "#c8c8c8",
                                },
                            },
                            grid: {
                                left: "5%",
                                right: "5%",
                                top: "15%",
                                bottom: "6%",
                                containLabel: true,
                            },
                            xAxis: {
                                axisLine: {
                                    show: false,
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLabel: {
                                    interval: 0,
                                },
                                data: seriesArr, //后台数据
                            },
                            yAxis: {
                                axisLine: {
                                    show: false,
                                },
                                axisTick: {
                                    show: false,
                                },
                            },

                        };