vue select下来选择echarts图表

最新推荐文章于 2023-11-14 11:12:14 发布
最新推荐文章于 2023-11-14 11:12:14 发布
阅读量2k 收藏 8
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35363709/article/details/105435916
版权

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="echarts.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="echarts-gl.min.js" type="text/javascript" charset="utf-8"></script>

     //为本地文件，自行下载使用，否则报错
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    </head>
    <body>
        <div id="app">
            <h3>{{ Title }}</h3>
            <el-select v-model="value" placeholder="主要景点" @change="onchange">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <div ref="myChart3" id="myChart3" style="height:500px;width:500px;background-color: pink;"></div>
        </div>
    </body>
</html>

 

js：

<script>
    new Vue({
        el: '#app',

      //此处注意没用vue-cli，所以没有return，如果用脚手架自行加上return
        data: {
                Title: 'echarts实现下拉框选值',
                value: '',
                datas: [
                    [
                        [100, 50, 90, 10, 49]
                    ],
                    [
                        [90, 60, 80, 35, 70]
                    ],
                    [
                        [80, 70, 100, 41, 80]
                    ],
                    [
                        [70, 80, 60, 62, 70]
                    ],
                    [
                        [60, 90, 50, 75, 46]
                    ],
                    [
                        [50, 100, 30, 55, 42]
                    ],
                ],
                seltValue: [
                    [{
                        name: '外滩',
                        max: 300
                    }, {
                        name: '东方明珠',
                        max: 300
                    }, {
                        name: '老城隍庙',
                        max: 300
                    }, {
                        name: '田子坊',
                        max: 300
                    }, {
                        name: '海洋馆',
                        max: 300
                    }],
                    [{
                        name: '第一小学',
                        max: 300
                    }, {
                        name: '第二小学',
                        max: 300
                    }, {
                        name: '第三小学',
                        max: 300
                    }, {
                        name: '第四小学',
                        max: 300
                    }, {
                        name: '第五小学',
                        max: 300
                    }],
                    [{
                        name: '第一道路',
                        max: 300
                    }, {
                        name: '第二道路',
                        max: 300
                    }, {
                        name: '第三道路',
                        max: 300
                    }, {
                        name: '第四道路',
                        max: 300
                    }, {
                        name: '第五道路',
                        max: 300
                    }],
                    [{
                        name: '第一铁路',
                        max: 300
                    }, {
                        name: '第二铁路',
                        max: 300
                    }, {
                        name: '第三铁路',
                        max: 300
                    }, {
                        name: '第四铁路',
                        max: 300
                    }, {
                        name: '第五铁路',
                        max: 300
                    }],
                    [{
                        name: '第一危险源',
                        max: 300
                    }, {
                        name: '第二危险源',
                        max: 300
                    }, {
                        name: '第三危险源',
                        max: 300
                    }, {
                        name: '第四危险源',
                        max: 300
                    }, {
                        name: '第五危险源',
                        max: 300
                    }],
                    [{
                        name: '第一重要目标',
                        max: 300
                    }, {
                        name: '第二重要目标',
                        max: 300
                    }, {
                        name: '第三重要目标',
                        max: 300
                    }, {
                        name: '第四重要目标',
                        max: 300
                    }, {
                        name: '第五重要目标',
                        max: 300
                    }]
                ],
                options: [{
                        value: '0',
                        label: '主要景点'
                    },
                    {
                        value: '1',
                        label: '学校'
                    },
                    {
                        value: '2',
                        label: '道路'
                    },
                    {
                        value: '3',
                        label: '地铁'
                    },
                    {
                        value: '4',
                        label: '危险源'
                    },
                    {
                        value: '5',
                        label: '重要目标'
                    }
                ]
        },
        methods: {
            onchange(value) {
                console.log("value", value)
                this.datas.map((item, index) => {
                    if (index == value) {
                        console.log('item', item)
                        console.log('index', index)
                        this.downSelect(this.seltValue[index], item);
                    }
                })
            },
            downSelect(seltValue, datas) {
                // 基于准备好的dom，初始化echarts实例
                // let myChart3 = this.$echarts.init(this.$refs.myChart3);
                let myChart3 = echarts.init(document.getElementById('myChart3'));  
                var lineStyle = {
                    normal: {
                        width: 1,
                        opacity: 0.5
                    }
                };
                // 绘制图表
                myChart3.setOption({
                    color: [],
                    tooltip: {},
                    radar: {
                        radius: '50%',
                        center: ['50%', '45%'],
                        indicator: seltValue,
                        splitNumber: 1,
                        name: {
                            textStyle: {
                                color: '#ffffff',
                                fontSize: '110%'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#2b5a6a',
                                opacity: 0.5
                            }
                        },
                        splitArea: {
                            show: true,
                            areaStyle: {
                                color: '#2b5a6a',
                                opacity: 0.1
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#2b5a6a',
                                opacity: 0.5
                            }
                        }
                    },
                    series: [{
                            name: '雷达线ALL',
                            type: 'radar',
                            silent: true,
                            lineStyle: {
                                normal: {
                                    type: 'solid',
                                    color: '#2b5a6a',
                                    width: 0.5,
                                    opacity: 1
                                }
                            },
                            data: [
                                [300, 300, 300, 300, 300]
                            ],

                            itemStyle: {
                                normal: {
                                    opacity: 0
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: '#0d6dba',
                                    opacity: 0.1
                                }
                            }
                        },
                        {
                            name: '雷达线2',
                            type: 'radar',
                            silent: true,
                            lineStyle: {
                                normal: {
                                    type: 'solid',
                                    color: '#2b5a6a',
                                    width: 0.5,
                                    opacity: 1
                                }
                            },
                            data: [
                                [250, 250, 250, 250, 250]
                            ],

                            itemStyle: {
                                normal: {
                                    opacity: 0
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: 'rgba(0,0,0,0)',
                                    opacity: 0.1
                                }
                            }
                        },
                        {
                            name: '雷达线3',
                            type: 'radar',
                            silent: true,
                            lineStyle: {
                                normal: {
                                    type: 'solid',
                                    color: '#2b5a6a',
                                    width: 0.5,
                                    opacity: 1
                                }
                            },
                            data: [
                                [200, 200, 200, 200, 200]
                            ],

                            itemStyle: {
                                normal: {
                                    opacity: 0
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: 'rgba(0,0,0,0)',
                                    opacity: 0.1
                                }
                            }
                        },
                        {
                            name: '雷达线4',
                            type: 'radar',
                            silent: true,
                            lineStyle: {
                                normal: {
                                    type: 'solid',
                                    color: '#2b5a6a',
                                    width: 0.5,
                                    opacity: 1
                                }
                            },
                            data: [
                                [150, 150, 150, 150, 150]
                            ],

                            itemStyle: {
                                normal: {
                                    opacity: 0
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: '#103d64',
                                    opacity: 0.1
                                }
                            }
                        },

                        {
                            name: '震中周边项目数(个)',
                            type: 'radar',
                            lineStyle: lineStyle,
                            data: datas,
                            symbolSize: 4,
                            itemStyle: {
                                normal: {
                                    borderColor: '#59aac8',
                                    borderWidth: 2
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: '#14456e',
                                    opacity: 0.5
                                }
                            }
                        },
                        {
                            name: '雷达线',
                            type: 'radar',
                            silent: true,
                            lineStyle: {
                                normal: {
                                    type: 'dotted',
                                    width: 4,
                                    opacity: 0.3
                                }
                            },
                            data: [
                                [6, 5, 6, 4, 2]
                            ],

                            itemStyle: {
                                normal: {
                                    opacity: 0
                                }
                            }
                        }
                    ]
                });
            }
        },

        mounted() {
            this.downSelect(this.seltValue[0], this.datas[0]);
        }
    })
