绘图杂记【9】echarts 热力矩阵（列联表）图

var hours = [
       '数据通报', '疫情现状', '防控措施', '科研进展', '科普知识', '疫响对\n日常生活\n的影响', '疫情对\n经济和\n社会发展\n格局的影响', '追忆纪念', '其他'
        ];



var days = ['个人', '数据服务\n提供商','高校', '新媒体机构', '门户网站', '机构媒体'];

var data = 
[
[0,0,2],[0,1,6],[0,2,10],[0,3,10],[0,4,10],[0,5,10],[0,6,0],[0,7,0],[0,8,10],
[1,0,7],[1,1,2],[1,2,7],[1,3,6],[1,4,3],[1,5,2],[1,6,10],[1,7,5],[1,8,1],
[2,0,1],[2,1,1],[2,2,3],[2,3,2],[2,4,5],[2,5,0],[2,6,2],[2,7,0],[2,8,6],
[3,0,7],[3,1,3],[3,2,1],[3,3,0],[3,4,1],[3,5,0],[3,6,3],[3,7,3],[3,8,1],
[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,9],[4,5,1],[4,6,0],[4,7,4],[4,8,9],
[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,8],[5,5,0],[5,6,2],[5,7,7],[5,8,2],];



data = data.map(function (item) {
    return [item[1], item[0], item[2] || '-'];
});

option = {
    toolbox: {
            show: true,
            feature: {
                dataView: {show:true},
                saveAsImage: {
                    //excludeComponents :['toolbox'],
                    pixelRatio: 5
                }
            }
        },
    tooltip: {
        position: 'top'
    },
    animation: false,
    grid: {
        height: '50%',
        top: '25%'
        ,left:'10%'
        ,right:'12%'
    },
    xAxis: {
        
        name:'议题',
        nameTextStyle: {
            padding: [0, 0,190, -615]    // 四个数字分别为上右下左与原位置距离
        },
        
         position: 'top',
        type: 'category',
        data: hours,
        splitArea: {
            show: true
        },
        axisLine: {
                show: false,
            },
axisLabel: {  
                                     interval: 0,  
      fontSize:12,
                                 }  ,
        axisTick: {
            show: false
        }
    },
    yAxis: {
        name:'媒\n体\n类\n型',
        nameTextStyle: {
            padding: [0, 0, 18, -90]    // 四个数字分别为上右下左与原位置距离
        },
                axisLine: {
                show: false,
            },
        type: 'category',
        data: days,
        splitArea: {
            show: true
        },
        
        axisTick: {
            show: false
        }
    },
    visualMap: {
        min: 0,
        max: 10,
        calculable: false,
       // orient: 'horizontal',
        orient: 'vertical',  
        left: '90%',
        bottom: '120%',
        itemWidth:20,  
        itemHeight:140, 
          textGap:10,  
           padding:5,     
           
        top:'30%',
        right:'20%',
        text: ['报道篇数多','少'],           // 文本，默认为数值文本
        
        inRange: {
              color: ['#d1d4da', '#bacae8', '#93b6dc', '#5894cb'],
               symbolSize: [100, 100]
            }
    },
    series: [{
        name: 'Punch Card',
        type: 'heatmap',
        markLine: {
                symbol: ['none', 'none'],//去掉箭头
                itemStyle: {
                    normal: { lineStyle: { type: 'solid', color:'#969696'}
                    ,label: { show: false, position:'left' } }
                },
                data: [
                [
                    {name: '标线1起点', value: 10, x: 40, y: 20},
                    {name: '标线1终点', x: 40, y: 90}
                ],
                 [
                    {name: '标线1起点', value: 10, x:10, y: 40},
                    {name: '标线1终点', x: 70, y:40}
                ]
                ]
        },
        
        data: data,
        label: {
            show: true
        },

        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};