Preface
Previously published a blog about data visualization with the help of a visualization platform- about the collection and processing of visualization data for the tracking of the new coronavirus pneumonia epidemic . It is indeed very simple to use the visualization platform to achieve data visualization, but it is not possible to make this completed visualization work. Realize remote access, it is very uncomfortable. (The previous visualization platform can actually achieve remote access, but it still needs to apply for registration. Unregistered ones only support 2 ip access at a time)
How to use the webpage to make a visualization work of our own?
Objective, don’t worry, please listen to me slowly
Visual artifact: echarts
Allow me to introduce it:
When I learned that echarts was developed by Baidu, I was surprised and changed some of my views on Baidu...
ECharts is an open source visualization library implemented using JavaScript, covering various industry charts and meeting various needs.
ECharts follows the Apache-2.0 open source agreement and is free for commercial use.
ECharts is compatible with most current browsers (IE8/9/10/11, Chrome, Firefox, Safari, etc.) and compatible with a variety of devices, and can be displayed arbitrarily anytime, anywhere.
The above is from the rookie tutorial
The ability to make such a visual chart
- A little bit of HTML
- A little bit of css
- Relatively more JavaScript
To the point
Still the old rules, here I will take the map component based on echarts as an example.
But before that, you still need to prepare something
- echarts.min.js (required echarts library)
- china.js (required for the map of China by echarts)
- jquery.js (JavaScript function library)
About three files and data below the required components, I have uploaded to Baidu cloud disk
point I Password:ujp6
Given below is the official download address:
The two files echarts.min.js and china.js, friends can also download from the official github: click me
jquery.js official download address: click me
let us start
First we need to write a simple front-end page
This is not difficult, and you can understand it with a little understanding of html, so I just put out the code and briefly explain it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
}
body{
width: 100%;
height: 100%;
}
#map{
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script type="text/javascript" src="js/echarts.min.js" ></script>
<script type="text/javascript" src="js/china.js" ></script>
</head>
<body>
<div id="map">地图</div>
<script type="text/javascript" src="js/map.js" ></script>
</body>
</html>
We mainly explain the content in the body tag. The first div function is to provide a carrier container for the echarts component we need to create. The purpose of defining its id attribute is to bind the echarts component to this div tag. In general, it is used To tell the echarts component in which html tag it should be displayed.
And map.js is our next main work-to implement this map component
for ease of understanding, I have marked the relevant attributes
Implementation of the map component
First create a map.js file under the js folder.
Initialize an echarts component object, bind it to the label whose id name is map, and store it in the ec_map variable:
var ec_map = echarts.init(document.getElementById("map"));
Define the option of a map component:
The meaning of the attribute has been given in the code comments, and it is explained in detail on the echarts official website: echarts official document
var ec_option={
//标题属性
title:{
text:"map",//设置标题文本
},
tooltip:{
//提示框
tirgger:"item",//提示框的触发类型
formatter:"省份名 : {b} <br /> 体温异常 : {c} 人",//字符串模板
},
visualMap:{
//导航图标
x:"left",//定位visualMap组件显示的位置
y:"bottom",//定位visualMap组件显示的位置
splitList:[//划分不同范围数据块的显示
{
start:0,end:49},
{
start:50,end:99},
{
start:100,end:149},
{
start:150,end:199},
{
start:200}
],
},
series:[{
type:"map",//告诉echarts你设置的组件类型
mapType:"china",//告诉echarts你设置的地图组件是什么地图，这就需要用到china.js了
data:null,//需要显示的数据
label:{
normal:{
show:true,//显示省份名称
fontSize:18,//调整省份标签的大小
},
},
}]
};
Do you think this is the end? Please remember, what is the purpose of making such a component? Yes, to visualize the data! However, have you noticed that in this series of processes, we did not use these data, so next, we need to use the ajax request to call the data in the previous area.json file
$.ajax({
type:"get",
url:"js/area.json",
async:false,
success:function(data){
ec_option.series[0].data=data.data;
}
});
Is it over? not at all! Think carefully about what you have done before: binding a specified component, setting a component property, calling a data file, what's wrong? Set the component properties just now to the specified component! (Knock on the blackboard!)
ec_map.setOption(ec_option);
Attach the complete map.js code
var ec_map = echarts.init(document.getElementById("map"));
var ec_option={
title:{
text:"map",
},
tooltip:{
tirgger:"item",
formatter:"省份名 : {b} <br /> 体温异常 : {c} 人",
},
visualMap:{
x:"left",
y:"bottom",
splitList:[
{
start:0,end:49},
{
start:50,end:99},
{
start:100,end:149},
{
start:150,end:199},
{
start:200}
],
},
series:[{
type:"map",
mapType:"china",
data:null,
label:{
normal:{
show:true,//显示省份名称
fontSize:18,
},
},
}]
};
$.ajax({
type:"get",
url:"js/area.json",
async:false,
success:function(data){
ec_option.series[0].data=data.data;
}
});
ec_map.setOption(ec_option);
Attach some problems you may encounter
Q: code is correct, open local html files, map display components, but the map is gray
- A:
Due to security restrictions Some browsers mechanisms to prohibit cross-domain, you can deploy these codes into their own It can be accessed remotely on the server, or you can build a local server. If you don’t know what to do, you can also download a HBuilder , which is a software for web development. Using it to run your web files will Automatically build a local server
Q: When you open the local html file, only the word map is displayed, but the map component does not appear
-
A: This should be a typing error in your map.js code. Please check some code errors carefully, or check whether punctuation is missing
Conclusion
The above is the tutorial content about using echarts to make a visual webpage. The space is limited. This article is just an example of making a map component. If you need other components, you can directly refer to the official documentation of echarts. I believe you will be full of rewards.