echarts 日历项目整理

最新推荐文章于 2024-12-15 23:33:06 发布
最新推荐文章于 2024-12-15 23:33:06 发布
阅读量335 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42489210/article/details/118113640
版权

 

我的 echarts 

//公用样式定义
var cw = document.body.clientHeight / 70;
var textStyle = {
    fontSize: cw,
    color: "#c1f0fe",
}
var axisLabel = {
    show: true,
    textStyle: {
        fontSize: cw,
        color: "#c1f0fe"
    }
}
var axisLine = {
    lineStyle: {
        color: "#253769",
    }
}
var lineStyle = {
    color: "#253769",
}

    // 上报分部情况的 echares
    function shangBaoEcharts(obj) {
        var shangbao = document.getElementById('shangbao');
        var shangbaoChart = echarts.init(shangbao);
        var option;

        option = {
            color: ['#00a9f0', '#d08211', '#95004a'],
            legend: {   // 图例 legend
                data: ['无效问题', '重点问题', '环境问题'],
                right: '2%',
                top: '2%',
                itemWidth: 2,
                itemHeight: 12,
                textStyle: {
                    fontSize: cw,
                    color: '#d4edf9'
                },
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                name: '区县',
                nameTextStyle: {//y轴上方单位的颜色
                    color: '#c1f0fe'
                },
                axisLine: axisLine,
                axisTick: {
                    show: true,
                    inside: true
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        fontSize: cw,
                        color: "#a8b8dd"
                    },
                    formatter: function (value) {
                        var ret = "";//拼接加\n返回的类目项
                        var maxLength = 2;//每项显示文字个数
                        var valLength = value.length;//X轴类目项的文字个数
                        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                        if (rowN > 3)//如果类目项的文字大于3,
                        {
                            for (var i = 0; i < rowN; i++) {
                                var temp = "";//每次截取的字符串
                                var start = i * maxLength;//开始截取的位置
                                var end = start + maxLength;//结束截取的位置
                                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                temp = value.substring(start, end) + "\n";
                                ret += temp; //凭借最终的字符串
                            }
                            return ret;
                        }
                        else {
                            return value.split("").join("\n");
                        }
                    }
                },
                data: obj.cityArr
            },
            yAxis: {
                name: '数量（个）',
                nameTextStyle: {//y轴上方单位的颜色
                    color: '#c1f0fe'
                },
                axisTick: { //y轴刻度线
                    show: false
                },
                splitLine: {
                    show: false
                },
                type: 'value',
                axisLabel: axisLabel,
                axisLine: axisLine,
                minInterval: 1//只显示整数
            },
            grid: {
                left: '10%',
                right: '12%',
                bottom: 0,
                top: '20%',
                containLabel: true
            },
            series: [
                {
                    name: '无效问题',
                    type: 'bar',
                    stack: '1',
                    barWidth: 10,
                    data: obj.wuXiaoArr,
                    barWidth: 10,
                },
                {
                    name: '重点问题',
                    type: 'bar',
                    stack: '1',
                    barWidth: 10,
                    data: obj.zhongDianArr
                },
                {
                    name: '环境问题',
                    type: 'bar',
                    barWidth: 10,
                    stack: '1',
                    data: obj.huanJingArr
                }
            ]
        };
        option && shangbaoChart.setOption(option);
    }

别人的项目的日历

 

var option = {
        tooltip: {
            position: "top",
        },

        visualMap: {
            min: 0,
            max: 350,
            type: "piecewise",
            orient: "horizontal",
            // x: "right",
            right: "3%",
            y: "bottom",
            textStyle: {
                color: "#fff",
            },
            pieces: [
                { min: 300, label: "严重污染", color: "#a61134" }, // 不指定 max，表示 max 为无限大（Infinity）。
                { min: 201, max: 300, label: "重度污染", color: "#c13a78" },
                { min: 151, max: 200, label: "中度污染", color: "#bf2f25" },
                { min: 101, max: 150, label: "轻度污染", color: "#c35d1f" },
                { min: 51, max: 100, label: "良", color: "#a5a249" },
                { min: 0, max: 50, label: "优", color: "#6fc190" }, // 不指定 min，表示 min 为无限大（-Infinity）。
            ],
        },
        calendar: [
            {
                orient: "vertical",
                yearLabel: {
                    show: false,
                },
                dayLabel: {
                    firstDay: 1,
                    color: "#afd9ff",
                    nameMap: ["日", "一", "二", "三", "四", "五", "六"],
                    lineHeight:3*cw,
                    padding:0,
                    margin:0,
                    fontSize:1.2*cw,
                },
                monthLabel: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "red",
                        width: 0,
                        type: "solid",
                    },
                },
                itemStyle: {
                    normal: {
                        color:"rgba(1,38,133,0.15)",
                        borderWidth: 1,
                        borderColor: "rgb(3,44,84)",
                    },
                },
                top:"14%",
                left: "3%",
                right: "3%",
                bottom: "12%",
                cellSize: "auto",
                range: "", // 格式：yyyy-MM
            },
        ],
        series: [
            {
                type: "heatmap",
                coordinateSystem: "calendar",
                calendarIndex: 0,
                label: {
                    show: true,
                    formatter: function (params) {
                        var d = echarts.number.parseDate(params.value[0]);
                        return "{n|" + d.getDate() + "}   {v|" + params.value[1] + "}";
                    },
                    rich: {
                        n: {
                            fontSize: 12,
                        },
                        v: {
                            fontSize: 16,
                            fontWeight: "bold",
                        },
                    },
                },
                tooltip: {
                    formatter: function (params) {
                        const day = echarts.number.parseDate(params.value[0]).getDate();

                        return (
                            `${day}日<br />` +
                            params.marker +
                            "AQI: " +
                            params.value[1].toFixed(2)
                        );
                    },
                },
                data: [],
            },
        ],
    };

 邯郸项目的 日历

