java温度计的实现_echart 之实现温度计

百度这个图表支持不是很好，有的需要自己写，看大神们实现温度计都是用水球特效实现的我这里雕虫小计啊但是满足我了我的项目需求特此分享出来，可惜自己不是专业的前端

这是我的实现结果

好了上代码

html：

js代码：

var myChart = echarts.init(document.getElementById("main"));

var data = [50];

var xMax = 80;

var axisColor = '#fff';

option = {

tooltip: {

show: true,

formatter: "{b}
{c}"

yAxis: [{

min:0,

max:70,

position:'left',

offset:-140,

axisTick: {

show: true,

// color:'#fff',

axisLine: {

show: false,

axisLabel: {

show: true,

formatter:function(value,index){

return value-20;

}

//color:'#fff',

splitLine: {

show: false,

// color:'#fff',

splitNumber :10,

}],

xAxis: [{

type: 'category',

data: ['温度'],

axisTick: {

// color:'#fff',

show: false,

axisLine: {

// color:'#fff',

show: false,

axisLabel: {

textStyle: {

color: '#fff',

}

}],

series: [{

name: ' ',

type: 'bar',

barWidth: 40,

silent: true,

itemStyle: {

normal: {

color: '#fdd',

barBorderRadius: [0, 0, 0, 0],

}

barGap: '-100%',

//barCategoryGap: '60%',

data: data.map(function(d) {

return xMax

}),

}, {

name: ' ',

type: 'bar',

barWidth: 40,

label: {

normal: {

show: true,

position: 'top',

formatter: function(o){

return o.value-30+'℃';

}

data: [{

value: 15+30,

itemStyle: {

normal: {

barBorderRadius: [0, 0, 0, 0],

color: {

type: 'bar',

colorStops: [{

offset: 0,

color: 'rgba(225,42,84,.3)' // 0% 处的颜色

}, {

offset: 1,

color: '#ffa800' // 100% 处的颜色

}],

globalCoord: false, // 缺省为 false

}

} ],

}]

};

myChart.setOption(option);

js脚本的引入

java温度计的实现_echart 之实现温度计相关推荐

用c语言编写热敏电阻温度计,基于51单片机的热敏电阻温度计的设计.doc
摘要随着科学技术的不断进步与发展,热敏电阻温度计已开始逐渐替代传统的玻璃水银体温计.温度控制系统在国内各行各业的应用虽然已经十分广泛,传统的温度控制方式,主要缺点是温度波动范围大,不能满足高精度, ...
k型热电偶材料_热电偶温度计的二三事
热电偶温度计是一种常见的接触式温度检测变送仪表,它由热电偶--感温元件.测量仪表--动圈仪表.电位差计或数显表及连接导线--铜导线&补偿导线这几部分组成. 热电偶温度计在应用方面有诸多优势,譬 ...
公交司机脚下热浪烫爆温度计
每天早晨各报新鲜出炉,新闻铺天盖地:"龙虎新闻中心媒体扫描"精挑细选,为您送上每份报纸当日精华--小编遍观今日64的<南京晨报>,A4版一条题为<公交司机脚下热浪 ...
智能温度计APP一键开发（快速搭建）
智能温度计APP开发,智能温度计APP一键开发,智能温度计APP快速搭建开发.智能温度计APP是一款相互配合智感体温计开发设计的幼儿健康助手手机软件,可精确的每时每刻的检测小孩的体温,完成对宝宝急速温 ...
2022年全球市场基础温度计总体规模、主要生产商、主要地区、产品和应用细分研究报告
本文研究全球市场.主要地区和主要国家基础温度计的销量.销售收入等,同时也重点分析全球范围内主要厂商(品牌)竞争态势,基础温度计销量.价格.收入和市场份额等.针对过去五年(2017-2021)年的历史情 ...
基于AT89C51单片机的温度计设计
点击链接获取Keil源码与Project Backups仿真图: https://download.csdn.net/download/qq_64505944/87773445 源码获取主要内容: ...
c52传感器温度显示c语言编程,基于STC89C52的数字温度计附C语言代码.doc
基于STC89C52的数字温度计附C语言代码 <数字显示温度计>论文学校: 华侨大学学院: 信息科学与工程学院班级:10级集成电路设计与集成系统组别: 自控06组组员:*** ...
2021年全球数字探针温度计行业调研及趋势分析报告
本文研究全球市场.主要地区和主要国家数字探针温度计的销量.销售收入等,同时也重点分析全球范围内主要厂商(品牌)竞争态势,数字探针温度计销量.价格.收入和市场份额等.针对过去五年(2016-2020)年 ...
液晶显示温度计电路设计解析_温度传感器电路
电路图简介: 本文介绍一种用DSl8820测温.用SMCl602A液晶来显示的新型温度计.该温度计较之其它数显式温度计,具有测量精度高.电路简单.易于观察的优点. 本文介绍一种用DSl8820测温.用 ...

java温度计的实现_echart 之实现温度计

java温度计的实现_echart 之实现温度计相关推荐

最新文章

热门文章