华为鸿蒙编程js初试

可以预览：

htm的代码：

<div class="container"><div class="switch-block"><switch class="switch"showtext="{{ showText }}"texton="{{ textOn }}"textoff="{{ textOff }}"allow-scale="{{ allowScale }}"onchange="change"></switch></div><div class="chart-block"><text class="text-speed">利润</text><chart class="chart-data" type="line" ref="linechart" options="{{ lineOps }}" datasets="{{ lineData }}"></chart><text class="text-time">年份</text></div><div class="gauge-block"><chart class="data-gauge" type="gauge" percent="{{ percent }}"></chart></div><div class="bar-block"><text class="text-speed">销量</text><chart class="data-bar" type="bar" id="bar-chart" options="{{ barOps }}" datasets="{{ barData }}"></chart><text class="text-time">年份</text></div></div>

css的代码：

.container {flex-direction: column;justify-content: center;align-items: center;
}.title {font-size: 100px;
}
.switch-block {width: 98%;height: 50px;
}
.switch {text-padding: 10px; /* texton/textoff中最长文本两侧距离滑块边界的距离 */font-size: 12px;texton-color: #5F5F5F; /* 选中字体颜色 */textoff-color: #707070; /* 未选中字体颜色 */
}.chart-block, .gauge-block, .bar-block {position: relative;width: 98%;border-radius: 5px;background-color: #E3F8F9;
}
.text-speed{position: absolute;top: 10px;left: 20px;width: 10px;font-size: 10px;
}
.chart-data {margin: 10px 5px 10px;width: 100%;height: 100px;
}
.text-time {position: absolute;font-size: 10px;bottom: 2px;right: 10px;
}
.gauge-block, .bar-block {margin-top: 10px;
}
.data-gauge{width: 200%;height: 200px;margin: 10px 0 10px; /* 刻度条的宽度 */start-angle: 0; /* 起始角度 */total-angle: 360; /* 最大角度 */stroke-width: 20px;colors: #CF0A2C, #8477DF, #17A98E; /* 颜色 */weights: 3, 2, 1; /* 颜色占比权重 */
}
.data-bar {width: 100%;height: 200px;margin: 10px 5px 10px;
}

js代码：

