【绘图杂记16】Echarts 热力矩阵图

var yNames = ["2020年", "2019年", "2018年", "2017年", "2016年", "2015年"]
var xNames = ["渝北区", "渝中区", "江北区", "南岸区", "巴南区", "江北区", "大渡口区", "九龙坡区", "北碚区"];
var data = [[0, 0, 1],[1, 0, 80],[2, 0, 1],[3, 0, 40],[4, 0, 40],[5, 0, 40],[6, 0, 40],[7, 0, 80],[8, 0, 40],[0, 1, 80],[1, 1, 10],[2, 1, 80],[3, 1, 132],[4, 1, 60],[5, 1, 2],[6, 1, 60],[7, 1, 80],[8, 1, 60],[0, 2, 32],[1, 2, 91],[2, 2, 120],[3, 2, 30],[4, 2, 70],[5, 2, 80],[6, 2, 80],[7, 2, 2],[8, 2, 3],[0, 3, 47],[1, 3, 32],[2, 3, 20],[3, 3, 130],[4, 3, 60],[5, 3, 70],[6, 3, 80],[7, 3, 90],[8, 3, 110],[0, 4, 91],[1, 4, 38],[2, 4, 2],[3, 4, 5],[4, 4, 66],[5, 4, 21],[6, 4, 60],[7, 4, 10],[8, 4, 90],[0, 5, 22],[1, 5, 111],[2, 5, 110],[3, 5, 39],[4, 5, 40],[5, 5, 90],[6, 5, 50],[7, 5, 60],[8, 5, 2],
];option = {tooltip: {position: 'top',formatter: function(params) {return params.name + yNames[params.data[1]] + "交易数据:" + params.value[2];},},toolbox: {show: true,feature: {dataView: {show:true},saveAsImage: {//excludeComponents :['toolbox'],pixelRatio: 5}}},grid: {bottom:100,height: '65%',width:'80%',left:90},backgroundColor: "#fff",xAxis: {name:'主城九区',nameTextStyle: {padding: [0, 0, 110, -706]    // 四个数字分别为上右下左与原位置距离},position: 'top',type: 'category',data: xNames,axisLine: {show: false},axisTick: {show: false},axisLabel: {color: "#4B4B4B",interval: 0,fontSize: 15},splitLine: {show: true,lineStyle: {color: "#fff", //同背景色width: 10,},},},yAxis: {name:'年\n份',nameTextStyle: {padding: [0, 0, 2, -130]    // 四个数字分别为上右下左与原位置距离},type: 'category',data: yNames, axisLine: {show: false},axisTick: {show: false},axisLabel: {color: "#4B4B4B",fontSize: 15},splitLine: {show: true,lineStyle: {color: "#fff", //同背景色width: 10,},},},visualMap: {min: 1,max: 132,calculable: false,orient: 'vertical',  bottom: '5%',top:'30%',right:'3%',text: ['高','低'], inRange: {color: ['#FF9966', '#60BDCB',  '#ff2121'],},textStyle: {color: "#4B4B4B"}},series: [{name: '交易数据',type: 'heatmap',data: data,label: {show: true,},markLine: {symbol: ['none', 'none'],//去掉箭头itemStyle: {normal: { lineStyle: { type: 'solid', color:'#969696'},label: { show: false, position:'left' } }},data: [[{name: '标线1起点', value: 10, x: 35, y: 14},{name: '标线1终点', x: 35, y: 60}],[{name: '标线1起点', value: 10, x:15, y: 30},{name: '标线1终点', x: 90, y:30}]]},zlevel:-1}]
};

【绘图杂记16】Echarts 热力矩阵图相关推荐

echarts热力背景图_Echarts 图表中设置背景图片
在项目开发过程中,遇到在Echarts图表上添加背景图的需求,通过查找Echarts官网的配置项,发现 graphic 能够实现在图表中设置背景图片. image 在Echarts的实例中,找到一个实 ...
echarts热力背景图_echarts 热力图
用自己的图片作为背景,怎么做热力图这是我的代码,求各位大佬帮忙 Demo * { margin: 0; padding: 0; } $.ajax({ type:"get", ur ...
echarts热力背景图_echarts自定义背景图片
//使用canvas把背景添加到echarts里 var img = new Image(); var canvas = document.createElement('canvas'); var c ...
echarts实现矩阵图（线性相关图）
在项目开发中需要实现以下效果:元素之间两两相关这种实际上是一种热力图,在基础的热力图上做修改,达到此效果. 要点1:去除图表底色 visualMap: {show: false,pieces: [{ ...
FigDraw 12. SCI 文章绘图之相关性矩阵图（Correlation Matrix）
桓峰基因公众号推出基于R语言绘图教程并配有视频在线教程,目前整理出来的教程目录如下: FigDraw 1. SCI 文章的灵魂之简约优雅的图表配色 FigDraw 2. SCI 文章绘图必备 R ...
python-科研绘图系列（4）-混淆矩阵图
1. 计算混淆矩阵 from sklearn.metrics import confusion_matrix # 导入计算混淆矩阵的包C1= confusion_matrix(True_label, ...
FigDraw 22. SCI文章中绘图之核密度及山峦图 (ggridges)
点击关注,桓峰基因桓峰基因公众号推出基于R语言绘图教程并配有视频在线教程,目前整理出来的教程目录如下: FigDraw 1. SCI 文章的灵魂之简约优雅的图表配色 FigDraw 2. SCI ...
FigDraw 24. SCI文章中绘图二维直方图及组合图
点击关注,桓峰基因桓峰基因公众号推出基于R语言绘图教程并配有视频在线教程,目前整理出来的教程目录如下: FigDraw 1. SCI 文章的灵魂之简约优雅的图表配色 FigDraw 2. SCI ...
python 树状图可视化_Python可视化25|seaborn矩阵图
矩阵图即用一张图绘制多个变量之间的关系,数据挖掘中常用于初期数据探索: 本文介绍python中seaborn.pairplot(傻瓜版)和seaborn.PairGrid(更个性化版)绘制矩阵图本文 ...

【绘图杂记16】Echarts 热力矩阵图

【绘图杂记16】Echarts 热力矩阵图相关推荐

最新文章

热门文章