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>