标签：OPTION COLOR top 日历 CHART color params calendar echarts

echarts 日历热度图设置 calendar

Calendar Option

            option:  {
                color: this.$CHART_OPTION.COLOR,
                legend:{
                    top: 10,
                    left: 10
                },
                grid: {
                    top: 20,
                    bottom: 20,
                    left: 40,
                    right: 20,
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return `<div>${params.value[0]}</div>
                                <div>报警数量: ${params.value[1]}</div>`;
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                calendar: {
                    top: 70,
                    left: 'center',
                    orient: 'vertical',
                    cellSize: ['auto', 42], // 日历格子大小
                    dayLabel: {
                        color: 'white',
                        margin: 10, // 距日历本体的距离，向上
                        firstDay: 1,
                        nameMap: ['日', '一', '二', '三', '四', '五', '六'],
                    },
                    yearLabel: {
                        margin: 40, // 距日历本体的距离，向上
                        position: 'top',
                        show: true
                    },
                    monthLabel: {
                        position: 'top',
                        show: true
                    },
                    itemStyle: {
                        opacity: 0.2,
                        borderWidth: 0.5
                    },
                    range: '2022-01'
                },
/*                visualMap: {  // 样例
                    type: 'piecewise',
                    textStyle: {
                        color: 'white'
                    },
                    splitNumber: 99, // 拆分数量
                    min: 1, // 最小值
                    max: 100, // 最大值
                    orient: 'horizontal',
                    left: 'center', // 横向居中
                    bottom: 0
                },*/
                visualMap: { // 滑块形式的图例
                    min: 0,
                    max: 50,
                    textStyle: {
                        color: 'white'
                    },
                    calculable: true,
                    seriesIndex: [0],
                    orient: 'horizontal',
                    left: 'center',
                    bottom: 0,
                    inRange: {
                        color: [
                            'rgba(0,116,201,0.49)',
                            // this.$CHART_OPTION.COLOR.purple,
                            this.$CHART_OPTION.COLOR.main,
                            this.$CHART_OPTION.COLOR.yellow,
                            this.$CHART_OPTION.COLOR.orange,
                            this.$CHART_OPTION.COLOR.red,
                        ]
                    },
                },

                series: [
                    {
                        label: {
                            show: true,
                            formatter: function (params) {
                                return ( `${params.dataIndex + 1}日\n\n${params.value[1] || ''}`);
                            },
                        },
                        type: 'heatmap',
                        coordinateSystem: 'calendar',
                        data: []
                    }
                ]
            }

标签：OPTION,COLOR,top,日历,CHART,color,params,calendar,echarts
来源： https://blog.csdn.net/KimBing/article/details/122338040

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