立即前往

活动

天翼云最新优惠活动,涵盖免费试用,产品折扣等,助您降本增效!
查看全部活动
热门活动
  • 智算采购季 热销S6云服务器2核4G限时88元/年起,部分主机可加赠对象存储组合包!
  • 免费体验DeepSeek,上天翼云息壤 NEW 新老用户均可免费体验2500万Tokens,限时两周
  • 云上钜惠 HOT 爆款云主机全场特惠,更有万元锦鲤券等你来领!
  • 算力套餐 HOT 让算力触手可及
  • 天翼云脑AOne NEW 连接、保护、办公,All-in-One!
  • 一键部署Llama3大模型学习机 0代码一键部署,预装最新主流大模型Llama3与StableDiffusion
  • 中小企业应用上云专场 产品组合下单即享折上9折起,助力企业快速上云
  • 息壤高校钜惠活动 NEW 天翼云息壤杯高校AI大赛,数款产品享受线上订购超值特惠
  • 天翼云电脑专场 HOT 移动办公新选择,爆款4核8G畅享1年3.5折起,快来抢购!
  • 天翼云奖励推广计划 加入成为云推官,推荐新用户注册下单得现金奖励
免费活动
  • 免费试用中心 HOT 多款云产品免费试用,快来开启云上之旅
  • 天翼云用户体验官 NEW 您的洞察,重塑科技边界

智算服务

打造统一的产品能力,实现算网调度、训练推理、技术架构、资源管理一体化智算服务
智算云(DeepSeek专区)
科研助手
  • 算力商城
  • 应用商城
  • 开发机
  • 并行计算
算力互联调度平台
  • 应用市场
  • 算力市场
  • 算力调度推荐
一站式智算服务平台
  • 模型广场
  • 体验中心
  • 服务接入
智算一体机
  • 智算一体机
大模型
  • DeepSeek-R1-昇腾版(671B)
  • DeepSeek-R1-英伟达版(671B)
  • DeepSeek-V3-昇腾版(671B)
  • DeepSeek-R1-Distill-Llama-70B
  • DeepSeek-R1-Distill-Qwen-32B
  • Qwen2-72B-Instruct
  • StableDiffusion-V2.1
  • TeleChat-12B

应用商城

天翼云精选行业优秀合作伙伴及千余款商品,提供一站式云上应用服务
进入甄选商城进入云市场创新解决方案
办公协同
  • WPS云文档
  • 安全邮箱
  • EMM手机管家
  • 智能商业平台
财务管理
  • 工资条
  • 税务风控云
企业应用
  • 翼信息化运维服务
  • 翼视频云归档解决方案
工业能源
  • 智慧工厂_生产流程管理解决方案
  • 智慧工地
建站工具
  • SSL证书
  • 新域名服务
网络工具
  • 翼云加速
灾备迁移
  • 云管家2.0
  • 翼备份
资源管理
  • 全栈混合云敏捷版(软件)
  • 全栈混合云敏捷版(一体机)
行业应用
  • 翼电子教室
  • 翼智慧显示一体化解决方案

合作伙伴

天翼云携手合作伙伴,共创云上生态,合作共赢
天翼云生态合作中心
  • 天翼云生态合作中心
天翼云渠道合作伙伴
  • 天翼云代理渠道合作伙伴
天翼云服务合作伙伴
  • 天翼云集成商交付能力认证
天翼云应用合作伙伴
  • 天翼云云市场合作伙伴
  • 天翼云甄选商城合作伙伴
天翼云技术合作伙伴
  • 天翼云OpenAPI中心
  • 天翼云EasyCoding平台
天翼云培训认证
  • 天翼云学堂
  • 天翼云市场商学院
天翼云合作计划
  • 云汇计划
天翼云东升计划
  • 适配中心
  • 东升计划
  • 适配互认证

开发者

开发者相关功能入口汇聚
技术社区
  • 专栏文章
  • 互动问答
  • 技术视频
资源与工具
  • OpenAPI中心
开放能力
  • EasyCoding敏捷开发平台
培训与认证
  • 天翼云学堂
  • 天翼云认证
