This is the fourth day of my participation in Gwen Challenge.
Introduction to 👽
Today’s words do not say, directly open liver 🤪.
👽 Preparation stage
👻 This phase accomplishes the following:
🐣 Prepare the HTML page
🐣CDN introduces VUE and Echarts
🐣 introduce geoJson, data
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>heatMap</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.main {
width: 100vw;
height: 100vh;
}
#region-chart {
margin: 20px auto;
}
</style>
</head>
<body>
<div class="main">
<! Don't forget echarts container given width and height -->
<div id="region-chart" style="width: 100%; height: 100%"></div>
</div>
<! Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<! Echarts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<! -- Introducing geoJson, this step in a real project might be requested from the background -->
<script src="./jingniu.js"></script>
<! Import data, this step may be requested from the background in the actual project.
<script src="./data.js"></script>
<script>
const app = new Vue({
el: '#region-chart'.mounted(){},methods: {},});</script>
</body>
</html>
Copy the code
👻 load the Echarts instance and draw the diagram
...<script>
var app = new Vue({
el: '#region-chart'.mounted() {
// Generate a chart
this.initECharts();
},
methods: {
initECharts() {
const option = {
geo: {
map: 'jingniu'.itemStyle: {
areaColor: '#acacacb9'.borderColor: '#2c2a2a'.borderWidth: 2.borderType: 'dashed',},emphasis: {
label: {
show: false,}},layoutCenter: ['50%'.'45%'].layoutSize: '70%',}};// Mount the instance
this.chartInstance = echarts.init(document.getElementById('region-chart'));
// Register the map
echarts.registerMap('jingniu', mapJSON, {});
/ / load option
this.chartInstance.setOption(option); ,}}});</script>...Copy the code
Now refresh the page, you can see the base image!
👻 Configure the heat map
To realize heatmap, you need to configure two options: series-heatmap and visualMap.
...<script>
var app = new Vue({
el: '#region-chart'.mounted() {
this.initECharts();
},
methods: {
initECharts() {
constOption = {...// Add a heat map configuration
series: [{name: 'thermal map'.type: 'heatmap'.coordinateSystem: 'geo'.pointSize: 5.blurSize: 20.minOpacity: 0.maxOpacity: 0.9.data: data,
},
],
// Add visualMap configuration
visualMap: [{type: 'continuous'.show: false.min: 0.max: 10.inRange: {
color: ['blue'.'red'],},},],}; ,}}});</script>...Copy the code
The effect is shown as follows:
👻 style optimization
The realization of the function is introduced here, the adjustment of the style is to teach everyone to explore it, after all, it is better to teach people to fish than to teach people to fish 😦.
Tips: Please refer to the echarts website