echart 之實現溫度計

百度這個圖表支持不是很好，有的須要本身寫，看大神們實現溫度計都是用 水球特效實現的我這裏雕蟲小計啊可是知足我了個人項目需求特此分享出來，惋惜本身不是專業的前端

這是個人實現結果

好了上代碼
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">單文件引入