echarts-map H5页面动态图表

<div id="main" style="height:300px;border:1px solid #ccc;"></div>
 
<script type="text/javascript">
    function GetDateStr(AddDayCount) {
        var dd = new Date();
        dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1;//获取当前月份的日期
        var d = dd.getDate();
        return m + "/" + d;
    }
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
    require.config({
        paths: {
            echarts: '/resources/js/echart/echarts-map',
            'echarts/chart/bar': '/resources/js/echart/echarts-map',
            'echarts/chart/line': '/resources/js/echart/echarts-map',
            'echarts/chart/map': '/resources/js/echart/echarts-map'
        }
    });

    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
    require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line',
                'echarts/chart/map'
            ],
            function (ec) {
                //--- 折柱 ---
                var myChart = ec.init(document.getElementById('main'));
                var today = GetDateStr(0);


                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params, ticket, callback) {
                            var res = params[0][1] + "  (月利率)";
                            for (var i = 0, l = params.length; i < l; i++) {
                                res += '<br/>' + params[i][0] + ' : ' + params[i][2] + '‰';
                            }
                            res = res + "<br/><span style='color:#FFCC00'>" + "*以上数据由青岛蓝海民间融资登记服务中心每天实时提供" + "</span>";
                            return res;
                        }
                    },
                    legend: {
                        data: ['中心利率']
                    },
                    toolbox: {
                        show: true,
//                                    x: 'center',
//                                    y: 'bottom',
                        color: ['#4488bb', '#35a7a7'],
                        feature: {
                            magicType: {show: true, type: ['line', 'bar']},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,

                    xAxis: [
                        {
                            type: 'category',

                            data: ['05/15', '05/15', '05/15', '05/15', '05/15', '05/15', '05/15', '05/15']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',

                            splitArea: {
                                show: true,
                            },
                            max: 10,
                            min: 3,
                            precision: 2
                        }
                    ],
                    series: [

                        {
                            name: '中心利率',
                            type: 'line',
                            itemStyle: {
                                normal: {
                                    color: '#f87341'
                                }
                            },
                            data: [5.4, 6.4, 5.5, 5.6, 5.7, 6.3, 7.3, 8.4]
                        }

                    ]
                })
                ;


            }
    );
</script>
 

猜你喜欢

转载自blog.csdn.net/qingdaoxdd/article/details/79454164
今日推荐