</script>

 

demo自行下载。。。。。

 

 

 

一只害虫
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue 下拉框更换echarts值.zip
04-10
vue 实现 select下拉选择改变echarts的值，vue 实现 select下拉选择改变echarts的值，vue 实现 select下拉选择改变echarts的值，vue 实现 select下拉选择改变echarts的值，
Vue3 中使用 ECharts 图表库
10-07
Vue3 中使用 ECharts 图表库
vue中使用echarts，根据选择条件动态展示echarts图表
m0_62317155的博客
02-18 3696
echarts根据选择条件展示echarts图表
【antd-design-vue】a-select 根据下拉项切换不同的echarts数据
花椒和蕊的博客
09-08 2037
1、（1）下拉框change事件，默认值为空， （2）filterOption将输入的内容与显示的内容进行匹配， （3）popupScroll是滚动事件， （4）在data中定义userList为数组，在created中定义方法，在方法中获取下拉框的数据 <div class="tips-wrapper1 "> <a-select placeholder="请选择" @change="userSelect"
vue+echarts点击toolbox工具栏切换数据源
m0_55892953的博客
08-11 1211
<template> <div :class="className" :style="{height:height,width:width}" /> </template> <script> import echarts from 'echarts' import resize from './mixins/resize' export default { mixins: [resize], props: { .
el的select下拉框对应的列表切换数据
花椒和蕊的博客
03-31 2387
element的select下拉框选择之后，对应的列表上数据对应的切换。 写的是假数据，还没有调接口处理。后续调完接口会回来补上代码 效果： 因为左边的图标是不变的，所以只处理了右侧的数据 代码： ```bash <div class="rTop"> <div style="width: 100%"> <h3 class="eqName" style="float: left">设备名称</h3>
用Vue整合Echarts做数据展示：整合ElementUI，实现布局
weixin_43326165的博客
10-04 5248
ElementUI官网 Element开发指南 安装ElementUI 【ctrl+`】打开终端 输入 npm i element-ui -S 在main.js中为我们的项目引入ElementUI // The Vue build version to load with the `import` command // (runtime-only or standalone) has b...
完美解决vue 中多个echarts图表自适应的问题
10-15
在Vue项目中，ECharts图表的自适应是一个常见的需求，特别是在页面中存在多个图表的情况下。以下将详细解析如何解决Vue中多个ECharts图表的自适应问题。 首先，我们需要理解ECharts图表的自适应原理。ECharts图表的...
Vue 之 echarts 图表数据可视化常用的一些图表动态图表3D图表的简单整理
08-05
相关说明地址： vue 中添加 echarts ，然后在 vue 中简单使用一些 echarts中常用的图表，包括一些动态的图表、3D的图表等 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
vue项目创建简单echarts图表
01-11
vue项目创建简单echarts图表 运行过程： 1、npm install 2、npm install echarts --save 3、npm run dev
【Echarts+Select下拉框】实现（同图表切换不同数据）的方法
weixin_50450473的博客
07-28 1万+
html： <div class="turangBox"> <div class="backbg"> <select name="status" id="tabs" class="selectGroup changeItem"> <option>水温</option> <option>浊度</option> <option>酸碱度</option&gt..
Vue Element下拉框显示多个值 Select多值显示
yf18040578780的博客
03-22 915
Vue Element下拉框显示多个值 Select多值显示
在vue中 下拉框切换数据，清除echarts数据
qunwuhui的博客
02-09 1013
在vue中 下拉框切换数据，清除echarts数据
使用下拉选择器切换echarts图
瑰的博客
06-04 1927
1.
使用 Echarts 和 Select 实现同图表切换不同数据
Senbonzakura_py的博客
07-26 668
使用 Echarts 和 Select 实现同图表切换不同数据，在ECharts中使用select
解决vue3向echarts组件传值的问题
最新发布
Vince_13的博客
11-14 1758
这几天在工作中遇到一个需求，我想要实现从vue3中选择不同的选项卡，进而改变图表的展示，一开始不知道怎么将vue3所获取的值传入到echarts组件中，来对其进行双向绑定。在上述选项卡中，含有一个change函数，函数的作用为，将选项卡中的className属性传递给cur变量，为了改变选项卡选中之后的样式改变。在子组件echarts中需要传入数据，类型，横坐标（纵坐标的数据由series的data提供），以及细分类的属性。以上为vue3与子组件echarts进行通信的流程，希望对您有帮助。
vue+echarts结合使用，动态更新数据及数据变化重新渲染问题
热门推荐
qq_41937069的博客
06-06 1万+
话不多说，先看效果图：
echarts如何根据下拉框动态设置数据
m0_46807881的博客
06-01 4296
echarts如何根据下拉框动态设置数据 如图： 实现效果： 第一种：点击下拉选择框获取数据，渲染到echarts表中； 解决方法：获取创建的echart实列化对象，(ew这是我这个表的实列对象)，通过getoption获取option对象， var se=document.getElementById('sex') var op=se.options[se.selectedIndex].value; console.log(this.app[se.selecte
vue中使用echarts 动态渲染数据
往事随风
01-16 4890
Echarts动态渲染
vue echarts连接数据库
05-09
要连接数据库并在 Vue 中使用 Echarts，您需要使用适当的后端技术（如 Node.js）来与数据库交互，并将数据作为 JSON 对象发送到前端。然后，您可以使用 Vue 和 Echarts 将这些数据可视化。 以下是一些步骤： 1. 在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值