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.rhkb.cn/news/252912.html

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

相关文章

时序预测 | Matlab实现基于LSTM长短期记忆神经网络的电力负荷预测模型

时序预测 | Matlab实现基于LSTM长短期记忆神经网络的电力负荷预测模型

文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 时序预测 | Matlab实现基于LSTM长短期记忆神经网络的电力负荷预测模型 LSTM（长短期记忆）是一种递归神经网络（RNN）的变体，它在序列数据建模方面表现出色。电力负荷预测是一项重要的任务，可以利用LSTM神经网络…
阅读更多...
【华为 ICT HCIA eNSP 习题汇总】——题目集13

【华为 ICT HCIA eNSP 习题汇总】——题目集13

1、以下在项目规划阶段中需要完成的工作是&#xff08;&#xff09;。 A、确定技术方案 B、了解项目背景 C、选择网络产品 D、规划 IP 地址 考点&#xff1a;网络规划与设计 解析&#xff1a;&#xff08;B&#xff09; 确定技术方案是在网络规划的设计阶段完成的工作&#xff…
阅读更多...
vue - 指令（一）

vue - 指令（一）

看文章可以得到什么&#xff1f; 1.可以快速的了解并会使用vue的指令 2.可以加深你对vue指令的理解&#xff0c;知道每个指令代表什么功能​​​​​​​ 目录 什么是vue的指令&#xff1f;​​​​​​​ vue常见指令的使用 v-html v-show v-if v-else 和v-else-…
阅读更多...
c#cad 创建-正方形（四）

c#cad 创建-正方形（四）

运行环境 vs2022 c# cad2016 调试成功 一、程序说明 创建一个正方形&#xff0c;并将其添加到当前活动文档的模型空间中。 程序首先获取当前活动文档和数据库&#xff0c;并创建一个编辑器对象。 然后&#xff0c;使用事务开始创建正方形的操作。获取模型空间的块表记录&a…
阅读更多...
「 CISSP学习笔记 」08. 安全运营

「 CISSP学习笔记 」08. 安全运营

该知识领域涉及如下考点&#xff0c;具体内容分布于如下各个子章节&#xff1a; 理解并遵守调查执行记录和监控活动执行配置管理 (CM)&#xff08;例如&#xff0c;预配、基线、自动化&#xff09;应用基本的安全操作概念应用资源保护执行事故管理执行和维护检测和预防措施实施…
阅读更多...
electron项目在内网环境的linux环境下进行打包

electron项目在内网环境的linux环境下进行打包

Linux需要的文件: electron-v13.0.0-linux-x64.zip appimage-12.0.1.7z snap-template-electron-4.0-1-amd64.tar.7z 下载慢或者下载失败的情况可以手动下载以上electron文件复制到指定文件夹下&#xff1a; 1.electron-v13.0.0-linux-x64.zip 复制到~/.cache/electron/目录下…
阅读更多...
百面嵌入式专栏（面试题）进程管理相关面试题1.0

百面嵌入式专栏（面试题）进程管理相关面试题1.0

沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇我们将介绍进程管理相关面试题 。 一、进程管理相关面试题 进程是什么？操作系统如何描述和抽象一个进程？进程是否有生命周期？如何标识一个进程？进程与进程之间的关系如何？Linux操作系统的进程0是什么？Linux操…
阅读更多...
简单的TcpServer（英译中）

简单的TcpServer（英译中）

目录 一、TCP socket API 详解1.1 socket()1.2 bind()1.3 listen()1.4 accept()1.5 connect 二、TcpServer&#xff08;英译中&#xff09;2.1 TcpServer.hpp2.2 TcpClient.cc2.3 Task.hpp2.4 Thread.hpp2.5 ThreadPool.hpp2.6 makefile2.7 Main.cc2.8 log.hpp2.9 Init.hpp2.10…
阅读更多...
vue3项目中的404页面

vue3项目中的404页面

vue3项目中的404页面 春节前的最后一篇技术博客了 写了不少vue项目&#xff0c;发现一直没有正确处理404页面。404页面的出现有这么几种可能&#xff1a; 错误输入了页面地址路由连接跳转时&#xff0c;某些路由已经不存在了&#xff0c;而程序员并没有正确处理 也就是说40…
阅读更多...
PDF文件格式（一）：交叉引用流

PDF文件格式（一）：交叉引用流

