Echarts温度计 原生

最新推荐文章于 2024-04-08 14:14:23 发布
最新推荐文章于 2024-04-08 14:14:23 发布
阅读量397 收藏
点赞数
文章标签： echarts javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44042792/article/details/121081367
版权

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>ECharts</title>

        <!-- 引入 echarts.js -->

        <script src="http://lib.baomitu.com/echarts/5.0.2/echarts.common.js""></script>

    </head>

    <body>

        <div id="main" style="width: 500px;height:500px;"></div>

        <script type="text/javascript">

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

            var TP_value = 40;

            var kd = [];

            var Gradient = [];

            var leftColor = '';

            var showValue = '';

            var boxPosition = [65, 0];

            var TP_txt = ''

            for(var i = 0, len = 135; i <= len; i++) {

                if(i < 10 || i > 130) {

                    kd.push('')

                } else {

                    if((i - 10) % 20 === 0) {

                        kd.push('-3');

                    } else if((i - 10) % 4 === 0) {

                        kd.push('-1');

                    } else {

                        kd.push('');

                    }

                }

            }

            //中间线的渐变色和文本内容

            if(TP_value > 20) {

                TP_txt = '温度偏高';

                Gradient.push({

                    offset: 0,

                    color: '#93FE94'

                }, {

                    offset: 0.5,

                    color: '#E4D225'

                }, {

                    offset: 1,

                    color: '#E01F28'

                })

            } else if(TP_value > -20) {

                TP_txt = '温度正常';

                Gradient.push({

                    offset: 0,

                    color: '#93FE94'

                }, {

                    offset: 1,

                    color: '#E4D225'

                })

            } else {

                TP_txt = '温度偏低';

                Gradient.push({

                    offset: 1,

                    color: '#93FE94'

                })

            }

            if(TP_value > 62) {

                showValue = 62

            } else {

                if(TP_value < -60) {

                    showValue = -60

                } else {

                    showValue = TP_value

                }

            }

            if(TP_value < -10) {

                boxPosition = [65, -120];

            }

            leftColor = Gradient[Gradient.length - 1].color;

            // 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10

            var option = {

                backgroundColor: '#0C2F6F',

                title: {

                    text: '温度计',

                    show: false

                },

                yAxis: [{

                    show: false,

                    data: [],

                    min: 0,

                    max: 135,

                    axisLine: {

                        show: false

                    }

                }, {

                    show: false,

                    min: 0,

                    max: 50,

                }, {

                    type: 'category',

                    data: ['', '', '', '', '', '', '', '', '', '', '°C'],

                    position: 'left',

                    offset: -80,

                    axisLabel: {

                        fontSize: 10,

                        color: 'white'

                    },

                    axisLine: {

                        show: false

                    },

                    axisTick: {

                        show: false

                    },

                }],

                xAxis: [{

                    show: false,

                    min: -10,

                    max: 80,

                    data: []

                }, {

                    show: false,

                    min: -10,

                    max: 80,

                    data: []

                }, {

                    show: false,

                    min: -10,

                    max: 80,

                    data: []

                }, {

                    show: false,

                    min: -5,

                    max: 80,

                }],

                series: [{

                    name: '条',

                    type: 'bar',

                    // 对应上面XAxis的第一个对)象配置

                    xAxisIndex: 0,

                    data: [{

                        value: (showValue + 70),

                        label: {

                            normal: {

                                show: true,

                                position: boxPosition,

                                backgroundColor: {

                                    image: ''",//文字框背景图

                                },

                                width: 200,

                                height: 100,

                                formatter: '{back| ' + TP_value + ' }{unit|°C}\n{downTxt|' + TP_txt + '}',

                                rich: {

                                    back: {

                                        align: 'center',

                                        lineHeight: 50,

                                        fontSize: 40,

                                        fontFamily: 'digifacewide',

                                        color: leftColor

                                    },

                                    unit: {

                                        fontFamily: '微软雅黑',

                                        fontSize: 15,

                                        lineHeight: 50,

                                        color: leftColor

                                    },

                                    downTxt: {

                                        lineHeight: 50,

                                        fontSize: 25,

                                        align: 'center',

                                        color: '#fff'

                                    }

                                }

                            }

                        }

                    }],

                    barWidth: 18,

                    itemStyle: {

                        normal: {

                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient)

                        }

                    },

                    z: 2

                }, {

                    name: '白框',

                    type: 'bar',

                    xAxisIndex: 1,

                    barGap: '-100%',

                    data: [134],

                    barWidth: 28,

                    itemStyle: {

                        normal: {

                            color: '#0C2E6D',

                            barBorderRadius: 50,

                        }

                    },

                    z: 1

                }, {

                    name: '外框',

                    type: 'bar',

                    xAxisIndex: 2,

                    barGap: '-100%',

                    data: [135],

                    barWidth: 38,

                    itemStyle: {

                        normal: {

                            color: '#4577BA',

                            barBorderRadius: 50,

                        }

                    },

                    z: 0

                }, {

                    name: '圆',

                    type: 'scatter',

                    hoverAnimation: false,

                    data: [0],

                    xAxisIndex: 0,

                    symbolSize: 48,

                    itemStyle: {

                        normal: {

                            color: '#93FE94',

                            opacity: 1,

                        }

                    },

                    z: 2

                }, {

                    name: '白圆',

                    type: 'scatter',

                    hoverAnimation: false,

                    data: [0],

                    xAxisIndex: 1,

                    symbolSize: 60,

                    itemStyle: {

                        normal: {

                            color: '#0C2E6D',

                            opacity: 1,

                        }

                    },

                    z: 1

                }, {

                    name: '外圆',

                    type: 'scatter',

                    hoverAnimation: false,

                    data: [0],

                    xAxisIndex: 2,

                    symbolSize: 70,

                    itemStyle: {

                        normal: {

                            color: '#4577BA',

                            opacity: 1,

                        }

                    },

                    z: 0

                }, {

                    name: '刻度',

                    type: 'bar',

                    yAxisIndex: 0,

                    xAxisIndex: 3,

                    label: {

                        normal: {

                            show: true,

                            position: 'left',

                            distance: 10,

                            color: 'white',

                            fontSize: 14,

                            formatter: function(params) {

                                if(params.dataIndex > 130 || params.dataIndex < 10) {

                                    return '';

                                } else {

                                    if((params.dataIndex - 10) % 20 === 0) {

                                        return params.dataIndex - 70;

                                    } else {

                                        return '';

                                    }

                                }

                            }

                        }

                    },

                    barGap: '-100%',

                    data: kd,

                    barWidth: 1,

                    itemStyle: {

                        normal: {

                            color: 'white',

                            barBorderRadius: 120,

                        }

                    },

                    z: 0

                }]

            };

            // 使用刚指定的配置项和数据显示图表。

            myChart.setOption(option);

        </script>

    </body>

