一些问题4——Vue+websocket下的风向风速图（极坐标系下的堆叠柱状图）

1、父组件

<template><div style="width: 920px;height: 26.875rem;"><Chart :cdata="cdata" ref="ActualWindchart" :message="message"/></div>
</template><script>import Chart from './chart.vue'export default {name: 'ActualWind',props: ['messagedaughter'],data() {return {cdata: {Wind_Direction_2 : [],Wind_Speed_2 : [],obj:[],legendData:[],valData:[]},message: '',};},components: {Chart,},mounted() {this.setData();},methods: {
//别的页面传过来的一些值（对象）并传给子组件getData(data) {this.message = datathis.$refs.ActualWindchart.getData(data);},// 根据自己的业务情况修改setData() {for (let i = 0; i < this.cdata.barData.length - 1; i++) {let rate = this.cdata.barData[i] / this.cdata.lineData[i];this.cdata.rateData.push(rate.toFixed(2));}},}};
</script><style lang="scss" scoped></style>

2、子组件

<template><div class="body"><Echart style="position: relative;" :options="options" id="topRightChart" height="100%" width="100%"></Echart></div>
</template>
<script>import Echart from "@/common/echart";export default {data() {return {options: {},WS_2Url: "/接口地址/",message: '',form: {taskSerialNumber: '',},legend: ['24.5-28.4','20.8-24.4','17.2-20.7','13.9-17.1','10.8-13.8','8.0-10.7','5.5-7.9','3.4-5.4','1.6-3.3','0.3-1.5','0.0-0.2',],list: [//单纯的展示后台应该返回的数据格式[1, 2, 3, 4, 3, 5, //0-5   北风六条数据1, 2, 3, 4, 3, 5, //6-11  东风六条数据1, 2, 3, 4, 3, 5, //12-17 南风六条数据1, 2, 3, 4, 3, 2, //18-23 西风六条数据], // 风速 0.0-0.2m/s 数组[2, 3, 4, 3, 5, 6, //0-5   北风六条数据2, 3, 4, 3, 5, 6, //6-11  东风六条数据2, 3, 4, 3, 5, 6, //12-17 南风六条数据2, 3, 4, 4, 3, 2, //18-23 西风六条数据], // 风速 0.3-1.5m/s 数组// ……],WS_2websocket: undefined};},components: {Echart,},props: {cdata: {type: Object,default: () => ({}),},},created() {this.getWebSocketVal2()},//图表自适应mounted() {this.$nextTick(() => {this.initEcharts1()})},methods: {
//自适应initEcharts1() {let myCharts = document.getElementById("topRightChart");myCharts.style.width = 58 + "rem";myCharts.style.height = 21.5 + "rem";this.myCharts = this.$echarts.init(myCharts);this.myCharts.setOption(this.options);this.myCharts.resize();let self = this;window.addEventListener("resize", () => { // 通过resize方法来重设图表宽度850/320let myCharts = document.getElementById("topRightChart");myCharts.style.width = 58 + "rem";myCharts.style.height = 21.5 + "rem";self.myCharts.resize();});},getWebSocketVal2() {const that = this;// WebSocket 连接地址let WS_2Url = "ws://" + location.host + "/ws" + this.WS_2Url;//代理地址，详见其他文章// 连接WebSocketthat.WS_2websocket = new WebSocket(WS_2Url);// WebSocket 连接成功时that.WS_2websocket.onopen = function() {//发送信息（默认初始传给后台的参数）that.WS_2websocket.send(JSON.stringify(that.form));};// 获取 websocket 返还数据that.WS_2websocket.onmessage = function(res) {// 转换接收到数据格式var val = JSON.parse(res.data)// val = JSON.parse(val.listWS);// 清空上次数据// that.cdata.lineData = [];（下面可能会用到，若数据重复则打开试试，同为记录）that.cdata.valData = val;//循环添加数据（实际不需要，就是在这儿做个记录）for (let i = 0; i < val.length; i++) {that.cdata.Wind_Direction_2.push(val[i].Wind_Direction_2);//接收后台数据that.cdata.Wind_Direction_2 = that.cdata.Wind_Direction_2.map(Number);[1,2]var stationData = that.cdata.Wind_Speed_2.push(val[i].Wind_Speed_2);stationData = that.cdata.Wind_Speed_2.map(Number); //数组，元素不带双引号[a,b]}
//两个数组对应合并到一个数组（实际不需要，就是在这儿做个记录）stationData.forEach((item, index) => {that.cdata.obj.push([item, that.cdata.Wind_Direction_2[index]]);});//实现效果[[1,a][2,b]]
//数组的值根据区间大小判断是否在当前区间若在则返回到数组中（实际不需要，就是在这儿做个记录）let rangeConfig = [{max: 1,min: 0}, {max: 2,min: 1},];
//判断数组的第一个值是否在这个区间内，若是单纯的[1,2]这种则不用加下标（做个记录）that.cdata.legendData = rangeConfig.map(item => that.cdata.obj.filter(num => num[0] >= item.min && num[0] <=item.max));}},
//接收父组件传过来的值，并发给后台getData(parentMessage) {this.message = parentMessagethis.WS_2websocket.send(JSON.stringify(this.message));},},watch: {cdata: {handler(newData) {this.options = {title: {//标题text: 'Wind  speed  (m/s)',right: 140,top: 10,itemGap: 180, //Calm->距顶部高度textStyle: {fontSize: 14,color: "rgba(83, 162, 255, 1)",fontFamily: "Source Han Sans CN"},subtext: "Calm->",subtextStyle: {fontSize: 14,color: "rgba(83, 162, 255, 1)",fontFamily: "Source Han Sans CN"},},toolbox: {//工具栏right: 10,feature: {dataView: {//数据视图// readOnly: false,show: true,readOnly: true,//关闭刷新按钮backgroundColor: "RGBA(8, 24, 54, 1)",textareaBorderColor: "RGBA(9, 58, 114, 1)",textColor: "rgba(170, 180, 183, 1)",buttonColor: "rgba(97, 229, 250, 1)",buttonTextColor: "rgba(3, 23, 31, 1)",textareaColor: "RGBA(8, 23, 54, 1)"},},},legend: {//图例show: true,top: 30,right: 125,bottom: 50,orient: 'vertical',//竖向itemGap: -0.5, //图例每项之间的间隔,横向布局时为水平间隔,纵向布局时为纵向间隔itemWidth: 8,itemHeight: 20,data: this.legend,textStyle: {color: "#CCD7E5"}},grid: {//图表位置left: "4%",// right: "0%",right: "14%",// bottom: "25%",containLabel: true,},angleAxis: {//极坐标系的角度轴。show: true,// color: '#57CDDD',type: 'category',boundaryGap: false, //标签和数据点都会在两个刻度之间的带(band)中间axisTick: {show: false //是否显示坐标轴刻度（最外圈）},splitLine: {//底部分隔线（直线）show: true,lineStyle: {color: "#5D5D5D",},},axisLine: {show: false, //是否显示最外圈圈线。// lineStyle: {//   color: '#2D5981',// }},axisLabel: {//坐标轴刻度标签的相关设置。（最外圈）margin: 11,color: '#416383',fontSize: 18,fontWeight: 600},data: [{value: 'N'},{value: ''}, {value: ''}, {value: ''}, {value: ''}, {value: ''},{value: 'W'},{value: ''}, {value: ''}, {value: ''}, {value: ''}, {value: ''},{value: 'E'},{value: ''}, {value: ''}, {value: ''}, {value: ''}, {value: ''},{value: 'S'},{value: ''}, {value: ''}, {value: ''}, {value: ''}, {value: ''},]},radiusAxis: {//极坐标系的径向轴。min: 0,axisLabel: {//坐标轴刻度标签的相关设置。formatter: '{value} %',//刻度标签的内容格式器textStyle: {//   fontSize: 10,color: '#53A2FF',},rich: {}},
//下面这两个是让极坐标系的径向轴的文字浮于图表上方zlevel: 0,z: 2,axisLine: {show: false, //是否显示坐标轴轴线（直线）},axisTick: {show: false //是否显示坐标轴刻度（直线上的）},splitLine: {//坐标轴在 grid 区域中的分隔线。(底部圆圈）show: true,lineStyle: {color: "#5D5D5D",},},},polar: {center: ['40%', '48%'], //图表位置radius: [0, '70%']},series: [{type: 'bar',data: newData.valData[0],coordinateSystem: 'polar',name: this.legend[10],stack: 'a',color: "#0208B2",}, {type: 'bar',data: newData.valData[1],coordinateSystem: 'polar',name: this.legend[9],stack: 'a',color: "#133D8B",}, {type: 'bar',data: newData.valData[2],coordinateSystem: 'polar',name: this.legend[8],stack: 'a',color: "#4C5AAF",},
//省略重复代码
],
//自定义数据视图optionToContent: function(opt) {var angleAxisData = opt.angleAxis[0].data;console.log(angleAxisData[0].value)var seriesData = opt.series;// 无数据时：展示暂无数据（咱也不知道这行不行）// if (seriesData == null) {//   const dom = document.getElementById('bottomRightChart');//   dom.innerHTML = '-暂无相关数据-';//   dom.style.cssText = 'text-align:center; color: #999; border: none;line-height: 300px';//   dom.removeAttribute('_echarts_instance_');// }var table ='<div class="tableweb" style="height:301px"><table style="width:100%;height:100%;text-align:center;margin-left:0px;"><tbody><tr>' +'<td style="width:20px;">风向</td>' +'<td style="width:20px;">' + seriesData[0].name + '</td>' +'<td style="width:20px;">' + seriesData[1].name + '</td>' +
//省略重复代码'</tr>';for (var i = 0, l = angleAxisData.length; i < l; i++) {table += '<tr>' +'<td style="width:30px;">' + angleAxisData[i].value + '</td>' +'<td style="width:30px;">' + seriesData[0].data[i] + '</td>' +'<td style="width:30px">' + seriesData[1].data[i] + '</td>' +
//省略重复代码'</tr>'}table += '</tbody></table></div>';return table;},}; //options--end},immediate: true,deep: true,},},};
</script>
//自适应需要
<style lang="scss" scoped>.body {width: 920px;height: 380px;}
</style>

一些问题4——Vue+websocket下的风向风速图（极坐标系下的堆叠柱状图）相关推荐

【源码】风向风速图绘制函数WindRose
本函数实现方向强度直方图的创建,即"风向风速图". This function allows to create a Direction-intensity histogram, ...
风向风速图将Series中的风向风速数据data和xAxis中的时间data一一对应
进入正题之前,先讲一讲只有一条风向风速曲线的对应方法(ps:我遭遇的需求是多条风向风速曲线,且每条曲线在某个时间点不一定有数据,这就需要你每条曲线的每个拐点都得和X轴的时间相对应才可): var sy ...
vue+websocket+express+mongodb实战项目（实时聊天）（一）
##vue+websocket+express+mongodb实战项目(实时聊天)(一) 在原来基础上增加了多个聊天室以及发送图片[vue+websocket+express+mongodb实战项目( ...
vue+websocket+Stomp组件实现前端长连接
1文件结构 2.重点文件夹中的文件代码以及作用 ① 根目录中systemConfig文件夹中的main.js文件 /***作用:作为项目中的配置文件,放了websocket连接的url,用户名(adm ...
电子信息毕业设计VUE+websocket+Echart+服务器的智能农业管理系统
目录一.作品介绍二.开发环境三.系统功能截图 1.登录界面 2.设备管理 3.配置管理界面 4.历史数据 5.数据分析 6. 权限管理 7.远程管理四.部分关键代码一.作品介绍现在农业在互 ...
腾讯朱华：数据中心下一个风向的探索
导读:朱华,腾讯数据中心技术发展中心总监,中国工程建设标准化协会数据中心技术委员会副主任委员,中国通信标准化协会开放数据中心委员会数据中心工作组组长,荣获中国工程建设标准化协会颁发的2018数据中心青 ...
[vue] 使用vue开发一个todo小应用，谈下你的思路
[vue] 使用vue开发一个todo小应用,谈下你的思路结构: 输入部分( input )和输出部分( ul ) 逻辑:用户输入之后,通过事件触发拿到用户输入的数据存起来, 将用户数据集合通过 v ...
解决vue项目在ie、360兼容模式下空白页面问题
完美解决vue项目在ie.360兼容模式下空白页面,并提示语法错误的原因艰难路程解决办法艰难路程事实上,很多人在做项目的过程中很多存在同一个问题,于是去百度了,但是用同样的解决方法不一定就能解 ...
vue项目获取下拉框选中id_vue获取下拉框值
vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: {{it ...

一些问题4——Vue+websocket下的风向风速图（极坐标系下的堆叠柱状图）

一些问题4——Vue+websocket下的风向风速图（极坐标系下的堆叠柱状图）相关推荐

最新文章

热门文章