echart 新手踩坑

儀表盤踩坑

我採用的是單文件引入的方式來加載echarts圖標也可使用配置等方式詳情參考文檔，若是同窗們要作出更加豐富的樣式請參考文檔配置手冊
配置手冊：http://echarts.baidu.com/opti...
引入js文件已經配置 echart圖表環境文檔：http://echarts.baidu.com/tuto...

下面上代碼
html代碼

<div id="main" style="width: 350px;height:350px; float: left;"></div>
        <div id="main1" style="width: 350px;height:350px; float: left;"></div>
        <div id="main2" style="width: 350px;height:350px; float: left;"></div>
        <div id="main3" style="width: 350px;height:350px; margin-top: 20px; float: left;"></div>
        <div id="main4" style="width: 350px;height:350px; margin-top: 20px; float: left;"></div>

JS代碼

<script type="text/javascript">
            $(function() {
                all();

            });

            //溫度
            function char_update_tem(datas) {
                var myChart = echarts.init(document.getElementById('main'));

            }

            //氣壓
            function chart_update_pre(data) {
                var myChart = echarts.init(document.getElementById('main2'));
                var option = {
                    tooltip: {
                        formatter: "{b} : {c}"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {
                                show: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            },
                            dataView: {
                                show: false
                            }
                        }
                    },
                    series: [{
                        name: '氣壓',
                        type: 'gauge',
                        radius: '50%',
                        min: 550,
                        max: 1050,
                        detail: {
                            formatter: '{value}',
                            fontSize: 3,
                        },
                        //錶盤
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 8
                            }
                        },
                        //分隔線
                        splitLine: {
                            show: true,
                            length: 8
                        },

                        axisTick: {
                            show: true,
                        },
                        axisLabel: {
                            show: true,
                            fontSize: 1,

                        },
                        itemStyle: {
                            normal: {
                                color: 'auto'
                            }
                        },
                        pointer: {
                            lenght: '20%',
                            width: 5
                        },
                        detail: {
                            formatter: '{value}',
                            backgroundColor: 'rgba(0,0,0,0)',
                            borderWidth: 0,
                            fontFamily: 'Courier New',
                            fontSize: 10,
                            borderColor: '#ccc',
                            width: 60,
                            height: 50,
                            offsetCenter: [0, 50],
                        },
                        data: [{
                            value: data,
                            name: '氣壓',

                        }]
                    }]
                };

                myChart.setOption(option);
            }

            //風向
            function char_update_wind(data) {
                var myChart = echarts.init(document.getElementById('main1'));
                // 指定圖表的配置項和數據
                option = {
                    tooltip: {
                        formatter: "{b} : {c}"
                    },
                    toolbox: {
                        feature: {
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [{
                        name: '風向',
                        type: 'gauge',
                        radius: "50%",
                        min: 0,
                        max: 360,
                        splitNumber: 20,
                        startAngle: 90,
                        endAngle: -270,
                        precision: 0,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                                shadowBlur: 5,

                            },
                            opacity: 0.5
                        },
                        splitLine: {
                            length: 2
                        },
                        axisTick: {
                            show: true,
                            length: 4
                        },
                        axisLabel: { // 座標軸文本標籤，詳見axis.axisLabel
                            show: true,
                            formatter: function(v) {
                                switch(v + '') {
                                    case '360':
                                        return '北';
                                    case '90':
                                        return '東';
                                    case '180':
                                        return '南';
                                    case '270':
                                        return '西';
                                    default:
                                        return '';
                                }
                            },

                            textStyle: { // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
                                color: '#333'
                            }
                        },
                        detail: {
                            formatter: '{value}',
                            backgroundColor: 'rgba(0,0,0,0)',
                            borderWidth: 0,
                            fontFamily: 'Courier New',
                            fontSize: 10,
                            borderColor: '#ccc',
                            width: 60,
                            height: 50,
                            offsetCenter: [0, 10],
                        },
                        itemStyle: {
                            normal: {
                                color: 'auto'
                            }
                        },
                        pointer: {
                            lenght: '15%',
                            width: 5
                        },
                        data: [{
                            value: data,
                            name: '風向'
                        }]
                    }]
                };

                myChart.setOption(option);
            };

            //風速
            function char_update_wind_speed(data) {
                var myChart = echarts.init(document.getElementById("main3"));
                var option = {
                    tooltip: {
                        formatter: "{b} : {c}"
                    },
                    toolbox: {
                        feature: {
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [{
                        type: 'gauge',
                        radius: '50%',
                        startAngle: 180,
                        endAngle: 0,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                                shadowBlur: 10,

                            },
                            opacity: 0.5
                        },
                        splitLine: {
                            length: 10
                        },
                        axisTick: {
                            length: 4
                        },
                        pointer: {
                            lenght: '20%',
                            width: 5
                        },
                        detail: {
                            formatter: '{value}',
                            backgroundColor: 'rgba(0,0,0,0)',
                            borderWidth: 0,
                            fontFamily: 'Courier New',
                            fontSize: 5,
                            borderColor: '#ccc',
                            width: 60,
                            height: 50,
                            offsetCenter: [0, 5],
                        },
                        data: [{
                            value: data,
                            name: '風速'
                        }]
                    }]
                };

                myChart.setOption(option);
            }

            function chart_update_rain(data) {
                var myChart = echarts.init(document.getElementById("main4"));
                var option = {
                    tooltip: {
                        formatter: "{a} <br/>{b} : {c}"
                    },
                    series: [{
                        type: 'gauge',
                        radius: '55%',
                        splitNumber: 10, // 分割段數，默認爲5
                        startAngle: 180,
                        endAngle: 0,
                        axisLine: { // 座標軸線
                            show: true,
                            lineStyle: {
                                width: 40,

                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                                shadowBlur: 10,

                            },
                            opacity: 0.5
                        },
                        axisTick: { // 座標軸小標記
                            show: false,
                            splitNumber: 10, // 每份split細分多少段
                            length: 20, // 屬性length控制線長

                        },
                        axisLabel: { // 座標軸文本標籤，詳見axis.axisLabel
                            formatter: function(e) {

                            },
                            textStyle: { // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
                                color: 'auto'
                            }
                        },
                        splitLine: { // 分隔線
                            show: false, // 默認顯示，屬性show控制顯示與否
                            length: 30, // 屬性length控制線長
                            lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
                                color: 'auto'
                            },
                            opcity: 0.2
                        },
                        pointer: {
                            width: 5,
                            length: '90%',
                            color: 'rgba(112, 135, 255, 0.8)'
                        },
                        title: {
                            show: true,
                            offsetCenter: [0, '-40%'], // x, y，單位px
                            textStyle: { // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
                                fontWeight: 'bolder'
                            }
                        },
                        detail: {
                            formatter: '{value}',
                            backgroundColor: 'rgba(0,0,0,0)',
                            borderWidth: 0,
                            fontFamily: 'Courier New',
                            fontSize: 5,
                            borderColor: '#ccc',
                            width: 60,
                            height: 50,
                            offsetCenter: [0, -40],
                        },
                        data: [{
                            value: data,
                            name: '雨量'
                        }]
                    }]
                };
                myChart.setOption(option);
            }
    function all() {
                var user = jQuery.readCookie('user');
                var auth = jQuery.readCookie('auth');
                $.ajax({
                    type: "get",
                    url: "/inn/sensor/current.cgi?req=256,257,258,259,260,261&id=201728&sessionid=user:" + user + "%20auth:" + auth,
                    async: true,
                    dataType: 'json',
                    success: function(data) {
                        for(var i = 0; i < data.length; i++) {
                            var val = data[i].type;
                            switch(data[i].type) {
                                case "256":
                                    char_update_tem();
                                    break;
                                case "257":
                                    //test(data[0].value);
                                    break;
                                case "258":
                                    char_update_wind_speed(data[2].value);
                                    break;
                                case "259":
                                    char_update_wind(data[3].value);
                                    break;
                                case "260":
                                    chart_update_pre(data[4].value / 100);
                                    break;
                                case "261":
                                    chart_update_rain(data[5].value);
                                    break;
                                default:
                                    break;
                            }
                        }

                        //chart_update(data);
                    }
                });

            }
            // 基於準備好的dom，初始化echarts實例
        </script>