博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ECharts-热力图实例
阅读量:7231 次
发布时间:2019-06-29

本文共 3371 字,大约阅读时间需要 11 分钟。

  1.引入echarts.js

  2.页面js代码

//用ajax获取所需要的json数据             $.get("../../../mall/queryPageWtSrPost.do", {                 'sdate' : sdate,                 'edate' : edate                              },              function (result, resultState) {                if (resultState == "success") {                    var resultJson = eval(result);                     if(resultJson!=""){                         //添加需要实现热力分布的图片                        $('#graphic').html("
"); var heatData=new Array();//定义数组存取后台数据 //封装成所需要的数据 x:距右边距的像素,y:距上边距的像素,h:热度 for(var i = 0;i < resultJson.length; i++) { heatData[i]=[resultJson[i].x,resultJson[i].y,resultJson[i].h]; } //echarts require( [ 'echarts', 'echarts/chart/heatmap' // 使用柱状图就加载bar模块,按需加载 ], function (ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var option = { title : { text: '热力图自定义样式' }, series : [ { type : 'heatmap', data : heatData, hoverable : false, gradientColors: [{ offset: 0.4, color: 'green' }, { offset: 0.5, color: 'yellow' }, { offset: 0.8, color: 'orange' }, { offset: 1, color: 'red' }], minAlpha: 0.2, valueScale: 2, opacity: 0.6 } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); } } });

  3.html代码

    

  4.效果图

 

  5.最后说明一下

  注意:图中这些点是你自己手动调到相对应的位置的,就是heatData中x,y的值来确定位置的

 

转载于:https://www.cnblogs.com/zhangtongzct/p/4961697.html

你可能感兴趣的文章
laravel上传文件&获取请求实例(隐式)
查看>>
适配低内存手机让app存在多个进程
查看>>
BW中DSO的分类
查看>>
echo -en
查看>>
Mysql 复制(Replication)实现
查看>>
我的友情链接
查看>>
jar生成exe可执行的程序
查看>>
date 转化为 指定格式的String
查看>>
使用virtualbox安装RHEL 6.2+Oracle 11g
查看>>
系统的域名服务
查看>>
MySQL 复制表结构
查看>>
《Effective C#》条款8:确保0为值类型的有效状态
查看>>
动态迁移应用服务器(Esxi 动态迁移技术,业务不间断,在线迁移)
查看>>
systemd coding style
查看>>
warning: control reaches end of non-void function
查看>>
Tkinter, a Gui for python
查看>>
android开发之webservice介绍
查看>>
纯js页面跳转整理
查看>>
目标:嗯,每天进步一点点,每周坚持写一点
查看>>
ros 安装教程
查看>>