Calendar 日历组件
基本用法
vue
<script setup>
import { ref } from 'vue'
const data = [
[1451577600000, 473],
[1451664000000, 5588],
[1451750400000, 1503],
[1451836800000, 8773],
[1451923200000, 9991],
[1452009600000, 8561],
[1452096000000, 9690],
[1452182400000, 8888],
[1452268800000, 9350],
[1452355200000, 8076],
[1452441600000, 3535],
[1452528000000, 1772],
[1452614400000, 6834],
[1452700800000, 6601],
[1452787200000, 6969],
[1452873600000, 8641],
[1452960000000, 5968],
[1453046400000, 4180],
[1453132800000, 3359],
[1453219200000, 2955],
[1453305600000, 2827],
[1453392000000, 2226],
[1453478400000, 3064],
[1453564800000, 6217],
[1453651200000, 5321],
[1453737600000, 1647],
[1453824000000, 5015],
[1453910400000, 356],
[1453996800000, 9911],
[1454083200000, 7634],
[1454169600000, 8790],
[1454256000000, 4772],
[1454342400000, 4099],
[1454428800000, 2256],
[1454515200000, 8514],
[1454601600000, 8909],
[1454688000000, 3216],
[1454774400000, 1641],
[1454860800000, 2890],
[1454947200000, 5013],
[1455033600000, 1796],
[1455120000000, 3110],
[1455206400000, 8282],
[1455292800000, 1818],
[1455379200000, 8834],
[1455465600000, 6501],
[1455552000000, 4281],
[1455638400000, 5334],
[1455724800000, 2583],
[1455811200000, 9652],
[1455897600000, 3205],
[1455984000000, 3391],
[1456070400000, 632],
[1456156800000, 9522],
[1456243200000, 8310],
[1456329600000, 4650],
[1456416000000, 4259],
[1456502400000, 1625],
[1456588800000, 7120],
[1456675200000, 5801],
[1456761600000, 6862],
[1456848000000, 2648],
[1456934400000, 8403],
[1457020800000, 4390],
[1457107200000, 1502],
[1457193600000, 9583],
[1457280000000, 5412],
[1457366400000, 3802],
[1457452800000, 1111],
[1457539200000, 5476],
[1457625600000, 9768],
[1457712000000, 2121],
[1457798400000, 540],
[1457884800000, 8302],
[1457971200000, 4235],
[1458057600000, 8062],
[1458144000000, 3296],
[1458230400000, 1469],
[1458316800000, 8909],
[1458403200000, 7043],
[1458489600000, 6894],
[1458576000000, 6006],
[1458662400000, 6046],
[1458748800000, 1615],
[1458835200000, 7581],
[1458921600000, 7158],
[1459008000000, 6900],
[1459094400000, 5597],
[1459180800000, 3792],
[1459267200000, 7222],
[1459353600000, 3699],
[1459440000000, 7365],
[1459526400000, 9648],
[1459612800000, 9749],
[1459699200000, 2085],
[1459785600000, 357],
[1459872000000, 5177],
[1459958400000, 9765],
[1460044800000, 6628],
[1460131200000, 4774],
[1460217600000, 7610],
[1460304000000, 1699],
[1460390400000, 4881],
[1460476800000, 7411],
[1460563200000, 5559],
[1460649600000, 2638],
[1460736000000, 346],
[1460822400000, 6643],
[1460908800000, 7126],
[1460995200000, 9281],
[1461081600000, 8953],
[1461168000000, 9485],
[1461254400000, 9341],
[1461340800000, 8339],
[1461427200000, 3319],
[1461513600000, 5085],
[1461600000000, 4719],
[1461686400000, 6693],
[1461772800000, 9425],
[1461859200000, 1723],
[1461945600000, 163],
[1462032000000, 1905],
[1462118400000, 4392],
[1462204800000, 259],
[1462291200000, 6226],
[1462377600000, 8208],
[1462464000000, 2602],
[1462550400000, 9445],
[1462636800000, 6924],
[1462723200000, 7754],
[1462809600000, 7382],
[1462896000000, 6627],
[1462982400000, 2747],
[1463068800000, 1385],
[1463155200000, 3711],
[1463241600000, 9313],
[1463328000000, 3280],
[1463414400000, 866],
[1463500800000, 364],
[1463587200000, 3013],
[1463673600000, 2118],
[1463760000000, 1360],
[1463846400000, 8935],
[1463932800000, 8709],
[1464019200000, 7297],
[1464105600000, 4367],
[1464192000000, 6813],
[1464278400000, 8432],
[1464364800000, 6334],
[1464451200000, 7449],
[1464537600000, 9455],
[1464624000000, 8385],
[1464710400000, 9866],
[1464796800000, 4077],
[1464883200000, 643],
[1464969600000, 7067],
[1465056000000, 8812],
[1465142400000, 5385],
[1465228800000, 4775],
[1465315200000, 7002],
[1465401600000, 9966],
[1465488000000, 2398],
[1465574400000, 749],
[1465660800000, 8251],
[1465747200000, 2902],
[1465833600000, 5256],
[1465920000000, 6135],
[1466006400000, 8138],
[1466092800000, 9002],
[1466179200000, 5623],
[1466265600000, 5107],
[1466352000000, 1918],
[1466438400000, 4546],
[1466524800000, 9783],
[1466611200000, 9585],
[1466697600000, 4019],
[1466784000000, 5217],
[1466870400000, 4021],
[1466956800000, 384],
[1467043200000, 6782],
[1467129600000, 5549],
[1467216000000, 4196],
[1467302400000, 9562],
[1467388800000, 3075],
[1467475200000, 5179],
[1467561600000, 597],
[1467648000000, 6795],
[1467734400000, 1336],
[1467820800000, 2226],
[1467907200000, 1538],
[1467993600000, 398],
[1468080000000, 4188],
[1468166400000, 9321],
[1468252800000, 5145],
[1468339200000, 9709],
[1468425600000, 973],
[1468512000000, 1948],
[1468598400000, 802],
[1468684800000, 1059],
[1468771200000, 6416],
[1468857600000, 151],
[1468944000000, 8070],
[1469030400000, 2148],
[1469116800000, 7856],
[1469203200000, 4543],
[1469289600000, 8502],
[1469376000000, 1594],
[1469462400000, 3490],
[1469548800000, 412],
[1469635200000, 2042],
[1469721600000, 9539],
[1469808000000, 4693],
[1469894400000, 212],
[1469980800000, 7216],
[1470067200000, 6888],
[1470153600000, 8827],
[1470240000000, 9816],
[1470326400000, 3051],
[1470412800000, 4905],
[1470499200000, 3578],
[1470585600000, 8926],
[1470672000000, 9817],
[1470758400000, 7730],
[1470844800000, 5721],
[1470931200000, 6316],
[1471017600000, 5003],
[1471104000000, 3759],
[1471190400000, 7745],
[1471276800000, 5964],
[1471363200000, 6351],
[1471449600000, 3541],
[1471536000000, 3478],
[1471622400000, 7680],
[1471708800000, 3386],
[1471795200000, 8353],
[1471881600000, 1950],
[1471968000000, 3455],
[1472054400000, 4067],
[1472140800000, 3901],
[1472227200000, 4682],
[1472313600000, 356],
[1472400000000, 3078],
[1472486400000, 9905],
[1472572800000, 6206],
[1472659200000, 9089],
[1472745600000, 7380],
[1472832000000, 971],
[1472918400000, 8428],
[1473004800000, 7749],
[1473091200000, 2374],
[1473177600000, 2859],
[1473264000000, 160],
[1473350400000, 7920],
[1473436800000, 1519],
[1473523200000, 4985],
[1473609600000, 5509],
[1473696000000, 3663],
[1473782400000, 4820],
[1473868800000, 6909],
[1473955200000, 4161],
[1474041600000, 193],
[1474128000000, 8641],
[1474214400000, 3285],
[1474300800000, 7483],
[1474387200000, 5041],
[1474473600000, 8839],
[1474560000000, 2855],
[1474646400000, 2190],
[1474732800000, 412],
[1474819200000, 7024],
[1474905600000, 8732],
[1474992000000, 2680],
[1475078400000, 7245],
[1475164800000, 3428],
[1475251200000, 7539],
[1475337600000, 2287],
[1475424000000, 207],
[1475510400000, 851],
[1475596800000, 7568],
[1475683200000, 2964],
[1475769600000, 4677],
[1475856000000, 994],
[1475942400000, 2850],
[1476028800000, 988],
[1476115200000, 1110],
[1476201600000, 1381],
[1476288000000, 5567],
[1476374400000, 1357],
[1476460800000, 9038],
[1476547200000, 2193],
[1476633600000, 1225],
[1476720000000, 2302],
[1476806400000, 5040],
[1476892800000, 4449],
[1476979200000, 1904],
[1477065600000, 5417],
[1477152000000, 1371],
[1477238400000, 5535],
[1477324800000, 9463],
[1477411200000, 9634],
[1477497600000, 472],
[1477584000000, 9643],
[1477670400000, 3115],
[1477756800000, 7520],
[1477843200000, 6743],
[1477929600000, 2237],
[1478016000000, 6413],
[1478102400000, 4663],
[1478188800000, 4325],
[1478275200000, 8915],
[1478361600000, 7470],
[1478448000000, 693],
[1478534400000, 8781],
[1478620800000, 2471],
[1478707200000, 7081],
[1478793600000, 8968],
[1478880000000, 8355],
[1478966400000, 6350],
[1479052800000, 7947],
[1479139200000, 4781],
[1479225600000, 9612],
[1479312000000, 6031],
[1479398400000, 5039],
[1479484800000, 7777],
[1479571200000, 4081],
[1479657600000, 9386],
[1479744000000, 5526],
[1479830400000, 959],
[1479916800000, 2019],
[1480003200000, 5269],
[1480089600000, 3178],
[1480176000000, 6960],
[1480262400000, 9315],
[1480348800000, 3964],
[1480435200000, 4498],
[1480521600000, 4505],
[1480608000000, 4491],
[1480694400000, 8663],
[1480780800000, 7675],
[1480867200000, 9558],
[1480953600000, 4422],
[1481040000000, 8311],
[1481126400000, 6607],
[1481212800000, 1619],
[1481299200000, 1082],
[1481385600000, 947],
[1481472000000, 5216],
[1481558400000, 8212],
[1481644800000, 1580],
[1481731200000, 9148],
[1481817600000, 1316],
[1481904000000, 8127],
[1481990400000, 3400],
[1482076800000, 9499],
[1482163200000, 2810],
[1482249600000, 8388],
[1482336000000, 110],
[1482422400000, 5039],
[1482508800000, 2453],
[1482595200000, 4390],
[1482681600000, 6653],
[1482768000000, 4040],
[1482854400000, 6102],
[1482940800000, 3404],
[1483027200000, 2969],
[1483113600000, 7827]
]
</script>
<template>
<VueEcharts style="width:100%;height:300px;position:relative;">
<Tooltip />
<VisualMap :min="0" :max="10000" type="piecewise" orient="horizontal" left="center" :top='65' >
<Text prop='textStyle' color='#000' />
</VisualMap>
<Calendar :top='120':left='30' :right='30' range="2016" :cellSize='["auto", 13]' >
<ItemStyle :borderWidth="0.5" />
<Text prop='yearLabel' :show='false' />
</Calendar>
<Heatmap coordinateSystem='calendar' :data="data" />
</VueEcharts>
</template>