vue实现多个玫瑰图的写法grid布局实现模拟切换参数

共7个文件

js：5个

project：1个

html：1个

136 浏览量 2024-06-05 17:33:48 上传评论收藏 129KB RAR 举报

在Vue.js框架中，创建多个玫瑰图是一种常见的数据可视化需求，尤其在数据分析和展示时。Vue结合ECharts、AntV G2Plot等图表库可以轻松实现这一功能。本篇文章将详细讲解如何在Vue项目中利用grid布局实现多个玫瑰图，并进行参数模拟切换。我们需要了解玫瑰图（也称为极坐标柱状图）的概念。玫瑰图是通过极坐标系统来展示数据的一种方式，常用于表示各类数据在整体中的比例分布。在Vue中，我们可以借助ECharts或者AntV G2Plot这两个流行的图表库来绘制玫瑰图。 1. **ECharts的玫瑰图实现**： ECharts是一款由百度开源的数据可视化库，支持多种图表类型，包括玫瑰图。在Vue项目中，你需要先安装ECharts库，可以通过npm命令`npm install echarts --save`来完成。然后在组件中引入ECharts并初始化： ```javascript import echarts from 'echarts'; export default { data() { return { myChart: null, option: { // 初始化配置项 } }; }, mounted() { this.myChart = echarts.init(document.getElementById('chart')); this.myChart.setOption(this.option); }, methods: { // 更新配置项，模拟切换参数 updateOption(newOption) { this.myChart.setOption(newOption); } } }; ``` 2. **Rose Chart配置**：在`option`对象中，定义玫瑰图的配置，如数据、系列、极坐标系等。你可以根据需求创建多个玫瑰图，通过不同的数据和颜色区分。 3. **Grid布局**： Grid布局在ECharts中用于控制图表的布局，可以将多个图表放入同一个容器中。通过设置`grid`属性，可以调整各个图表的位置和大小。例如： ```javascript option: { grid: { left: '10%', right: '10%', bottom: '15%', containLabel: true }, // ... } ``` 4. **模拟切换参数**：在Vue中，你可以通过响应式数据和方法来模拟切换参数。例如，可以创建一个`selectedData`变量存储当前选择的数据，然后在按钮点击事件中更新这个变量，调用`updateOption`方法刷新图表。 5. **AntV G2Plot的玫瑰图实现**：如果你更倾向于轻量级的图表库，可以尝试AntV G2Plot。安装G2Plot库：`npm install @antv/g2plot --save`。然后在Vue组件中使用G2Plot的Rose实例： ```javascript import { Rose } from '@antv/g2plot'; export default { data() { return { chart: null, data: [], // 数据数组 }; }, mounted() { this.chart = new Rose('container', { data: this.data, // 配置项 }); this.chart.render(); }, methods: { // 模拟切换参数 changeData(newData) { this.chart.changeData(newData); } } }; ``` 通过以上步骤，你可以在Vue项目中创建多个玫瑰图，并通过grid布局进行合理排列。同时，利用数据绑定和方法，你可以实现参数的模拟切换，动态展示不同的数据集。这不仅提高了用户体验，也有助于数据的分析和解读。记得在实际开发中根据项目需求调整代码细节，确保图表的美观和功能性。

资源推荐

资源详情

资源评论

收起资源包目录

vue污染玫瑰图.rar （7个子文件）

vue污染玫瑰图

d3.js 148KB

jquery214.js 82KB

underscore.js 16KB

vue.js 105KB

vueWeathermapIDW.js 23KB

.project 980B

