echarts-日历图

最新推荐文章于 2024-05-24 17:52:25 发布

hlytllbj

最新推荐文章于 2024-05-24 17:52:25 发布

阅读量2.2k

点赞数 2

分类专栏： echarts 文章标签： echarts3-0

本文链接：https://blog.csdn.net/hlytllbj/article/details/70255548

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Echarts实现日历图

一、首先引入echarts.js文件

    <script src="echarts.min.js"></script>

二、指定绘制图表的容器

 <div id="main" style="width: 700px;height:280px;"></div>

三、使用Echarts进行初始化

    var myChart = echarts.init(document.getElementById('main'));

四、配置参数，绘制日历图。

实现源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统一号_总表</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 700px;height:280px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        //提示框提示文本
        var schema = [
            {name: 'date', index: 0, text: '日期'},
            {name: 'telenumber', index: 1, text: '总话单数'},
            {name: 'telewholetime', index: 2, text: '总通话时长'},
            {name: 'telehightimes', index: 3, text: '峰值话务量'},
            {name: 'avgteletime', index: 4, text: '平均通话时长'},
            {name: 'use', index: 5, text: '员工使用率'},
            {name: 'connect', index: 6, text: '接通率'}
        ];

        // 随机生成虚拟数据
        function getVirtulData(year) {
            year = year || '2017';
            var date = +echarts.number.parseDate(year + '-01-01');
            var end = +echarts.number.parseDate(year + '-04-21');
            var dayTime = 3600 * 24 * 1000;
            var data = [];

            for (var time = date; time < end; time += dayTime) {
                var telenumber = Math.ceil(Math.random()*100);//总话单
                var telewholetime = Math.ceil(Math.random() *10)*telenumber;//总时长
                var telehightimes = Math.ceil(Math.random() *10);//峰值话务量
                var avgteletime = Math.ceil(telewholetime/telenumber);//平均通话时长
                var use = Math.random().toFixed(2);//员工使用率
                var connect = Math.random().toFixed(2);//接通率
                data.push([
                    echarts.format.formatTime('yyyy-MM-dd', time),telenumber,telewholetime,
                    telehightimes,avgteletime,use,connect
                ]);
            }
            return data;
        }

        var data = getVirtulData(2017);

        //指定图表的配置项
        option = {
            // backgroundColor: '#404a59',
            title: {
                top: 30,
                text: '2017年统一号通话信息',
                left: 'center',
                textStyle: {
                    color: '#000'
                }
            },
            tooltip : { 
                trigger: 'item',
                padding: 10,
                backgroundColor: '#222',
                borderColor: '#777',
                borderWidth: 1,
                formatter: function (obj) {
                    var value = obj.value;
                    return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                        + schema[0].text+'：' +value[0] 
                        + '</div>'
                        + schema[1].text + '：' + value[1] + '次<br>'
                        + schema[2].text + '：' + value[2] + '分钟<br>'
                        + schema[3].text + '：' + value[3] + '次<br>'
                        + schema[4].text + '：' + value[4] + '分钟<br>'
                        + schema[5].text + '：' + value[5] + '<br>'
                        + schema[6].text + '：' + value[6] + '<br>';
                }
            },
            legend: { 
                top: '40',
                left: '50',
                data:['话单数', 'Top 10'],
                textStyle: {
                    color: '#000'
                }
            },
            calendar: [{
                top: 100,
                left: 'center',
                range: ['2017-01-01', '2017-06-30'],
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#000',
                        width: 4,
                        type: 'solid'
                    }
                },
                   yearLabel: {
                    formatter: '{start}  1st',
                    textStyle: {
                        color: '#000'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#323c48',
                        borderWidth: 1,
                        borderColor: '#111'
                    }
                }
            }],
            series : [
                {
                    name: '话单数',
                    type: 'scatter',
                    coordinateSystem: 'calendar',
                    data: data,
                    symbolSize: function (val) {
                        return val[1]/5;
                    },
                    itemStyle: {
                        normal: {
                            color: '#ddb926'
                        }
                    }
                },
                {
                    name: 'Top 10',
                    type: 'effectScatter',
                    coordinateSystem: 'calendar',
                    data: data.sort(function (a, b) {
                        return b[1] - a[1];
                    }).slice(0, 10),
                    symbolSize: function (val) {
                        return val[1]/5;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    itemStyle: {
                        normal: {
                            color: '#f4e925',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    zlevel: 1
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>   
</body>
</html>