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

2021-05-13 17:30:24 阅读：939 来源： 互联网

标签：颜色自定义 color 日历 visualMap params var 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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