export default {data: {interval: null, // 定时器对象showText: true, // 是否显示文本textOn: '动态',textOff: '静态',allowScale: true, // 文本尺寸跟随系统设置字体缩放dataLength: 5, // 数据长度barGroup: 3, // 柱状图组数lineData: null, // 线形图数据lineOps: { // 线形图样式xAxis: {min: 0,max: 5,display: true},yAxis: {min: 0,max: 100,display: true},series: {lineStyle: {width: '1px',smooth: true},headPoint: {shape: 'circle',size: 10,strokeWidth: 2,fillColor: '#ffffff',strokeColor: '#8477DF',display: true},loop: {margin: 2}}},percent: 100, // 量规图进度barData: [ // 柱状图数据{fillColor: '#CF0A2C',data: [2, 20, 99, 56, 23]},{fillColor: '#8477DF',data: [99, 88, 2, 67, 12]},{fillColor: '#17A98E',data: [56, 2, 77, 99, 78]}],barOps: { // 柱状图样式xAxis: {min: 0,max: 20,display: true,axisTick: 5},yAxis: {min: 0,max: 100,display: true}}},// 初始化onInit() {this.changeLine();},change(e) {if (e.checked) {this.interval = setInterval(() => {this.changeLine(); // 更新线形图数据this.changeGauge(); // 更新量规图数据this.changeBar(); // 更新柱状图数据}, 1000)} else {clearInterval(this.interval);}},
// 更新线形图数据changeLine() {var dataArray = [];for (var i = 0; i < this.dataLength; i++) {var nowValue = Math.floor(Math.random() * 99 + 1);var obj = {"value": nowValue, // Y坐标"description": nowValue + "", // 当前点的注释内容"textLocation": "top", // 注释内容位置"textColor": "#CDCACA", // 注释内容颜色"pointStyle": { // 节点形状"shape": "circle", // 形状"size": 5, // 形状大小"fillColor": "#CF0A2C", // 填充颜色"strokeColor": "#CF0A2C" // 边框颜色}};dataArray.push(obj);}this.lineData = [{strokeColor: '#17A98E', // 线的颜色data: dataArray,gradient: false,}]},
// 更新量规图数据changeGauge() {this.percent = parseInt(this.percent) >= 99 ? 0 : parseInt(this.percent) + 1;},
// 更新柱状图数据changeBar() {for (var i=0;i<this.barGroup;i++) {var dataArray = this.barData[i].data;for (var j=0;j<this.dataLength;j++) {dataArray[j] = Math.floor(Math.random() * 99 + 1);}}this.barData = this.barData.splice(0, this.barGroup + 1);}
}

华为鸿蒙编程js初试相关推荐

华为鸿蒙编程：如何显示网络图片
效果图代码使用第三方开源库Glide加载网络图片 Image image=(Image) findComponentById(ResourceTable.Id_image); Uri uri=Ur ...
华为鸿蒙是物联网操作系统；字节跳动的飞聊被 App Store 下架；FFmpeg 作者编写 JS 引擎 | 极客头条...
快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「CSDN 极客头条」,是从 CSDN 网站延伸至官方微信公众号的特别栏目,专注于一天业界事报道.风里雨里,我们将每天为朋友们,播报最新鲜有 ...
初学用于华为鸿蒙系统(HarmonyOS)的编程开发工具HUAWEI DevEco Studio：你好，鴻蒙~
本文是6月6日博文"初学用于华为鸿蒙系统(HarmonyOS)的编程开发工具HUAWEI DevEco Studio"的续篇. 成功通过华为开发者联盟的实名认证审核后,使用远程模拟 ...
华为鸿蒙操作系统关键特性解读
关注.星标公众号,直达精彩内容 1.计算机为什么需要操作系统? 大部分人认为,操作系统本来就是与计算机(IT设备)一体的.究竟计算机为什么需要操作系统?可能我们并不会去特意想这个问题. 其实,对于IT ...
华为鸿蒙2.0 pc,华为鸿蒙工具下载-华为鸿蒙v2.0正式电脑下载 - 91单机网
华为鸿蒙作为定制化的系统这两天应该霸屏了各个新闻专栏当中,作为华为自己的系统并且涉及到了方方面面,从手机到各类智能设备将全部的普及这个智能系统,并且在5G的加持之下真正的让万物进行互联,而不但仅之时智 ...
华为v3鸿蒙系统_【华为鸿蒙系统下载】华为鸿蒙系统 v3.3.5 官方最新版-趣致软件园...
华为鸿蒙系统是由华为自主研发的一款操作系统,华为鸿蒙系统能够完美兼容各种电脑系统,内置多种安全机制,支持国产CPU和各种软硬件,支持快速连接手机.pc.电视.汽车等各种智能设备,为用户创造了一个安全. ...
华为鸿蒙源码有多少,华为鸿蒙源码下载-华为鸿蒙下载v2.0 正式版-西西软件下载...
华为鸿蒙作为定制化的系统这两天应该霸屏了各个新闻专栏当中,作为华为自己的系统并且涉及到了方方面面,从手机到各种智能设备将全部的普及这个智能系统,并且在5G的加持之下真正的让万物进行互联,而不仅仅之时智 ...
华为鸿蒙系统HarmonyOS学习之十四：方舟编译器
华为鸿蒙系统HarmonyOS学习之十四:方舟编译器方舟编译器是华为自研的一个支持多种编程语言,多种芯片平台的联合编译编程平台,而经过方舟编译器编译适配后的APP,运行效率会大大提高,拥有更为流畅的 ...
鸿蒙系统下载地址_华为鸿蒙2.0系统下载-鸿蒙系统(HarmonyOS)下载 github源码版-当快软件园...
鸿蒙系统,英文名HarmonyOS,是由华为公司打造的,而华为鸿蒙2.0系统全新升级,这是一款基于微内核的面向全场景的分布式操作系统,它可以适配于智慧屏,是一款"面向未来"的操作系 ...

华为鸿蒙编程js初试

华为鸿蒙编程js初试相关推荐

最新文章

热门文章