在echarts中关于日历图（热力图实现）遇到的问题

Question

项目是想用日历图展示一年某个城市的污染物变化情况，如2013年1月1日，主要污染物是PM2.5，想让他显示一个颜色，1月2日，主要污染无物为PM10，显示另外的颜色。
数据格式为[['2013-01-01',"PM2.5"]]格式的列表。
官网的日历图示例都是用visualmap的连续型。查询官网配置手册后，发现可以设置type为piecewise.后设置catagores为['SO2', 'NO2', 'CO', 'O3', 'PM2.5', 'PM10']。但是不知道为什么日历图上只有未上色的格子。
我的理解是默认映射数据的最后1栏，值与catagores中的值进行匹配，选中是一个颜色，不选中是其他颜色。
optio配置

{
            tooltip: {
                text: titleName + '日历图',
                position: 'top'
            },
            visualMap: {
                type:'piecewise',
                categories: ['SO2', 'NO2', 'CO', 'O3', 'PM2.5', 'PM10'],
                orient: 'horizontal',
                left: 'center',
                top: 'top',
                inRange:{                             //定义 在选中范围中 的视觉元素
                    color: 'red',
                    symbolSize: [30, 100]
                },
                outOfRange:{   
                    color: 'black',                         //定义 在选中范围外 的视觉元素。
                    symbolSize: [30, 100]
                },
            },
            calendar: [
                {
                    range: '2018',
                    cellSize: ['auto', 5]
                },
                {
                    top:120,
                    range: '2017',
                    cellSize: ['auto', 5]
                },
                {
                    top: 180,
                    range: '2016',
                    cellSize: ['auto', 5]
                },
                {
                    top: 240,
                    range: '2015',
                    cellSize: ['auto', 5],
                    right: 5
                },
                {
                    top: 300,
                    range: '2014',
                    cellSize: ['auto', 5],
                    right: 5
                },
                {
                    top: 360,
                    range: '2013',
                    cellSize: ['auto', 5],
                    right: 5
                }
            ],
            series: [
                {
                    type: 'heatmap',
                    coordinateSystem: 'calendar',
                    calendarIndex: 0,
                    data: this.getVirtulData('2018',cityinformation)
                },
                {
                    type: 'heatmap',
                    coordinateSystem: 'calendar',
                    calendarIndex: 1,
                    data: this.getVirtulData('2017',cityinformation)
                },
                {
                    type: 'heatmap',
                    coordinateSystem: 'calendar',
                    calendarIndex: 2,
                    data: this.getVirtulData('2016',cityinformation)
                },
                {
                    type: 'heatmap',
                    coordinateSystem: 'calendar',
                    calendarIndex: 3,
                    data:this.getVirtulData('2015',cityinformation)
                },
                {
                    type: 'heatmap',
                    coordinateSystem: 'calendar',
                    calendarIndex: 4,
                    data: this.getVirtulData('2014',cityinformation)
                },
                {
                    type: 'heatmap',
                    coordinateSystem: 'calendar',
                    calendarIndex: 5,
                    data: this.getVirtulData('2013',cityinformation)
                }
            ]
        }

希望各位大哥帮帮忙，教导一下我

Answer 1

主要是data数据格式的问题，然后inrange的颜色最好自定义,数量跟categories长度一致：

inRange:{                             //定义 在选中范围中 的视觉元素
            color: ['red', 'black', 'green', 'yellow', 'white','blue']
        },

data格式：

data: [['2018-01-01',0,0,0,0,0,0,'PM10']]
//中间6位对应categories长度，这里没用到值，占位就行。