echart 之实现温度计

Posted 2020-11-25 baimeishaoxia

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

这是我的实现结果

好了上代码
html：

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

js代码：

    <script>
            var myChart = echarts.init(document.getElementById("main"));
            var data = [50];
            var xMax = 80;
            var axisColor = ‘#fff‘;
            option = {
                tooltip: {
                    show: true,
                    formatter: "{b} <br> {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);
        </script>

js脚本的引入<script type="text/javascript" src="css/echarts.min.js">单文件引入