uniapp 使用renderjs引入echarts

效果图：

1.1renderjs引入echarts 

组件zmui-echarts.vue：

<template><view class="zmui-echarts" :prop="option" :change:prop="echarts.delay"></view>
</template><script>export default {name: 'zmuiEcharts',props: {option: {type: Object,required: true}}}
</script>//使用renderjs 就让app拥有类似有.HTML文件的环境 能直接挂载.js的能力
<script module="echarts" lang="renderjs"> export default {data() {return {timeoutId: null,chart: null}},mounted() {if (typeof window.echarts === 'object') {this.init()} else {// 动态引入类库const script = document.createElement('script') //创建个标签script.src = './static/echarts.min.js'  //引入echarts.min.jsscript.onload = this.initdocument.head.appendChild(script) //全局挂载echarts.min.js}},methods: {/*** 初始化echarts*/init() {// 根据id初始化图表this.chart = echarts.init(this.$el)this.update(this.option)},/*** 防抖函数，500毫秒内只运行最后一次的方法* @param {Object} option*/delay(option) {if (this.timeoutId) {clearTimeout(this.timeoutId)this.timeoutId = null}this.timeoutId = setTimeout(() => {this.update(option)}, 500)},/*** 监测数据更新* @param {Object} option*/update(option) {console.log('option', option)if (this.chart) {// 因App端，回调函数无法从renderjs外传递，故在此自定义设置相关回调函数if (option) {// tooltipif (option.tooltip) {// 判断是否设置tooltip的位置if (option.tooltip.positionStatus) {option.tooltip.position = this.tooltipPosition()}// 判断是否格式化tooltipif (option.tooltip.formatterStatus) {option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option.tooltip.formatFloat2,option.tooltip.formatThousands)}}// legendif (option.legend) {console.log('option.legend', option.legend)if (Object.prototype.toString.call(option.legend) == '[object Array]') {for (let i in option.legend) {if (option.legend[i].formatterStatus) {option.legend[i].formatter = this.legendFormatter(option.legend[i].formatterType, option.legend[i].formatterArr)}}console.log(12)} else {if (option.legend.formatterStatus) {console.log(56)// option.legend.formatter = this.legendFormatter(option.legend.formatterType, option.legend.formatterArr)// option.legend.formatter = function(value) {// 	return '1'// }}console.log(34)}}// y轴if (option.yAxis) {if (option.yAxis.axisLabel) {if (option.yAxis.axisLabel.formatterStatus) {option.yAxis.axisLabel.formatter = this.yAxisFormatter(option.yAxis.axisLabel.formatterData)}}if (option.yAxis[0].axisLabel.water) {let currentChooseName = option.yAxis[0].axisLabel.water.currentChooseNamelet name = option.yAxis[0].axisLabel.water.nameconsole.log('name========>', name,currentChooseName)option.yAxis[0].axisLabel.formatter =  function(value) {let level = nullif (currentChooseName == '西铝饮用水' || currentChooseName == '和尚山') {if (name == 'CODMn') {switch (value) {case 2:level = 2.0;break;case 4:level = 4.0;break;case 6:level = 6.0;break;case 10:level = 10.0;break;}return level;}else if (name == 'TP') {switch (value) {case 0.02:level = 0.02;break;case 0.1:level = 0.1;break;case 0.2:level = 0.2;break;case 0.3:level = 0.3;break;}return level;}else if (name == 'DO') {switch (value) {case 7.5:level = 7.5;break;case 6:level = 6.0;break;case 5:level = 5.0;break;case 3:level = 3.0;break;}return level;}else if (name == 'TN') {switch (value) {case 0.2:level = 0.2;break;case 0.5:level = 0.5;break;case 1:level = 1.0;break;case 1.5:level = 1.5;break;}return level;} else if (name == 'NH3-N') {switch (value) {case 0.15:level = 0.15;break;case 0.5:level = 0.5;break;case 1:level = 1.0;break;case 1.5:level = 1.5;break;}return level;}}else if(currentChooseName !== '西铝饮用水' || currentChooseName !== '和尚山') {if (name == 'CODMn') {switch (value) {case 4:level = 4.0;break;case 6:level = 6.0;break;case 10:level = 10.0;break;case 15:level = 15.0;break;}return level;}else if (name == 'TP') {switch (value) {case 0.1:level = 0.1;break;case 0.2:level = 0.2;break;case 0.3:level = 0.3;break;case 0.4:level = 0.4;break;}return level;} else if (name == 'DO') {switch (value) {case 6:level = 6.0;break;case 5:level = 5.0;break;case 3:level = 3.0;break;case 2:level = 2.0;break;}return level;}else if (name == 'TN') {switch (value) {case 0.5:level = 0.5;break;case 1:level = 1.0;break;case 1.5:level = 1.5;break;case 2:level = 2.0;break;}return level;} else if (name == 'NH3-N') {switch (value) {							case 0.5:level = 0.5;break;case 1:level = 1.0;break;case 1.5:level = 1.5;break;case 2:level = 2.0;break;}return level;}} }}}// 颜色渐变if (option.series) {for (let i in option.series) {let linearGradient = option.series[i].linearGradientif (option.series[i].axisLabel && option.series[i].axisLabel.formatterText) {option.series[i].axisLabel.formatter = function(value) {if (value === 0) {return '0 \n 健康';} else if (value === 1) {return '50 \n 优';} else if (value === 2) {return '100 \n 良';} else if (value === 3) {return '150 \n 轻度';} else if (value === 4) {return '200 \n 中度';} else if (value === 5) {return '300 \n 重度';} else if (value === 6) {return '500 \n 严重';}}}if (linearGradient) {option.series[i].color = new echarts.graphic.LinearGradient(linearGradient[0], linearGradient[1],linearGradient[2], linearGradient[3], linearGradient[4])}if (option.series[i].itemStyle) {if (option.series[i].itemStyle.normal) {if (option.series[i].itemStyle.normal.formatterColor) {option.series[i].itemStyle.normal.color = this.colorFormatter(option.series[i].itemStyle.normal.formatterType,option.series[i])}}}if (option.series[i].markLine) {if (option.series[i].markLine.label) {if (option.series[i].markLine.label.normal) {if (option.series[i].markLine.label.normal.formatterLabel) {option.series[i].markLine.label.normal.formatter = this.labelFormatter(option.series[i].markLine.label.normal.formatterType, option.series[i].markLine.label.normal.formatterValue)}}}}}}}console.log(option)this.chart.clear() // 这个不要删掉哟，不然切换不同图形的时候会有bug// 设置新的optionthis.chart.setOption(option, option.notMerge)}},waterFormatterYAxis (value) {/* let name = nullswitch (value) {case 2:name = 2.0;break;case 4:name = 4.0;break;case 6:name = 6.0;break;case 10:name = 10.0;break;} */console.log('value', value)// return name;},/*** 设置tooltip的位置，防止超出画布*/tooltipPosition() {return (point, params, dom, rect, size) => {// 其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小let x = point[0]let y = point[1]let viewWidth = size.viewSize[0]let viewHeight = size.viewSize[1]let boxWidth = size.contentSize[0]let boxHeight = size.contentSize[1]let posX = 0 // x坐标位置let posY = 0 // y坐标位置if (x >= boxWidth) { // 左边放的下posX = x - boxWidth - 1}if (y >= boxHeight) { // 上边放的下posY = y - boxHeight - 1}return [posX, posY]}},/*** tooltip格式化* @param {Object} unit 数值后的单位* @param {Object} formatFloat2 是否保留两位小数* @param {Object} formatThousands 是否添加千分位*/tooltipFormatter(unit, formatFloat2, formatThousands) {return params => {if (Array.isArray(params)) {var params = params[0]// #ifdef H5var result = params.data.fullDate + '/n' + params.seriesName + "：" + params.data.value// #endif// #ifdef APP-PLUSvar result = params.data.fullDate + '</br>' + params.seriesName + "：" + params.data.value// #endif} else {// #ifdef H5var result = params.data.fullDate + '/n' + params.seriesName + "：" + params.data.value// #endif// #ifdef APP-PLUSvar result = params.data.fullDate + '</br>' + params.seriesName + "：" + params.data.value// #endif}return result}},/*** 保留两位小数* @param {Object} value*/formatFloat2(value) {let temp = Math.round(parseFloat(value) * 100) / 100let xsd = temp.toString().split('.')if (xsd.length === 1) {temp = (isNaN(temp) ? '0' : temp.toString()) + '.00'return temp}if (xsd.length > 1) {if (xsd[1].length < 2) {temp = temp.toString() + '0'}return temp}},/*** 添加千分位* @param {Object} value*/formatThousands(value) {if (value === undefined || value === null) {value = ''}if (!isNaN(value)) {value = value + ''}let re = /\d{1,3}(?=(\d{3})+$)/glet n1 = value.replace(/^(\d+)((\.\d+)?)$/, function(s, s1, s2) {return s1.replace(re, '$&,') + s2})return n1},/*** Y轴格式化* @param {Object} data*/yAxisFormatter(data) {return params => {let result = []for (let i in data) {if (params == i) {result.push(data[i])}}return result}},/*** legend 格式* @param {Object} Type* @param {Object} Arr*/legendFormatter(Type, Arr) {console.log('Arr', Arr)return params => {let result = ""var total = 0;for (var i = 0, l = Arr.length; i < l; i++) {total += Arr[i].value;}let res = Arr.filter(v => v.name === params)let val = res[0].valuelet precent=((val/total)*100).toFixed(2) + '%'// #ifdef H5result = params +"("+ val+"件)"// #endif// #ifdef APP-PLUSresult = params +"("+ val+"件)"// #endifreturn result}},/*** 颜色设置* @param {Object} Type*/colorFormatter(Type,series) {let value  =0;return params => {//如果series 里面包含aqiData 数据 按AQI 的值来渲染颜色let value =params.value;if(series['aqiData']!=null){value =series['aqiData'][params.dataIndex];} let result = ""if (Type === 'one') {result = "rgb(126,0,35)"if (value > 0 && value < 51) {result = "#00e400"} else if (value >= 51 && value < 101) {result = "#ffff00"} else if (value>= 101 && value < 151) {result = "#ff7e00"} else if (value >= 151 && value < 201) {result = "#ff0000"} else if (value >= 201 && value < 301) {result = "#7e0023"}}return result}},/*** 标记线* @param {Object} Type* @param {Object} Value*/labelFormatter(Type, Value) {return params => {let result = ""if (Type === 'one') {result = Value}return result}},}}
</script><style scoped>.zmui-echarts {width: 100%;height: 100%;}
</style>

2.使用<zmuiEcharts  :option="echartOptions"></zmuiEcharts>

import zmuiEcharts from '@/components/zmui-echarts/zmui-echarts.vue'
components: {zmuiEcharts},
<zmuiEcharts  :option="echartOptions"></zmuiEcharts>export default {data(){return{echartOptions: {backgroundColor: '#ffffff',title: {text: 'mg/L',textStyle: {fontSize: 12,fontWeight: 'normal',color: '#858585', //标题颜色},top: 0,left: '4%',},tooltip: {show: false// axisPointer: {// 	type: "axis",// 	textStyle: {// 		color: "#000"// 	}// },// formatter: (data) => {// 	// 可以自定义文字和样式，用行内样式，数据包含在data参数中// 	let text = ` ${data.name}：${data.value}`// 	return text// }},grid: {top: "5%",right: "3%",bottom: '13%',},xAxis: [{data: [],margin: 20,interval: 0,rotate: 40,color: '#858585',textStyle: {fontSize: 12},axisLine: {lineStyle: {color: '#858585',}},axisTick: {show: true},}],axisLine: {show: false,lineStyle: {color: '#858585', //y轴颜色}},axisTick: {show: false},splitLine: {show: false},dataZoom: [{"show": true,"height": 8,"xAxisIndex": [0],bottom: '0%',start: 0,end: 6,handleIcon: "M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z",handleSize: "130%",handleStyle: {color: "#fff",shadowColor: "#B1B5B9",shadowBlur: 5,},backgroundColor: "#DEE3F4",fillerColor: "#008efe",endValue: 5,},{"type": "inside","show": true,"height": 15,"start": 1,"end": 35}],yAxis: [{type: 'value',min: 0,max: 0,interval: 0.01,name: 'nj',nameTextStyle: {color: '#ffffff'},axisLine: {show: true},axisTick: {show: false},splitLine: {show: false,},axisLabel: {color: '#858585',textStyle: {fontSize: 13},formatter: function(value1) {return value1;},water: {name: 'water',code: 'code'},},}],series: [{label: {normal: {show: true,color: '#333',position: 'top',}},name: 'nj',type: 'bar',data: [],barWidth: '8px',itemStyle: {normal: {formatterColor: true,formatterType: "one",}},}]}}}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/671743.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

go modules使用

go modules使用

创建项目 在使用GoLand创建项目的时候&#xff0c;会自动创建对应的go.mod文件。 创建完后 创建文件 创建一个main.go的文件&#xff0c;里面print一个hello world。 在运行时可以设置是否采取先生成文件再运行。 为空的话则不输出。 下面的Environment为设置运行的环境…
阅读更多...
【Ubuntu 20.04/22.04 LTS】最新 esp-matter SDK 软件编译环境搭建步骤

【Ubuntu 20.04/22.04 LTS】最新 esp-matter SDK 软件编译环境搭建步骤

仓库链接&#xff1a;esp-matter SDK官方软件说明&#xff1a;ESP Matter Programming Guide官方参考文档&#xff1a;使用 Matter-SDK 快速搭建 Matter 环境 (Linux) 环境要求 Ubuntu 20.04 或 Ubuntu22.04网络环境支持访问 Gihub 在安装 esp-matter SDK 软件编译环境之前&a…
阅读更多...
Maven详细配置整理

Maven详细配置整理

Maven的作用 在Javaweb开发中&#xff0c;需要使用大量的jar包&#xff0c;需要手动去导入&#xff0c;Maven能够自动帮我们导入和配置这个jar包。 对于新手Maven就是用来方便导入jar包的&#xff01; Maven的核心思想&#xff1a;约定大于配置 有约束&#xff0c;不要去违…
阅读更多...
【远程通信系统】服务端初始化

【远程通信系统】服务端初始化

服务器架构&#xff1a;libevent 线程池 数据库&#xff1a;MySQL 有两张表&#xff1a;chat_user和chat_group&#xff0c;分别保存用户信息和群信息 在线用户和群的保存&#xff1a; struct User {std::string name;//账号&#xff08;用户名struct bufferevent* bev;//客…
阅读更多...
C++ 动态规划 状态压缩DP 最短Hamilton路径

C++ 动态规划 状态压缩DP 最短Hamilton路径

给定一张 n 个点的带权无向图&#xff0c;点从 0∼n−1 标号&#xff0c;求起点 0 到终点 n−1 的最短 Hamilton 路径。 Hamilton 路径的定义是从 0 到 n−1 不重不漏地经过每个点恰好一次。 输入格式 第一行输入整数 n 。 接下来 n 行每行 n 个整数&#xff0c;其中第 i 行…
阅读更多...
网络基础（三）

网络基础（三）

网络层与数据链路层 1.网络层2.IP2.1 基本概念2.2 协议头格式2.3 网段划分2.4 特殊的IP地址2.5IP地址的数量限制2.6 私有IP地址和公网IP地址2.7 路由 3.数据链路层4.以太网&#xff08;MAC帧协议&#xff09;4.1 认识以太网4.2 以太网帧格式4.3 认识MAC地址4.4 对比理解MAC地址…
阅读更多...
51 -25 Scene as Occupancy 3D占用作为场景表示 论文精读

51 -25 Scene as Occupancy 3D占用作为场景表示 论文精读

本文阅读的文章是Scene as Occupancy&#xff0c;介绍了一种将物体表示为3D occupancy的新方法&#xff0c;以描述三维场景&#xff0c;并用于检测、分割和规划。 文章提出了OccNet和OpenOcc两个核心概念。 OccNet 3D占用网络是一种以多视图视觉为中心的方法&#xff0c;通过…
阅读更多...
14.0 Zookeeper环球锁实现原理

14.0 Zookeeper环球锁实现原理

全局锁是控制全局系统之间同步访问共享资源的一种方式。 下面介绍zookeeper如何实现全民锁&#xff0c;讲解他锁和共享锁两类全民锁。 排他锁 排他锁&#xff08;Exclusive Locks&#xff09;&#xff0c;又被称为写锁或独占锁&#xff0c;如果事务T1对数据对象O1加上排他锁…
阅读更多...
#免费 苹果M系芯片Macbook电脑MacOS使用Bash脚本写入(读写)NTFS硬盘教程

#免费 苹果M系芯片Macbook电脑MacOS使用Bash脚本写入(读写)NTFS硬盘教程

Mac电脑苹果芯片读写NTFS硬盘bash脚本 &#xff08;ntfs.sh脚本内容在本文最后面&#xff09; ntfs.sh脚本可以将Mac系统(苹果M系芯片)上的NTFS硬盘改成可读写的挂载方式&#xff0c;从而可以直接往NTFS硬盘写入数据。此脚本免费&#xff0c;使用过程中无需下载任何收费软件。…
阅读更多...
C#在既有数组中插入另一个数组：Array.Copy方法 vs 自定义插入方法

C#在既有数组中插入另一个数组：Array.Copy方法 vs 自定义插入方法

目录 一、使用的方法 1.使用Array.Copy方法 2.Copy(Array, Int32, Array, Int32, Int32) 3. 使用自定义的方法 二、实例 1.示例1&#xff1a;使用Array.Copy方法 2.示例2&#xff1a;使用自定义的方法 一、使用的方法 1.使用Array.Copy方法 首先定义了一个名为InsertAr…
阅读更多...
【 buuctf-面具下的 flag】

【 buuctf-面具下的 flag】

直接 binwalk 提取图片内容其中 zip 为伪加密&#xff08;如下图&#xff09;&#xff0c;在 macOS 上当我运行 binwalk -e 指令来提取图片中内容是&#xff0c;zip可以自动解压出来 flag.vmdk&#xff0c;不需要修改压缩源文件目录区的全局方式位标记值。 在 kali Linux 下&am…
阅读更多...
RabbitMQ-4.MQ的可靠性

RabbitMQ-4.MQ的可靠性

MQ的可靠性 4.MQ的可靠性4.1.数据持久化4.1.1.交换机持久化4.1.2.队列持久化4.1.3.消息持久化 4.2.LazyQueue4.2.1.控制台配置Lazy模式4.2.2.代码配置Lazy模式4.2.3.更新已有队列为lazy模式 4.MQ的可靠性 消息到达MQ以后&#xff0c;如果MQ不能及时保存&#xff0c;也会导致消…
阅读更多...
立足智能存取解决方案｜HEGERLS智能托盘四向车储存制动能量 实现能源回收

立足智能存取解决方案｜HEGERLS智能托盘四向车储存制动能量 实现能源回收

对于商业配送和工业生产的企业而言&#xff0c;如何能高效率、低成本进行低分拣、运输、码垛、入库&#xff0c;用以提升仓库空间的利用效率&#xff0c;是现在大多企业急需要解决的行业痛点。对此&#xff0c;为了解决上述痛点&#xff0c;近年来&#xff0c;物流仓储集成商、…
阅读更多...
docker常用10条容器操作命令

docker常用10条容器操作命令

Docker 中一些常用的容器操作命令&#xff0c;我们可以根据需要使用这些命令来管理和操作 Docker 容器。我们这次以Hell-world这个镜像为例来说明&#xff1a; 1. docker pull hello-world #拉取hell-world镜像 2. docker images # 查看本地拉取的镜像 3. docker run hello…
阅读更多...
【python】绘制爱心图案

【python】绘制爱心图案

以下是一个简单的Python代码示例&#xff0c;它使用turtle模块绘制一个代表爱和情人节的心形图案。 首先&#xff0c;请确保计算机上安装了Python和turtle模块。然后&#xff0c;将以下代码保存到一个.py文件中&#xff0c;运行它就可以看到爱心图案的绘制过程。 import turt…
阅读更多...
20240203在Ubuntu20.04.6下配置stable-diffusion-webui.git

20240203在Ubuntu20.04.6下配置stable-diffusion-webui.git

20240203在Ubuntu20.04.6下配置stable-diffusion-webui.git 2024/2/3 11:55 【结论&#xff1a;在Ubuntu20.04.6下&#xff0c;生成512x512分辨率的图像&#xff0c;大概需要11秒钟&#xff01;】 前提条件&#xff0c;可以通过技术手段上外网&#xff01;^_首先你要有一张NVID…
阅读更多...
2024清洁能源、环境与智慧城市国际研讨会(ISCEESC2024)

2024清洁能源、环境与智慧城市国际研讨会(ISCEESC2024)

2024清洁能源、环境与智慧城市国际研讨会(ISCEESC2024) 会议简介 2024年清洁能源、环境与智慧城市国际研讨会&#xff08;ISCEESC2024&#xff09;将在中国丽江举行。本次会议主要围绕清洁能源、环境和智慧城市等研究领域&#xff0c;旨在为该研究领域的专家学者提供一个国际…
阅读更多...
用云手机打造tiktok账号需要注意些什么？

用云手机打造tiktok账号需要注意些什么？

随着tiktok平台的火热&#xff0c;越来越多的商家开始尝试更高效的tiktok运营方法。其中&#xff0c;tiktok云手机作为一种新科技引起了很多人的注意&#xff0c;那么用云手机运营tiktok需要注意些什么&#xff1f;下文将对此进行详细解析。 1. 不是所有的云手机都适合做tiktok…
阅读更多...
【分享】如何运用数字I/O来保护继电器

【分享】如何运用数字I/O来保护继电器

1.简述 在开关系统中&#xff0c;短路或者是开路的情况下&#xff0c;由于存在着额外的电流或者是电压&#xff0c;继电器往往会过载。所有的继电器都有一个最大的承载电流和热切换功率&#xff0c;如果超出了这个范围&#xff0c;会增加继电器焊接在一起的风险&#xff0c;从…
阅读更多...
项目02《游戏-10-开发》Unity3D

项目02《游戏-10-开发》Unity3D

【完成本集功能后共享1-10集整套代码】 基于 项目02《游戏-09-开发》Unity3D &#xff0c; 任务&#xff1a;传送至其他场景&#xff0c; 首先在场景中加入传送门&#xff0c; 设置人物标签&#xff0c; using UnityEngine; using UnityEngine.SceneManagement; u…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023