返回

提问 添加收藏

echarts热力图显示问题?

本页包含1张图片,默认未加载,显示所有图片

shanewds 发布于 2018年03月14日 (共有0个回帖)

点击加载图片

springmvc从后查询出来的坐标值单位是米,而显示在浏览器上的html页面的图片是px,如何准备显示该点,返回数据的格式是x,y,value;如:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  
 <script type="text/javascript" src="echarts-all.js"></script> 

 <script type="text/javascript" src="jquery-1.7.1.js"></script> 

  <style type="text/css">
    body{
      background: grey;
    }
  </style>
</head>
<body>
<div>
<img src="images/1.png" style="width:400px;height:400px;position:absolute;margin-left:23%">
<div id="main3" style="height:400px;width:400px;margin-left:23%;"></div>
</div>
<br/>

<script type="text/javascript">
        // 路径配置
       // 基于准备好的dom,初始化echarts图表
       var myChart = echarts.init(document.getElementById('main3')); 
        var heatData = [];

            //转换关系,投放到此图片上

          heatData.push([
               50,
               100,
               0.8
           ]);
         option = {
          title : {
            text: ''
          },
          series : [
            {
              type : 'heatmap',
              data : heatData,
              hoverable : true,
              blurSize: 20,

              gradientColors: [
              {
                  offset: 0.2,
                  color: 'blue'
              }, {
                  offset: 0.4,
                  color: 'cyan'
              }, {
                  offset: 0.6,
                  color: 'lime'
              }, {
                  offset: 0.8,
                  color: 'yellow'
              },{
                  offset: 1,
                  color: 'red'
              }
              ]
        
            }
          ]
        };
    
        // 为echarts对象加载数据 
        myChart.setOption(option); 
  
      
</script>


</body>
</html>

ECharts
文明上网,理性发言
客户端 Android iPhone WP7