Vue中使用echarts实现温度计

原创

已于 2022-02-28 09:05:11 修改 · 置顶 · 5.6k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#数据可视化 #前端 #echarts #html

于 2020-10-19 14:16:11 首次发布

感谢大佬提供思路，稍加修改实现了需求

实现效果：
在这里插入图片描述

echarts使用说明请查看：Vue中使用echarts实现常用图表总结

html中直接使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 80px;height: 180px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var TP_value = 20.3;
    var kd = [];
    var Gradient = [];
    var leftColor = '';
    var showValue = '';
    var boxPosition = [65, 0];
    var TP_txt = ''
    // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
    for (let i = 0, len = 60; i <= len; i += 1) {
     
     
        if (i < 10) {
     
     
            kd.push('');
        } else if ((i - 10) % 10 === 0) {
     
     
            kd.push(<