VUEwuranmeiguituIDWgrid.html 26KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .frame { fill: none; stroke: #000; } .axis text { font: 10px sans-serif; } .axis line, .axis circle { fill: none; stroke: #000; stroke-dasharray: 4; } .axis:last-of-type circle { stroke: #000; stroke-dasharray: none; } .line { fill: none; stroke: #000; stroke-width: 3px; } svg { opacity: 1; filter: alpha(opacity=100); } </style> </head> <body> <button id="btn" >点击切换参数</button> <div id="app" style="margin: 0px;padding: 0px; height: calc(100vh - 20px); display: grid; grid-template-columns:repeat(3,1fr) ; " > <div class="zuobiao" v-for="(item,index) in items" style="padding: 40px calc((100vw - 1300px)/6); min-width: 400px; " > <canvas :id="'canvas'+index" style="z-index: 9920; opacity:1; position: absolute; flex: 2; "> </canvas> <canvas :id="'canvas2'+(index+1)" width="400px" height="324px" style=" z-index: 199; position: absolute; "> </canvas> <div style="height: 0px;top:310px; z-index: 10; text-align: center;position: relative; ">{{item.name}}&emsp;&emsp;&emsp;</div> </div> </div> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>  <script> var width = 380, //图形的宽度 height = 300; //图形的高度 </script> <script src="js/vueWeathermapIDW.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script> var colorarray = ["#0000FF", "#006EFF", "#00DDFF", "#2AFFFF", "#68FFFF", "#8BFFE8", "#06FF0B", "#49FF7A", "#49FF00", "#9BFF00", "#D2FF00", "#E3FF00", "#F3FF00", "#FFF200", "#FFCB00", "#FFA300", "#FF7D00", "#FF5300", "#FF5300", "#FF0000"]; var namearray = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000]; var table = [{ colorarray : ["#0000FF", "#006EFF", "#00DDFF", "#2AFFFF", "#68FFFF", "#8BFFE8"], namearray :[100, 200, 300, 400, 500, 600], name: "PM2.5", "ws": [2.0, 4.0, 2.0, 1.0, 3.0, 3.0, 3.0, 2.0, 2.0, 1.0, 1.0, 1.0, 3.0, 3.0, 3.0, 2.0, 5.0, 4.0, 6.0, 4.0, 2.0, 1.0, 2.0, 3.0, 3.0, 3.0, 4.0, 3.0, 3.0, 7.0, 6.0, 7.0, 4.0, 8.0, 6.0, 6.0, 7.0, 7.0, 6.0, 8.0, 8.0, 8.0, 7.0, 5.0, 4.0, 3.0, 3.0, 1.0, 2.0, 2.0, 2.0, 2.0], "wd": [10.0, 350.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 170.0, 135.0, 135.0, 135.0, 90.0, 90.0, 90.0, 90.0, 100.0, 80.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 10.0, 0.0, 20.0, 30.0, 45.0, 45.0, 45.0, 80.0, 45.0, 45.0, 75.0, 45.0, 45.0, 45.0, 60.0, 45.0, 70.0, 80.0, 90.0, 225.0, 270.0, 260.0, 225.0], "value": [183.2, 173.4, 194.0, 175.75, 203.6, 161.2, 142.0, 163.0, 175.5, 208.4, 205.0, 171.2, 143.6, 116.0, 110.6, 93.2, 98.2, 91.8, 83.6, 88.4, 81.4, 77.0, 81.8, 89.4, 115.8, 131.2, 166.4, 174.0, 170.2, 152.4, 184.4, 203.8, 212.6, 627.8, 1290.4, 1581.25, 1711.525, 1841.8, 2128.4, 2406.8, 2576.8, 2035.6, 1615.0, 1286.8, 1202.4, 1015.2, 733.8, 635.6, 339.2, 331.4, 303.2, 282.6] }, { colorarray: [ "#49FF7A", "#49FF00", "#9BFF00", "#D2FF00", "#E3FF00", "#FF5300", "#FF0000"], namearray: [ 1200, 1300, 1400, 1500, 1600, 1700, 1800], name: "PM1XX", "ws": [30.0, 30.0, 30.0, 30.0, 3.0, 3.0, 3.0, 2.0, 2.0, 1.0, 1.0, 1.0, 3.0, 3.0, 3.0, 2.0, 5.0, 4.0, 6.0, 4.0, 2.0, 1.0, 2.0, 3.0, 3.0, 3.0, 4.0, 3.0, 3.0, 7.0, 6.0, 7.0, 4.0, 8.0, 6.0, 6.0, 7.0, 7.0, 6.0, 8.0, 8.0, 8.0, 7.0, 5.0, 4.0, 3.0, 3.0, 1.0, 2.0, 2.0, 2.0, 2.0], "wd": [0.0, 90.0, 180.0, 270.0, 359.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 170.0, 135.0, 135.0, 135.0, 90.0, 90.0, 90.0, 90.0, 100.0, 80.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 10.0, 0.0, 20.0, 30.0, 45.0, 45.0, 45.0, 80.0, 45.0, 45.0, 75.0, 45.0, 45.0, 45.0, 60.0, 45.0, 70.0, 80.0, 90.0, 225.0, 270.0, 260.0, 225.0], "value": [183.2, 173.4, 194.0, 175.75, 203.6, 161.2, 142.0, 163.0, 175.5, 208.4, 205.0, 171.2, 143.6, 116.0, 110.6, 93.2, 98.2, 91.8, 83.6, 88.4, 81.4, 77.0, 81.8, 89.4, 115.8, 131.2, 166.4, 174.0, 170.2, 152.4, 184.4, 203.8, 212.6, 627.8, 1290.4, 1581.25, 1711.525, 1841.8, 2128.4, 2406.8, 2576.8, 2035.6, 1615.0, 1286.8, 1202.4, 1015.2, 733.8, 635.6, 339.2, 331.4, 303.2, 282.6] }, { colorarray: ["#0000FF", "#006EFF", "#00DDFF", "#2AFFFF", "#68FFFF", "#8BFFE8", "#06FF0B", "#49FF7A", "#49FF00", "#9BFF00", "#D2FF00", "#E3FF00", "#F3FF00", "#FFF200", "#FFCB00", "#FFA300", "#FF7D00", "#FF5300", "#FF5300", "#FF0000"], namearray: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000], name: "SO2", "ws": [15.0, 4.0, 2.0, 1.0, 3.0, 3.0, 3.0, 2.0, 2.0, 1.0, 1.0, 1.0, 3.0, 3.0, 3.0, 2.0, 5.0, 4.0, 6.0, 4.0, 2.0, 1.0, 2.0, 3.0, 3.0, 3.0, 4.0, 3.0, 3.0, 7.0, 6.0, 7.0, 4.0, 8.0, 6.0, 6.0, 7.0, 7.0, 6.0, 8.0, 8.0, 8.0, 7.0, 5.0, 4.0, 3.0, 3.0, 1.0, 2.0, 2.0, 2.0, 2.0], "wd": [90.0, 350.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 170.0, 135.0, 135.0, 135.0, 90.0, 90.0, 90.0, 90.0, 100.0, 80.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 10.0, 0.0, 20.0, 30.0, 45.0, 45.0, 45.0, 80.0, 45.0, 45.0, 75.0, 45.0, 45.0, 45.0, 60.0, 45.0, 70.0, 80.0, 90.0, 225.0, 270.0, 260.0, 225.0], "value": [183.2, 173.4, 194.0, 175.75, 203.6, 161.2, 142.0, 163.0, 175.5, 208.4, 205.0, 171.2, 143.6, 116.0, 110.6, 93.2, 98.2, 91.8, 83.6, 88.4, 81.4, 77.0, 81.8, 89.4, 115.8, 131.2, 166.4, 174.0, 170.2, 152.4, 184.4, 203.8, 212.6, 627.8, 1290.4, 1581.25, 1711.525, 1841.8, 2128.4, 2406.8, 2576.8, 2035.6, 1615.0, 1286.8, 1202.4, 1015.2, 733.8, 635.6, 339.2, 331.4, 303.2, 282.6] }, { colorarray: ["#0000FF", "#8BFFE8", "#49FF7A", "#D2FF00", "#E3FF00", "#F3FF00", "#FFF200", "#FFA300", "#FF5300"], namearray: [100, 200, 500, 600, 700, 1000, 1100, 1200, 1300, 1400], name: "CO2", "ws": [4.0, 1.0, 2.0, 1.0, 3.0, 3.0, 3.0, 2.0, 2.0, 1.0, 1.0, 1.0, 3.0, 3.0, 3.0, 2.0, 5.0, 4.0, 6.0, 4.0, 2.0, 1.0, 2.0, 3.0, 3.0, 3.0, 4.0, 3.0, 3.0, 7.0, 6.0, 7.0, 4.0, 8.0, 6.0, 6.0, 7.0, 7.0, 6.0, 8.0, 8.0, 8.0, 7.0, 5.0, 4.0, 3.0, 3.0, 1.0, 2.0, 2.0, 2.0, 2.0], "wd": [120.0, 350.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 170.0, 135.0, 135.0, 135.0, 90.0, 90.0, 90.0, 90.0, 100.0, 80.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 10.0, 0.0, 20.0, 30.0, 45.0, 45.0, 45.0, 80.0, 45.0, 45.0, 75.0, 45.0, 45.0, 45.0, 60.0, 45.0, 70.0, 80.0, 90.0, 225.0, 270.0, 260.0, 225.0], "value": [183.2, 173.4, 194.0, 175.75, 203.6, 161.2, 142.0, 163.0, 175.5, 208.4, 205.0, 171.2, 143.6, 116.0, 110.6, 93.2, 98.2, 91.8, 83.6, 88.4, 81.4, 77.0, 81.8, 89.4, 115.8, 131.2, 166.4, 174.0, 170.2, 152.4, 184.4, 203.8, 212.6, 627.8, 1290.4, 1581.25, 1711.525, 1841.8, 2128.4, 2406.8, 2576.8, 2035.6, 1615.0, 1286.8, 1202.4, 1015.2, 733.8, 635.6, 339.2, 331.4, 303.2, 282.6] }, { colorarray: [ "#9BFF00", "#D2FF00", "#E3FF00", "#F3FF00", "#FFF200", "#FFCB00", "#FF7D00", "#FF5300", "#FF5300", "#FF0000"], namearray: [ 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000], name: "O3", "ws": [5.0, 4.0, 2.0, 1.0, 3.0, 3.0, 3.0, 2.0, 2.0, 1.0, 1.0, 1.0, 3.0, 3.0, 3.0, 2.0, 5.0, 4.0, 6.0, 4.0, 2.0, 1.0, 2.0, 3.0, 3.0, 3.0, 4.0, 3.0, 3.0, 7.0, 6.0, 7.0, 4.0, 8.0, 6.0, 6.0, 7.0, 7.0, 6.0, 8.0, 8.0, 8.0, 7.0, 5.0, 4.0, 3.0, 3.0, 1.0, 2.0, 2.0, 2.0, 2.0], "wd": [180.0, 350.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 170.0, 135.0, 135.0, 135.0, 90.0, 90.0, 90.0, 90.0, 100.0

评论收藏

内容反馈