Echarts日历组件特性分析、自定义区域颜色

在项目中需要使用到日历分析显示数据，官网的案例是这样的：
需求：根据每日的数据显示自定义的颜色。

查询官方API，通过设置属性 visualMap.pieces 和 visualMap.inRange ，设置渐变色和颜色深浅度数。

直接上代码分析：

var myChart = echarts.init(document.getElementById("container"));
myChart.clear();

var option;
//这个是日历数组 自己生成 无需使用官网的。。
var dateList = [];

var heatmapData = []; //鼠标悬空后显示的数据。。。
var lunarData = [];
for (var i = 0; i < dateList.length; i++) {
	// 每日的数据，模拟生成假数据
    heatmapData.push([
        dateList[i][0],
        50000 + Math.round(Math.random() * 8000)
    ]);
    lunarData.push([
        dateList[i][0],
        1,
    ]);
}
            
option = {
    tooltip: {
        formatter: function (params) {
            return '污染度: ' + params.value[1];
        }
    },

    visualMap: {
        type: 'piecewise', // 类型为分段型
        calculable: true,
        seriesIndex: [2], // 指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列。可不写
        orient: 'horizontal', // 如何放置 visualMap 组件，水平（'horizontal'）或者竖直（'vertical'）。
        left: 'center', //  组件离容器左侧的距离。left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
        bottom: 100, //底部标签的位置
        inRange: {
            opacity: 0.35 //控制颜色深浅
        },
       
       //设置自定义范围区域的颜色！！！
      pieces: [      // 自定义每一段的范围，以及每一段的文字
        { gte: 56000, color: '#f31b21' }, // 不指定 max，表示 max 为无限大（Infinity）。
        { gte: 55000, lte: 56000, color: '#E4881D' },
        { gte: 54000, lte: 55000, color: '#2c8ce7' },
        { gte: 53000, lte: 54000,  color: '#24B1BA' },
        { lte: 53000, color: '#3DB676' }],
        
      textStyle: { //设置标签颜色
        	color: '#000'
        }
    },

    calendar: [{
        left: 'center',
        top: 'middle',
        cellSize: [65, 60],
        yearLabel: {show: false}, //显示年
        orient: 'vertical',
        dayLabel: {
            firstDay: 1,
            nameMap: 'cn'
        },
        monthLabel: {  //显示月
            show: false
        },
        range: '2017-03' //可以是某月 某年 某区间
    }],

    series: [{
        type: 'scatter', //散点（气泡）图
        coordinateSystem: 'calendar', 
        symbolSize: 1,
        label: {
            show: true,
            formatter: function (params) { // 日历单元格中的数据
                var d = echarts.number.parseDate(params.value[0]);
                return d.getDate(); 
            },
            color: '#000'
        },
        data: lunarData  //是上面所生成日历数组0的数据（实际开发中是要从后端取数据）
    	},
    	{
        type: 'scatter',
        coordinateSystem: 'calendar',
        symbolSize: 1,
        label: {
            show: true,
            formatter: function (params) {
                return '\n\n\n' + (params.value[2] || '');
            },
            fontSize: 14,
            color: '#a00'
        },
        data: lunarData
    	}, 
    	{
        name: '降雨量',
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: heatmapData   //总数据
    }]
};

最后效果图：

总结：
之前试着只设置 visualMap.inRange中的color属性，只是会将颜色根据echats的样式来改变颜色。
想要自定义颜色，解决方法就是在属性 visualMap.inRange 设置区域颜色。

以上。

标签：颜色,自定义,color,日历,visualMap,params,var,Echarts
来源： https://blog.csdn.net/qq_49045151/article/details/116755617