文章出處

function loadRainFallCharts(msg) {
        var obj = {};
        obj.x = [];
        obj.y = [];
        obj.line = [];
        var accumulation = 0;
        $(msg).each(function () {
            obj.x.push(this.datatime);
            obj.y.push(this.avgvalue);
            accumulation += this.avgvalue;
            obj.line.push(accumulation);
        });
        var myChart = echarts.init(document.getElementById('inThePast6hours_rainfall'));

        var option = {
            title: {
                text: '實時雨量曲線(過去6小時)',
                subtext: '',
                x: 'center',
                align: 'right'
            },
            legend: {
                data: ['時段降水', '累積降水'],
                x: 'left'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐標軸指示器,坐標軸觸發有效
                    type: 'shadow'        // 默認為直線,可選為:'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: obj.x.map(function (str) {
                        return str.replace(' ', '\n')
                    }),
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '雨量(mm)',
                    nameLocation: 'start',
                    inverse: true
                }
            ],
            series: [
                {
                    name: '時段降水',
                    type: 'bar',
                    barWidth: '60%',
                    data: obj.y
                }, {
                    name: '累積降水',
                    type: 'line',
                    stack: '廣告',
                    data: obj.line
                },
            ]
        };

        myChart.setOption(option);
    }

 依賴:http://files.cnblogs.com/files/gaocong/echarts.js


文章列表




Avast logo

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()