echarts读取json文件,绘制运动量的极坐标热力图
时间: 2023-08-23 12:26:34 浏览: 44
好的,以下是绘制极坐标热力图的具体步骤:
1.创建一个HTML文件,引入ECharts和jQuery库,如下所示:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 极坐标热力图</title>
<script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:600px;"></div>
</body>
</html>
```
2.创建一个JSON文件,用于存储运动量数据,例如:
```
[
{"name": "王小明", "value": 100},
{"name": "张三", "value": 200},
{"name": "李四", "value": 300},
{"name": "赵五", "value": 400},
{"name": "钱六", "value": 500},
{"name": "孙七", "value": 600},
{"name": "周八", "value": 700},
{"name": "吴九", "value": 800},
{"name": "郑十", "value": 900}
]
```
3.使用jQuery库读取JSON文件中的数据,如下所示:
```
$(document).ready(function(){
$.getJSON('data.json', function(data){
drawChart(data);
});
});
```
4.使用ECharts绘制极坐标热力图,如下所示:
```
function drawChart(data){
var chart = echarts.init(document.getElementById('main'));
var option = {
polar: {},
tooltip: {},
visualMap: {
min: 0,
max: 1000,
bottom: 0,
left: 'center',
show: true,
orient: 'horizontal',
seriesIndex: [0],
inRange: {
color: ['#e0ffff', '#006edd']
},
text: ['高', '低'],
calculable: true
},
angleAxis: {
type: 'category',
data: data.map(function(item){
return item.name;
})
},
radiusAxis: {},
series: [{
type: 'bar',
data: data.map(function(item){
return item.value;
}),
coordinateSystem: 'polar',
name: '运动量',
itemStyle: {
color: '#006edd'
},
emphasis: {
itemStyle: {
color: '#33ccff'
}
}
}]
};
chart.setOption(option);
}
```
5.最后,在浏览器中打开HTML文件,即可看到绘制的极坐标热力图了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)