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


    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(' ', '
    ')
                        }),
                        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

  • 相关阅读:
    MySQL数据库的基本操作命令
    autoCAD2014安装过程
    网站降权与恢复
    移动站的优化技巧
    Robots.txt详解
    友情链接交换技巧
    网站日志分析
    seo-网站内容的创建与优化
    网站外链的建设技巧
    网站内链优化
  • 原文地址:https://www.cnblogs.com/gaocong/p/5832864.html
Copyright © 2020-2023  润新知