echarts(3.0)的基本使用(标签式导入)

Posted 2020-08-06 小小高

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