在PDF-1.5版本之前&#xff0c;对象的交叉引用信息是存储在交叉引用表(cross-reference table)中的。在PDF-1.5版本之后&#xff0c;引进了交叉引用流(cross-reference stream)对象&#xff0c;可以用它来存储对象的交叉引用信息&#xff0c;就像交叉引用表的功能一样。 采用交…
阅读更多...
小白代码审计入门

小白代码审计入门

最近小白一直在学习代码审计，对于我这个没有代码审计的菜鸟来说确实是一件无比艰难的事情。但是着恰恰应了一句老话：万事开头难。但是小白我会坚持下去。何况现在已经喜欢上了代码审计，下面呢小白就说一下appcms后台模板Getshell以及读取任意文件，影响的版本是2.0.101版本。…
阅读更多...
Pyhton专项进阶——http协议、cookie、session和认证-3

Pyhton专项进阶——http协议、cookie、session和认证-3

关于cookie的报文首部相关属性熟悉后&#xff0c;下面就是实际应用。 使用cookie实现用户登录验证&#xff08;初步&#xff09;&#xff1a; 思路&#xff08;一&#xff09;&#xff1a;显示登录页面&#xff0c;输入用户和密码&#xff0c;后端验证&#xff0c;如果验证通…
阅读更多...
【TCP】四次挥手（终止连接）

【TCP】四次挥手（终止连接）

前言 TCP&#xff08;传输控制协议&#xff09;是互联网协议&#xff08;IP&#xff09;中的一种重要传输层协议&#xff0c;用于在通信的计算机之间建立可靠的、有序的和错误校验的数据传输。在TCP连接中&#xff0c;数据传输是双向的&#xff0c;因此需要一种机制来开始和结…
阅读更多...
Mac上新版InfluxDB使用教程

Mac上新版InfluxDB使用教程

一、简介 官网&#xff1a;influxdb 二、influxdb安装 建议使用Homebrew在 macOS 上安装 InfluxDB v2&#xff1a; brew install influxdb启动influxdb服务&#xff1a;brew services start influxdb 停止influxdb服务&#xff1a;brew services stop influxdb 查看是否启…
阅读更多...
docker 运行jar包 指定配置文件

docker 运行jar包 指定配置文件

要在Docker中运行JAR包并指定配置文件&#xff0c;你可以创建一个Dockerfile来定义你的容器环境&#xff0c;并在其中指定如何运行JAR包和配置文件。下面是一个简单的例子&#xff0c;展示了如何在Dockerfile中设置这些配置&#xff1a; 第一步&#xff1a;创建 Dockerfile文件…
阅读更多...
《MySQL》超详细笔记

《MySQL》超详细笔记

目录 基本知识 主流数据库 数据库基本概念 MySQL启动 数据库基本命令 数据库 启动数据库 显示数据库 创建数据库 删除数据库 使用数据库 查询当前数据库信息 显示数据库中的表 导入数据库脚本 表 查看表的结构 查看创建某个表的SQL语句 数据库的查询命令 查询…
阅读更多...
人工智能(pytorch)搭建模型24-SKAttention注意力机制模型的搭建与应用场景

人工智能(pytorch)搭建模型24-SKAttention注意力机制模型的搭建与应用场景

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能(pytorch)搭建模型24-SKAttention注意力机制模型的搭建与应用场景&#xff0c;本文将介绍关于SKAttention注意力机制模型的搭建&#xff0c;SKAttention机制具有灵活性和通用性&#xff0c;可应用于计算机视…
阅读更多...
canvas缩放坐标系（scale)

canvas缩放坐标系（scale)

查看专栏目录 canvas实例应用100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…
阅读更多...
2024最新版鸿蒙HarmonyOS开发工具安装使用指南

2024最新版鸿蒙HarmonyOS开发工具安装使用指南

2024最新版鸿蒙HarmonyOS开发工具安装使用指南 By JacksonML 0. 什么是鸿蒙Harmony OS&#xff1f; 华为鸿蒙系统&#xff08;HUAWEI Harmony OS&#xff09;&#xff0c;是华为公司在2019年8月9日于东莞举行的华为开发者大会&#xff08;HDC.2019&#xff09;上正式发布的分…
阅读更多...
Java20：新特性

Java20：新特性

一&#xff1a;Lambda表达式&#xff1a; 1. Lambda表达式使用前后对比&#xff1a; 举类一&#xff1a; Testpublic void test(){ Runnable r1 new Runnable() {Overridepublic void run() {System.out.println("我爱北京天安门&#xff01;");} };r1.run();Syst…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023