Echart 仿 Github 代码贡献瓦片

最新推荐文章于 2025-05-08 22:00:56 发布

原创最新推荐文章于 2025-05-08 22:00:56 发布 · 1.1k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts

炫酷 Echarts 专栏收录该内容

2 篇文章

订阅专栏

在这里插入图片描述

HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Done</title>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
	<script src="./plugin/echarts.min.js"></script>
	<script src="./js/index.js"></script>
</html>

index.js 文件中代码：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));




function getVirtulData() {

    // 虚拟数据
    var data = [
    	['2018-12-06', 1],
    	['2018-12-07', 2],
    	['2018-12-08', 3],
    	['2018-12-09', 4],
    	['2018-12-10', 1],
    	['2018-12-11', 2],
    	['2018-12-12', 3],
    	['2018-12-13', 4],
    ];

    return data;
}

option = {
    title: {
        top: 30,
        left: 'center',
        text: 'Done '
    },
    tooltip : {},
    // 瓦片配置，颜色
    visualMap: {
        min: 0,
        max: 24,
        type: 'piecewise',  // 分段型

        // type: 'continuous',// 连续型
        orient: 'horizontal',  
        left: 'center',
        top: 65,
        color: ['#196127','#239a3b','#7bc96f','#c6e48b'], // 瓦片颜色
        textStyle: {
            color: '#000'
        },
        pieces: [ // 设置分段范围
        	{gt: 3},
        	{gt: 2, lte: 3},
        	{gt: 1, lte: 2},
        	{gt: 0, lte: 1}
        ]
    },
    // 承载瓦片的日历
    calendar: {
        top: 120,
        left: 30,
        right: 30,
        cellSize: ['auto', 13],
        range: '2018',
        itemStyle: {
            normal: {borderWidth: 0.5}
        },
        yearLabel: {show: false}
    },
    series: {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: getVirtulData()
    }
};
















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