function pollution_calendar (){

    var cw = document.body.clientHeight / 70;
    var textStyle = {
        color: "#fff",
        fontSize: "12px",
    };
    var axisLabel = {
        show: true,
        textStyle: {
            color: "#fff",
        },
    };
    var axisLine = {
        lineStyle: {
            color: "rgba(112,145,127,0)", //左边线的颜色
        },
    };

    var myChart = echarts.init(document.getElementById("pollution_calendar"));
    var dateList = [
        ['2017-3-1', '100'],
        ['2017-3-2', '200'],
        ['2017-3-3', '300'],
        ['2017-3-4', '400'],
        ['2017-3-5', '500',],
        ['2017-3-6', '100'],
        ['2017-3-7', '200'],
        ['2017-3-8', '300'],
        ['2017-3-9', '400'],
        ['2017-3-10', '500'],
        ['2017-3-11', '100'],
        ['2017-3-12', '200'],
        ['2017-3-13', '300'],
        ['2017-3-14', '400'],
        ['2017-3-15', '5'],
        ['2017-3-16', '6'],
        ['2017-3-17', '7'],
        ['2017-3-18', '8'],
        ['2017-3-19', '9'],
        ['2017-3-20', '10',],
        ['2017-3-21', '1'],
        ['2017-3-22', '3'],
        ['2017-3-23', '2'],
        ['2017-3-24', '4'],
        ['2017-3-25', '5'],
        ['2017-3-26', '6'],
        ['2017-3-27', '7'],
        ['2017-3-28', '9'],
        ['2017-3-29', '8'],
        ['2017-3-30', '10'],
        ['2017-3-31', '12'],
    ];

    var heatmapData = [];
    var lunarData = [];
    for (var i = 0; i < dateList.length; i++) {
        heatmapData.push([
            dateList[i][0],
            Math.random() * 300
        ]);
        lunarData.push([
            dateList[i][0],
            dateList[i][1],
        ]);
    }

    console.log(lunarData, 'lunarData = [];')

    var option = {
        tooltip: {
            position: "top",
            formatter: function (params) {
                // return '降雨量: ' + params.value[1].toFixed(2);
                // var Xindex = params.value[0];  // 获取时间
                var time = '<span>时间：</spa>' + params.value[0] + '<br/>'
                var data = params.marker +  Number(params.value[1])
                return time + data
            }
        },

        visualMap: {
            show: false,
            min: 0,
            max: 350,
            type: "piecewise",
            orient: "horizontal",
            // x: "right",
            right: "3%",
            y: "bottom",
            calculable: true,
            // seriesIndex: [2],
            left: 'center',
            bottom: 20,
            pieces: [
                { min: 300, label: "严重污染", color: "#a61134" }, // 不指定 max，表示 max 为无限大（Infinity）。
                { min: 201, max: 300, label: "重度污染", color: "#c13a78" },
                { min: 151, max: 200, label: "中度污染", color: "#bf2f25" },
                { min: 101, max: 150, label: "轻度污染", color: "#c35d1f" },
                { min: 51, max: 100, label: "良", color: "#a5a249" },
                { min: 0, max: 50, label: "优", color: "#6fc190" }, // 不指定 min，表示 min 为无限大（-Infinity）。
            ],
            // inRange: {
            //     color: ['#e0ffff', '#006edd'],
            //     opacity: 0.3
            // },
            // controller: {
            //     inRange: {
            //         opacity: 0.5
            //     }
            // }
        },

        calendar: [{
            top: "10%",
            left: "4%",
            right: "4%",
            bottom: "1%",
            cellSize: "auto",
            yearLabel: {show: false},
            orient: 'vertical',
            dayLabel: {
                firstDay: 1, // 一周从周几开始，默认从周日开始
                color: "#afd9ff",
                nameMap: ["日", "一", "二", "三", "四", "五", "六"],
                fontSize:1.2*cw,
                padding:0,
                margin:0,
                lineHeight:3*cw,
            },
            monthLabel: {
                show: false
            },
            range: '2017-03'
        }],

        series: [
            {
                type: 'heatmap',
                // name: '降雨量',
                coordinateSystem: 'calendar',
                // symbolSize: 1,
                label: {
                    show: true,
                    formatter: function (params) {
                        // console.log(params.value, 'params')
                        var d = echarts.number.parseDate(params.value[0]);
                        // return d.getDate() + '\n\n' + params.value[2] + '\n\n';
                        return d.getDate();
                    },
                    color: '#fff',
                    fontSize:1.2*cw,
                    fontFamily: 'Furore'
                    // rich: {
                    //     n: {
                    //         fontSize: 12,
                    //     },
                    //     v: {
                    //         fontSize: 14,
                    //         fontFamily: "Furore",
                    //     },
                    // },
                },
                data: lunarData
            },
            // {
            //     type: 'scatter',
            //     coordinateSystem: 'calendar',
            //     symbolSize: 1,
            //     label: {
            //         show: true,
            //         formatter: function (params) {
            //             return '\n\n\n' + (params.value[3] || '');
            //         },
            //         fontSize: 14,
            //         fontWeight: 700,
            //         color: '#a00'
            //     },
            //     data: lunarData
            // },
            // {
            //     name: '降雨量',
            //     type: 'heatmap',
            //     coordinateSystem: 'calendar',
            //     data: heatmapData
            // }
         ]
    };

    option && myChart.setOption(option);
}

 

