echarts温度计

function mid_temp(data){
    var temperature;
    if(JSON.stringify(data)!="{}"){
        if(data.hasOwnProperty('total_train_info')){
            temperature =data.total_train_info[5].displayValue;
        }else{
            temperature="0.0℃";
        }
    }else{
        temperature="0.0℃";
    }
    var t= Number(temperature.replace('℃',''));
    var dom = document.getElementById('temp');
    var temp = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var params = {
        value: t,//数值
        title: "温度"
    };
    var app = {};
    var TP_value = params.value;
    var kd = [];
    var Gradient = [];
    var leftColor = '';
    var showValue = '';
    var boxPosition = [65, 0];
    var TP_txt = ''
    // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
    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 > 50) {
        TP_txt = '';
        Gradient.push({
                offset: 0,
                color: '#93FE94'
            }, {
                offset: 0.5,
                color: '#E4D225'
            },
            {
                offset: 1,
                color: '#E01F28'
            })
    } else if (TP_value >= 35) {
        TP_txt = '';
        Gradient.push({
            offset: 0,
            color: '#93FE94'
        }, {
            offset: 1,
            color: '#E4D225'
        })
    } else {
        TP_txt = '';
        Gradient.push({
            offset: 1,
            color: '#93FE94'
        })
    };
    leftColor = Gradient[Gradient.length - 1].color;
    // 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
    var option = {
        // backgroundColor: '#098',
        // backgroundColor: 'white',
        title: {
            text: params.title,
            textStyle: {
                color: "#8b8bd0",
                align: "center",
            },
            left: "45%",
        },
        grid: { // 控制图的大小，调整下面这些值就可以，
            left: "30%",
            top: "12%",
            bottom: "14%",
        },
        yAxis: [{
            show: false,
            data: [],
            min: 0,
            max: 135,
            axisLine: {
                show: false
            }
        }, {
            show: false,
            min: 0,
            max: 50,
        }, {
            type: 'category',
            data: ['', '', '', '', '', '', '', '', '', ''],
            position: 'left',
            offset: -80,
            axisLabel: { // 单位
                fontSize: 10,
                color: 'black'
            },
            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: (TP_value + 30),//这个改那个颜色刻度的
                label: {
                    normal: {
                        show: true,
                        position: boxPosition,
                        width: 20,
                        height: 100,
                        formatter: '{back| ' + TP_value + ' }{unit|°C}\n{downTxt|' + TP_txt + '}',
                        rich: {
                            back: {
                                align: 'center',
                                lineHeight: 50,
                                fontSize: 30,
                                fontFamily: 'digifacewide',
                                color: leftColor
                            },
                            unit: {
                                fontFamily: '微软雅黑',
                                fontSize: 15,
                                lineHeight: 50,
                                color: leftColor
                            },
                            downTxt: {
                                lineHeight: 50,
                                fontSize: 25,
                                align: 'center',
                                color: leftColor
                            }
                        }
                    }
                },
            }],

            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: 18,
            itemStyle: {
                normal: {
                    color: '#0C2E6D',
                    barBorderRadius: 50,
                }
            },
            z: 1
        }, {
            name: '外框',
            type: 'bar',
            xAxisIndex: 2,
            barGap: '-100%',
            data: [135],
            barWidth: 28,
            itemStyle: {
                normal: {
                    color: '#4577BA',
                    barBorderRadius: 50,
                }
            },
            z: 0
        }, {
            name: '圆',
            type: 'scatter',
            hoverAnimation: false,
            data: [0],
            xAxisIndex: 0,
            symbolSize: 38,
            itemStyle: {
                normal: {
                    color: '#93FE94',
                    opacity: 1,
                }
            },
            z: 2
        }, {
            name: '白圆',
            type: 'scatter',
            hoverAnimation: false,
            data: [0],
            xAxisIndex: 1,
            symbolSize: 50,
            itemStyle: {
                normal: {
                    color: '#0C2E6D',
                    opacity: 1,
                }
            },
            z: 1
        }, {
            name: '外圆',
            type: 'scatter',
            hoverAnimation: false,
            data: [0],
            xAxisIndex: 2,
            symbolSize: 60,
            itemStyle: {
                normal: {
                    color: '#4577BA',
                    opacity: 1,
                }
            },
            z: 0
        }, {
            name: '刻度',
            type: 'bar',
            yAxisIndex: 0,
            xAxisIndex: 3,
            label: {
                normal: {
                    show: true,
                    position: 'left',
                    distance: 20, // 刻度数据位置
                    color: '#ffffff',// 刻度数字颜色
                    fontSize: 14,
                    formatter: function (params) {
                        if (params.dataIndex > 130 || params.dataIndex < 10) {
                            return '';
                        } else {
                            if ((params.dataIndex - 10) % 20 === 0) {
                                return params.dataIndex - 30;//这个改刻度的，当减70的时候刻度是从-60开始不是从零开始
                            } else {
                                return '';
                            }
                        }
                    }
                }
            },
            barGap: '-100%',
            data: kd,
            barWidth: 1,
            itemStyle: {
                normal: {
                    color: '#f0f0f0', // 刻度线颜色
                    barBorderRadius: 120,
                }
            },
            z: 0
        }]
    };
    if(temperature!=temperatureLast){
        if (option && typeof option === 'object') {
            temp.setOption(option);
        };

        var boxPosition = [65, 0];
        temp.setOption({
            series: [
                {
                    data: [
                        {
                            value: params.value + 30,
                            label: {
                                normal: {
                                    show: true,
                                    position: boxPosition,
                                    width: 20,
                                    height: 100,
                                    formatter:
                                        "{back| " + params.value + " }{unit|°C}\n{downTxt|" + " " + "}",
                                    //formatter:  item.senValue ,
                                    rich: {
                                        back: {
                                            align: "center",
                                            lineHeight: 50,
                                            fontSize: 30,
                                            fontFamily: "digifacewide",
                                            color: leftColor,
                                        },
                                        unit: {
                                            fontFamily: "微软雅黑",
                                            fontSize: 15,
                                            lineHeight: 50,
                                            color: leftColor,
                                        },
                                        downTxt: {
                                            lineHeight: 50,
                                            fontSize: 25,
                                            align: "center",
                                            color: leftColor,
                                        },
                                    },
                                },
                            },
                            name: params.title,
                        },
                    ],
                },
            ],
        });
        temperatureLast=temperature;

    }

    window.addEventListener("resize", function (event) {
        temp.resize();
    })
};