</html>

锦坤！
关注
Echarts 实现温度计
朝花夕拾的博客
07-19 1607
【代码】Echarts 实现温度计。
原生js 使用echarts图表
PrimaryColor
04-30 1604
下载echarts.js，通过静态引入的方式，可以避免其他服务器出现故障时，无法使用引入目标js。 <scriptsrc="./echarts.js"></script> 下载链接：https://download.csdn.net/download/qq_42740797/18266829 渲染一个折线图，代码： <!DOCTYPE html> <html lang="en"> <head> <meta charse.
echarts 实现温度计
清心寡欲的博客
05-31 2765
echarts 实现温度计，动态加载温度数据，实现效果如下： 注意： 1.代码直接拷贝后缀名改为.html就可以运行了，注意在实际项目应用的时候 src="https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js" 要修改为项目中的echarts.min.js地址 2.方法setInterval，每1000ms动态生成的随机数据 <!-- THIS EXAMPLE WAS...
实时温度计(利用echarts)
11-01
利用echarts做的实时温度计，开始数量也可以设置为负数。
Echarts 做的温度计
飞翔༒之翼
07-04 4699
这个是参考的：https://blog.csdn.net/soldierofyou/article/details/82661263 这位大神是首发，谢谢了！我做了小小的调整 <html lang="en"> <head> <meta charset="UTF-8"> <title>温度计</title> <script ...
Echarts 实现温度计图标展示
qq_45567515的博客
05-01 2785
参考的:https://blog.csdn.net/soldierofyou/article/details/8266126 首先需要引入echarts.js function getChart(value) { var TP_value = value; var kd = []; var Gradient = []; var leftColor = ''; var showValue = ...
echarts温度计
syt5324165的博客
11-22 482
【代码】echarts温度计。
原生JS如何使用ECharts
我的学习之路
07-16 5364
前两天自己做了一个时间记录器，然后想到可以将事件所使用的时间生成图表，使用SVG或canvas来做感觉麻烦的不行，网上一查发现国内有现成的框架ECharts----有好轮子就要用。 在使用的过程中，我直接使用npm命令进行了安装 npm install echarts 然后根据教程走，遇到了require is undefine blabala的问题，发现是因为自己用的原生JavaScript，并且不是使用的Webpack. 解决问题很简单 在<head>标签内引入构建的echarts.js文件
echarts原生html可视化大屏幕
07-25
"echarts原生html可视化大屏幕"项目，就是利用ECharts这个强大的JavaScript数据可视化库，通过原生HTML代码实现的交互式大屏展示。 ECharts是由百度开发的一个开源的、基于HTML5 Canvas的图表库，支持多种图表类型...
echarts-gl.min.js
01-21
echarts-gl.js下载
关于vue 结合原生js 解决echarts resize问题
10-15
在Vue项目中，ECharts图表的resize问题常常...通过这种方式，我们利用Vue的响应式系统和原生JavaScript的MutationObserver解决了ECharts图表在页面布局变化时的resize问题，既保持了性能，又避免了不必要的第三方依赖。
（转载）echarts实现温度计
大橙子
02-21 8822
首先放上效果图 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;ECharts&lt;/title&gt; &lt;!-- 引入 echarts.js --&gt; &am
echarts实现温度计
YM_010530的博客
01-25 790
【代码】echarts实现温度计。
Echarts 温度计
soldierofyou的博客
09-12 8509
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8"&gt;         &lt;title&gt;ECharts&lt;/title&gt;         &lt;!-- 引入 echarts.js --&gt;         &lt;scri
使用React 18、Echarts和MUI实现温度计
最新发布
m0_73117087的博客
04-08 4377
在本文中，我们将结合使用`React 18`、`Echarts`和`MUI（Material-UI）`库，展示如何实现一个交互性的温度计
echarts的温度计 横竖温度计
qlin_11的博客
05-18 627
这几天写了一下这个温度计，主要是多个bar和scatter拼接而成。横竖的区分，是将x和y的坐标系内容进行替换，再serise里面讲xy的序号进行更改就可以。网上有博客，但介绍的都是竖着的。
echart 之实现温度计
weixin_33736832的博客
12-14 1821
百度这个图表支持不是很好，有的需要自己写，看大神们实现温度计都是用 水球特效实现的我这里雕虫小计啊但是满足我了我的项目需求特此分享出来，可惜自己不是专业的前端 这是我的实现结果 好了上代码html： <div id="main" style="width: 400px; height: 400px;"> js代码： ...
Echarts中使用水球类型liquidFill制作温度计
qq_39075021的博客
01-08 3312
一个简单的温度计，见下图： 1. 首先引入 ECharts 通过标签方式直接引入构建好的 echarts 文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.m...
React结合ECharts实现温度计组件
虚怀若愚
08-10 1648
文章目录需求分析实现效果npm版本和参考demo实现步骤温度计湿度计 需求分析 项目需要在监控主页动态监视房间内的温度和湿度，业主希望使用不同的颜色来区分不同的温湿度范围，其中温度范围-20℃ ~ 50℃，湿度范围0RH% ~ 100RH%。 实现效果 最终效果如下图所示： 其中温度范围渐变色从蓝色到红色，湿度范围渐变色从绿色到蓝色 npm版本和参考demo 项目采用Ant Design Pro V 2.0开发，所用的package版本如下： npm版本如下： "antd": "^3.26.18"
echarts柱图原生js复现
08-20
要使用原生JavaScript复现ECharts柱图，你需要先引入ECharts库，并创建一个DOM元素作为图表的容器。然后，使用JavaScript代码配置图表的数据和样式，最后将图表渲染到容器中。 以下是一个简单的示例代码，演示如何使用原生JavaScript复现ECharts柱图： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ECharts柱图原生JavaScript复现</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 创建图表容器 var chartContainer = document.getElementById('chart'); // 初始化图表实例 var chart = echarts.init(chartContainer); // 配置图表的数据和样式 var option = { title: { text: '柱图示例' }, xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: { type: 'value' }, series: [{ type: 'bar', data: [10, 20, 30, 40, 50] }] }; // 将配置应用于图表 chart.setOption(option); // 渲染图表 chart.resize(); </script> </body> </html> ``` 在上述示例中，我们首先引入了ECharts库的JavaScript文件，然后创建了一个id为"chart"的div作为图表容器。接下来，使用`echarts.init`方法初始化了一个图表实例，并通过`setOption`方法配置了图表的数据和样式。最后，调用`resize`方法将图表渲染到容器中。 你可以根据自己的需求修改示例代码中的数据和样式，来实现你想要的柱图效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值