PyEcharts 基本图表之日历图
m0_62222486的博客
06-24 677
将日历图组件的位置设置为距顶部 120 像素，距左侧 30 像素，距右侧 30 像素；将日历图名称设置为“2020年步数情况”并使其位置距上侧 30 像素，左右居中；将日历坐标范围设置为 2020 年，并使用中文坐标轴标记星期以及月份；平台会运行你编写的代码进行绘图，并与预期图片进行比对。将日历图画布设置为宽 1600 像素，高 350 像素；将日历坐标范围设置为 2020 年，并设置其不显示；最大值设置为 30000 ，最小值设置为 500；最大值设置为 30000 ，最小值设置为 500；
Vue2+ECharts打造任务管理与日历视图系统：完整实现与代码讲解》 《前端实战教程：用Vue和ECharts构建任务管理与日历视图功能》 《如何用Vue2实现复杂的任务管理系统（含日历视图）》V
南北极之间
11-20 592
Vue2+ECharts打造任务管理与日历视图系统：完整实现与代码讲解》 《前端实战教程：用Vue和ECharts构建任务管理与日历视图功能》 《如何用Vue2实现复杂的任务管理系统（含日历视图）》 《Vue2+ECharts构建任务管理与优先级分类系统》 《前端项目实战：Vue2日历视图与任务管理系统开发指南》Vue2+ECharts打造任务管理与日历视图系统：完整实现与代码讲解》 《前端实战教程：用Vue和ECharts构建任务管理与日历视图功能》 《如何用Vue2实现复杂的任务管理系统（含日历视图）》
echarts 日历图
give it a try
06-04 1234
下定决心，好好过一天 ~ var app = {}; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; var cellSize = [80, 80]; var pieRadius = 30; function getVirtulData() { //获得随机数据 var date = +echarts.number.parseDate('20
Echarts：有趣的calendar-实现日历图
前端御书房
11-20 2923
其中比较有趣的就是calendar，calendar是一个坐标系，这个坐标系与一般的直角坐标系不同，日历坐标系是根据日历的布局来显示数据，显示的具体的形状由series中设置的类型决定，对于日历坐标系的应用一些网站已经使用，github上的贡献统计就有根据每天的上传的代码显示不同的颜色，csdn中的成就页面中也有显示。Echarts是一个开源的可视化图表库，支持丰富的图表，官网中还有大量示例可以选择使用、参考。就类似于上图的效果，今天就来实现一下。然后，创建数据，数据比较多使用函数创建。
echarts属性之calendar
lotte
10-29 1091
在ECharts中，我们非常有创意地实现了日历图，是通过使用日历坐标系组件来达到日历图效果的，如下方的几个示例图所示，我们可以在热力图、散点图、关系图中使用日历坐标系。在日历坐标系可以水平放置，也可以垂直放置。用于设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略）。另外，日历上的『月份』和『星期几』的文字，也可以较方便的切换中英文，甚至自定义。灵活利用 echarts 图表和坐标系的组合，以及 API，可以实现更丰富的效果。
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 9318
未完
Vue2移动端实战：从零开发Todo任务管理App | 新手入门必看】 【Vue2+Element UI移动应用开发：Todo清单App完整教程 | 附源码】 【一篇搞定移动端Vue开发：Todo应用
南北极之间
12-15 407
Vue2移动端实战：从零开发Todo任务管理App | 新手入门必看】 【Vue2+Element UI移动应用开发：Todo清单App完整教程 | 附源码】 【一篇搞定移动端Vue开发：Todo应用实战教程 | 适合前端初学者】 【Vue2移动端项目实战：5小时开发一个高颜值Todo应用 | 零基础入门】 【Vue2移动端Todo应用开发实战：新手友好的完整教程 | UI设计+功能实现】Vue2移动端实战：从零开发Todo任务管理App | 新手入门必看】 【Vue2+Element UI移动应用开发：T
全网最新-VUE甘特图
weixin_43891314的博客
11-07 4465
根据时间展示不同状态的甘特图,全网最新最简单
【Python数据分析与可视化】期末复习笔记整理（不挂科）
风口IT猪的成长录
12-13 7837
【Python数据分析与可视化】期末复习笔记3. NumPy数值计算基础忘了的函数ndarray 对象属性和数据转换4. Pandas统计分析 3. NumPy数值计算基础 忘了的函数 linspace(start, end, count)：创建等差数列 logspace(start, end, count)：创建等比数列 diag：创建对角矩阵，即对角线元素为0或指定值，其他元素为0 eye：创建一个对角线位置为1，其他位置全为0的矩阵 sort：axis=1，沿横轴排序，axis=0，沿着纵轴排序.
echarts 日历图calender
weixin_43294560的博客
08-03 5399
1.主要配置 var option = { visualMap: { 方便控制日历图每个单元的显示样式 ... }, calendar: { id:'', range: '2017' 某一年 '2017-02' 某个月 ['2017-01-02', '2017-02-23'] 某个区间 ['2017-01', '2017-02'] cellSize, 单元格宽高 dayL
Echarts 定制化日历图
c.j.h_code的博客
07-16 2147
最近在做可视化，发现日历图挺有意思，分享一波吧！！！将它拉下备用后面在此基础解释并改造，如下代码运行结果如图：下面开始改造代码了！！！
echarts-日历图
王春红的博客
04-20 2474
Echarts实现日历图
echarts简单日历
gfcat博客
05-09 7153
请大家对照echarts3.5.2版本给出的日历图官方示例对照着看会更好理解一些，我是根据那个改编的， var planlist; var date = new Date; var str =date.getFullYear()+”/”+(date.getMonth()+1)+”/”+date.getDate(); //当前日期function cal(){ $.ajax({
基于 Echarts 的 Python 图表库：Pyecahrts交互式的日历图和3D柱状图
happy game
02-01 2220
本文将引领读者深入了解数据可视化领域中的两个强大工具：Python 编程语言和 Pyecharts 库。我们将详细探讨如何使用 Pyecharts 创建令人印象深刻的柱状图和日历图，通过展示数据之美，提高信息传达的效果。日历图是一种用于展示时间数据的独特而强大的数据可视化工具。它以日历的形式呈现数据，让用户可以直观地看到时间的分布和趋势。在 Pyecharts 中，通过使用 Calendar 类，可以轻松地创建日历图。
echarts案例之日历
i-cat的博客
10-26 1471
巧妙搞定日历之间的间隔~
使用ECharts实现日历图
lxq_9532的博客
08-21 5796
使用ECharts实现日历图 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;ECharts&lt;/title&gt; &lt;script src="./echarts.js"&gt;&lt
182Echarts - 日历坐标系（Calendar Graph）
阿甘兄
05-05 781
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
小例子：在 ECharts 中实现日历图
weixin_34309543的博客
04-19 1959
在 ECharts 发布的 3.5 版本中，新增了日历坐标系，用于在日历中绘制图表。如何快速写出一个日历图呢？ 通过以下三个步骤即可实现上述效果： 第一步：引入js文件 下载的 最新完整版本 echarts.min.js 即可，无需再单独引入其他文件哦。 &lt;script src="echarts.min.js"&gt;&lt;/script&gt; &lt;script&gt; /...
ECharts日历
最新发布
03-26
### ECharts 日历组件的使用方法 ECharts 的日历组件提供了一种灵活的方式来展示时间序列数据。以下是关于如何配置和使用该组件的具体说明。 #### 配置项详解 日历组件的核心在于 `calendar` 和 `series` 的配合...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值