魔乐社区
  • 魔乐社区

支持与服务

为您提供全方位支持与服务,全流程技术保障,助您轻松上云,安全无忧
文档与工具
  • 文档中心
  • 新手上云
  • 自助服务
  • OpenAPI中心
定价
  • 价格计算器
  • 定价策略
基础服务
  • 售前咨询
  • 在线支持
  • 在线支持
  • 工单服务
  • 建议与反馈
  • 用户体验官
  • 服务保障
  • 客户公告
  • 会员中心
增值服务
  • 红心服务
  • 客户支持计划
  • 专家技术服务
  • 备案管家

了解天翼云

天翼云秉承央企使命,致力于成为数字经济主力军,投身科技强国伟大事业,为用户提供安全、普惠云服务
品牌介绍
  • 关于天翼云
  • 智算云
  • 天翼云4.0
  • 新闻资讯
  • 天翼云APP
基础设施
  • 全球基础设施
  • 产品能力
  • 信任中心
最佳实践
  • 精选案例
  • 超级探访
  • 云杂志
  • 分析师和白皮书
  • 天翼云·创新直播间
市场活动
  • 2025智能云生态大会
  • 2024智算云生态大会
  • 2023云生态大会
  • 2022云生态大会
  • 天翼云中国行
天翼云
  • 活动
  • 智算服务
  • 产品
  • 解决方案
  • 应用商城
  • 合作伙伴
  • 开发者
  • 支持与服务
  • 了解天翼云
      • 文档
      • 控制中心
      • 备案
      • 管理中心

      131Echarts - 关系图(Calendar Graph)

      首页 知识中心 其他 文章详情页

      131Echarts - 关系图(Calendar Graph)

      2024-06-17 10:17:20 阅读次数:42

      Calendar,Echarts,Graph

      效果图

      131Echarts - 关系图(Calendar Graph)

      源代码

      <!DOCTYPE html>
      <html>
      
        <head>
          <meta charset="utf-8">
          <title>ECharts</title>
          <!-- 引入 echarts.js -->
          <script src="js/echarts.min.js"></script>
          <script src="js/jquery-1.11.0.min.js"></script>
          <script src="dist/extension/dataTool.js"></script>
        </head>
      
        <body>
          <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
          <div id="main" ></div>
          <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            var option;
            var graphData = [
              [
                1485878400000,
                260
              ],
              [
                1486137600000,
                200
              ],
              [
                1486569600000,
                279
              ],
              [
                1486915200000,
                847
              ],
              [
                1487347200000,
                241
              ],
              [
                1487779200000 + 3600 * 24 * 1000 * 15,
                411
              ],
              [
                1488124800000 + 3600 * 24 * 1000 * 23,
                985
              ]
            ];
      
            var links = graphData.map(function(item, idx) {
              return {
                source: idx,
                target: idx + 1
              };
            });
            links.pop();
      
            function getVirtulData(year) {
              year = year || '2017';
              var date = +echarts.number.parseDate(year + '-01-01');
              var end = +echarts.number.parseDate((+year + 1) + '-01-01');
              var dayTime = 3600 * 24 * 1000;
              var data = [];
              for(var time = date; time < end; time += dayTime) {
                data.push([
                  echarts.format.formatTime('yyyy-MM-dd', time),
                  Math.floor(Math.random() * 1000)
                ]);
              }
              return data;
            }
      
            option = {
              tooltip: {},
              calendar: {
                top: 'middle',
                left: 'center',
                orient: 'vertical',
                cellSize: 40,
                yearLabel: {
                  margin: 50,
                  textStyle: {
                    fontSize: 30
                  }
                },
                dayLabel: {
                  firstDay: 1,
                  nameMap: 'cn'
                },
                monthLabel: {
                  nameMap: 'cn',
                  margin: 15,
                  textStyle: {
                    fontSize: 20,
                    color: '#999'
                  }
                },
                range: ['2017-02', '2017-03-31']
              },
              visualMap: {
                min: 0,
                max: 1000,
                type: 'piecewise',
                left: 'center',
                bottom: 20,
                inRange: {
                  color: ['#5291FF', '#C7DBFF']
                },
                seriesIndex: [1],
                orient: 'horizontal'
              },
              series: [{
                type: 'graph',
                edgeSymbol: ['none', 'arrow'],
                coordinateSystem: 'calendar',
                links: links,
                symbolSize: 15,
                calendarIndex: 0,
                itemStyle: {
                  normal: {
                    color: 'yellow',
                    shadowBlue: 9,
                    shadowOffsetX: 1.5,
                    shadowOffsetY: 3,
                    shadowColor: '#555'
                  }
                },
                lineStyle: {
                  normal: {
                    color: '#D10E00',
                    width: 1,
                    opacity: 1
                  }
                },
                data: graphData,
                z: 20
              }, {
                type: 'heatmap',
                coordinateSystem: 'calendar',
                data: getVirtulData(2017)
              }]
            };
      
            myChart.setOption(option);
          </script>
        </body>
      
      </html>
      版权声明:本文内容来自第三方投稿或授权转载,原文地址:https://blog.51cto.com/u_15294985/5144455,作者:阿甘兄_,版权归原作者所有。本网站转在其作品的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如因作品内容、版权等问题需要同本网站联系,请发邮件至ctyunbbs@chinatelecom.cn沟通。

      上一篇:如何修改android studio模拟器AVD的硬盘空间位置

      下一篇:40MyCat - 权限控制(多租户支持)

      相关文章

      2025-02-14 08:18:57

      数据可视化—Echars(爬虫及数据可视化)

      数据可视化—Echars(爬虫及数据可视化)

      2025-02-14 08:18:57
      echarts , Echarts , 可视化 , 图表 , 实例
      2024-12-24 10:17:17

      Calendar类在Java中的使用与技巧

      Calendar类是Java中处理日期和时间的重要工具。虽然Java 8引入了更现代的java.time包,但Calendar类依然在许多现有项目中广泛使用。

      2024-12-24 10:17:17
      Calendar , java , Java , time , 使用 , 日期 , 时间
      2024-12-17 08:26:25

      Hutool工具集之DateUtil(日期时间工具)详解使用

      日期时间包是Hutool的核心包之一,提供针对JDK中Date和Calendar对象的封装,其中DateUtil中有针对日期时间操作提供一系列静态方法。

      2024-12-17 08:26:25
      Calendar , Date , 日期 , 时间
      2024-12-10 07:13:11

      基于Echarts2.X的地图数据可视化指南

      基于Echarts2.X的地图数据可视化指南

      2024-12-10 07:13:11
      Echarts , js , 地图 , 展示 , 版本
      2024-11-19 09:36:42

      使用Calendar.add进行日期计算

      Calendar类是Java中处理日期和时间的重要工具,add方法能够在日期上增加或减少指定的时间量。

      2024-11-19 09:36:42
      add , Calendar , Java
      2024-11-14 08:08:44

      Calendar类在Java中的应用与日期时间处理

      Java中的Calendar类是一个极其有用的工具,用于处理日期和时间。它不仅能够提供当前日期时间,还能够进行日期时间的计算和格式化。本文将探讨Calendar类的使用,并展示一些实际应用案例。

      2024-11-14 08:08:44
      Calendar , Java , 格式化
      2024-09-25 10:15:32

      tensorflow 利用TensorBoard查看计算图

      tensorflow 利用TensorBoard查看计算图

      2024-09-25 10:15:32
      Graph , tensorflow
      2024-08-07 09:46:39

      数据结构198-图论-广度优先搜索实现代码

      数据结构198-图论-广度优先搜索实现代码

      2024-08-07 09:46:39
      Graph , i++ , 数据结构
      2024-07-11 09:39:47

      225Echarts - 3D 地球(Globe Layers)

      225Echarts - 3D 地球(Globe Layers)

      2024-07-11 09:39:47
      Echarts
      2024-07-01 01:31:38

      pyecharts 介绍

      ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

      2024-07-01 01:31:38
      Echarts
      查看更多
      推荐标签

      作者介绍

      天翼云小翼
      天翼云用户

      文章

      32777

      阅读量

      4834716

      查看更多

      最新文章

      Hutool工具集之DateUtil(日期时间工具)详解使用

      2024-12-17 08:26:25

      225Echarts - 3D 地球(Globe Layers)

      2024-07-11 09:39:47

      pyecharts 介绍

      2024-07-01 01:31:38

      153Echarts - 旭日图(Sunburst VisualMap)

      2024-06-17 10:44:15

      119Echarts - 热力图(Calendar Heatmap)

      2024-06-17 10:44:15

      143Echarts - 矩形树图(ECharts Option Query)

      2024-06-17 10:44:15

      查看更多

      热门文章

      pyecharts 介绍

      2024-07-01 01:31:38

      95Echarts - 地理坐标/地图(Binning on Map)

      2024-06-17 10:44:15

      134Echarts - 路径图(Bus Lines of Beijing - Line Effect)

      2024-03-18 08:33:44

      173Echarts - 象形柱图(Expansion of forest)

      2024-03-22 08:15:20

      148Echarts - 旭日图(Book Records)

      2024-03-18 08:33:44

      135Echarts - 路径图(Use lines to draw 1 million ny streets.)

      2024-05-15 09:01:07

      查看更多

      热门标签

      linux java python javascript 数组 前端 docker Linux vue 函数 shell git 容器 spring 节点
      查看更多

      相关产品

      弹性云主机

      随时自助获取、弹性伸缩的云服务器资源

      天翼云电脑(公众版)

      便捷、安全、高效的云电脑服务

      对象存储

      高品质、低成本的云上存储服务

      云硬盘

      为云上计算资源提供持久性块存储

      查看更多

      随机文章

      31Echarts - 柱状图(特性示例:渐变色 阴影 点击缩放)

      119Echarts - 热力图(Calendar Heatmap)

      259Echarts - 3D 路径图(Airline on Globe)

      95Echarts - 地理坐标/地图(Binning on Map)

      30Echarts - 柱状图(柱状图框选)

      143Echarts - 矩形树图(ECharts Option Query)

      • 7*24小时售后
      • 无忧退款
      • 免费备案
      • 专家服务
      售前咨询热线
      400-810-9889转1
      关注天翼云
      • 权益商城
      • 天翼云APP
      • 天翼云微信公众号
      服务与支持
      • 备案中心
      • 售前咨询
      • 智能客服
      • 自助服务
      • 工单管理
      • 客户公告
      • 涉诈举报
      账户管理
      • 管理中心
      • 订单管理
      • 余额管理
      • 发票管理
      • 充值汇款
      • 续费管理
      快速入口
      • 权益商城
      • 文档中心
      • 最新活动
      • 免费试用
      • 信任中心
      • 天翼云学堂
      云网生态
      • 甄选商城
      • 渠道合作
      • 云市场合作
      了解天翼云
      • 关于天翼云
      • 天翼云APP
      • 服务案例
      • 新闻资讯
      • 联系我们
      热门产品
      • 云电脑
      • 弹性云主机
      • 云电脑政企版
      • 天翼云手机
      • 云数据库
      • 对象存储
      • 云硬盘
      • Web应用防火墙
      • 服务器安全卫士
      • CDN加速
      热门推荐
      • 云服务备份
      • 边缘安全加速平台
      • 全站加速
      • 安全加速
      • 云服务器
      • 云主机
      • 智能边缘云
      • 应用编排服务
      • 微服务引擎
      • 共享流量包
      更多推荐
      • web应用防火墙
      • 密钥管理
      • 等保咨询
      • 安全专区
      • 应用运维管理
      • 云日志服务
      • 文档数据库服务
      • 云搜索服务
      • 数据湖探索
      • 数据仓库服务
      友情链接
      • 中国电信集团
      • 189邮箱
      • 天翼企业云盘
      • 天翼云盘
      ©2025 天翼云科技有限公司版权所有 增值电信业务经营许可证A2.B1.B2-20090001
      公司地址:北京市东城区青龙胡同甲1号、3号2幢2层205-32室
      • 用户协议
      • 隐私政策
      • 个人信息保护
      • 法律声明
      备案 京公网安备11010802043424号 京ICP备 2021034386号