Build data visualization (based on Echarts, python)

Language 2023-09-06 10:19:00 views: null

 Build data visualization (based on Echarts, python)

Contents of this article:

1. Digression written in front

2. The concept of data visualization

3. Use the Python matplotlib library to draw data visualization graphs

4. Build big data visualization based on Echarts

4.1. Install echarts.js

4.2. Production of data visualization line chart

4.2.1. Basic Line Chart

4.2.2. Improve Line Chart

4.2.3. Smooth Line Chart

4.2.4. Dotted Line Chart

4.2.5. Ladder line chart

4.2.6. Area Line Chart

4.3. Production of data visualization histogram

4.4. Production of data visualization polar coordinate histogram

1. Digression written in front

2ab463de26a541818271efa176656ae6.png

 　　We can't decide a person's appearance, and we can't decide a person's departure. What you may be able to do is to cherish the unexpected surprise. The fate of the previous life, the encounter in this life, and the review of the next life.

 　　Any type of relationship (friends, relatives...), those who have a heart, must be tired, and those who have no heart, it doesn't matter. Love is voluntary, don't talk about debts, when you think about it, the end of the world is so close;

 　　Everyone has different personalities and different life experiences. If you cannot get along normally due to factors such as the environment, it is better to choose to exit politely, find your original self, and return others to the crowd without disturbing each other.

 　　No one's life is smooth and unimpeded, and it is not easy. You think that others live better than you, just because you have never seen the other side of him (her) who is exhausted but has to persist. Half the life is windy and half the body is cold, a glass of turbid wine toasts the fleeting years, looking back on the past half life, seven parts are sour and three parts are sweet.

 　　Everyone in this world is unique and irreplaceable. That's why we are unconsciously drawn by some insignificant thing, remembering a certain person, a certain voice, a certain other person's story. . .

 　　"There Is No One Like Me" Author: Master Hongyi Li Shutong
 　　Old people don't know my current situation, and
 　　new people don't know my past.
 　　No matter how many people you read,
 　　there is no one like me.

   Sober in adversity

2023.8.27

f3751a45350f4910835ba888fb79118a.gif

2. The concept of data visualization

data visualization:

 　　Data visualization refers to the transformation of data into charts, graphs, or other forms of visual elements to help people better understand and analyze the data. It can show the patterns, trends, correlations and regularities of data, and help people discover buried value and insights from data, so as to make better decisions and actions. Data visualization involves a variety of techniques and tools, including charts, maps, network diagrams, heat maps, and more. It has become a very important part of the field of data analysis and business intelligence.

Things to keep in mind when implementing data visualization:

  • Choose the right chart type: Different types of data should be presented using different types of charts. For example, use a line chart to display trend data, and use a pie chart to display percentage data.
  • Determine the focus of the data: In order to present the focus of the data, you need to ensure that the arrangement, color, and size of the visual elements match the focus of the data.
  • Keep it simple: Don’t overdo it with too much information in the diagram, keep the information concise and easy to understand and read.
  • Use color effectively: Contrasting and related colors can help readers better understand data. However, avoid using too many colors, which can distract the reader.
  • Choose the right font: Use an easy-to-read font, and make sure the font size is large enough so that readers can easily read the data.
  • Be consistent: Make sure elements of your data visualization (such as color, font, size) are consistent across your visualization project.

3. Use the Python matplotlib library to draw data visualization graphs

#-*- coding: UTF-8 -*-
import matplotlib.pyplot as plt
import matplotlib as mpl
mpl.rcParams["font.sans-serif"]=["SimHei"]
mpl.rcParams["axes.unicode_minus"]=False
import matplotlib.pyplot as plt

labels = ['糯米糍', '雪梅娘', '八宝饭', '驴打滚', '甜薄撑']
values = [20, 30, 25, 15, 10]
colors = ['lightskyblue', 'yellowgreen', 'gold', 'orange', 'lightcoral']

plt.pie(values, labels=labels, colors=colors, autopct='%1.1f%%', startangle=90)
plt.axis('equal')

plt.show()

 　　In the above code, we used the plt.pie() function to draw the graph.

 　　in,

 　　The labels parameter specifies the labels for each pie chart,

 　　The values ​​parameter specifies the value of each pie chart,

 　　The colors parameter specifies the color of each pie chart,

 　　The autopct parameter specifies the display mode of the proportion of each pie chart,

 　　The startangle parameter specifies the starting angle.

 　　Finally, we use plt.axis('equal') to ensure that the pie chart is a perfect circle.

 　　Show pie charts by calling plt.show().

4. Build big data visualization based on Echarts

4.1. Install echarts.js

We need to install echarts first,

Download address: https://archive.apache.org/dist/echarts/5.4.3/

Or add to the page code:

<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>

4.2. Production of data visualization line chart

4.2.1. Basic Line Chart

 Year-on-year trend chart of Guangdong Consumer Price Index from January 2022 to July 2023

 code show as below:

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    option = {
  xAxis: {
    type: 'category',
    data: ["22年01月","02月","03月","04月","05月","06月","07月","08月","09月","10月","11月","12月","23年01月","02月","03月","04月","05月","06月","07月"]
  },
  yAxis: {
    type: 'value',
  	axisTick: {
					show:false,
					alignWithLabel: true,
				},
		
  },
  series: [
    {
      data: [101.7,101.5,101.9,102.4,102.3,103.1,102.9,102.5,102.6,102,101.8,102.2,102.7,100.8,100.8,100.6,100.3,99.6,99.8],
      type: 'line',
    }
  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

The line chart data is concentrated in a small range, and the effect is not obvious. Let's adjust the code:

4.2.2. Improve Line Chart

 Year-on-year trend chart of Guangdong Consumer Price Index from January 2022 to July 2023

 code show as below:

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    option = {
  grid: {
    left: '3%',
    right: '4%',
    bottom: '1%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ["22年01月","02月","03月","04月","05月","06月","07月","08月","09月","10月","11月","12月","23年01月","02月","03月","04月","05月","06月","07月"]
  },
  yAxis: {
    type: 'value',
  	axisTick: {
		show:false,
		alignWithLabel: true,
	},
  minInterval: 1, //最小刻度是1
  splitNumber: 4, //段数是4
  min: 98, //最小是0
  max: function (value) { //最大设定
  if (value.max < 4) {return 4;} 
  else {return value.max;}

},
  },
  series: [
    {
      itemStyle : { normal: {label : {show: true,fontSize:8},}}, //可以显示数字
      data: [101.7,101.5,101.9,102.4,102.3,103.1,102.9,102.5,102.6,102,101.8,102.2,102.7,100.8,100.8,100.6,100.3,99.6,99.8],
      type: 'line',
      lineStyle: {
        width: 3,
        type: 'singleAxis',
        shadowColor : 'rgba(2, 89, 133,0.4)', //默认透明
        shadowBlur: 5,
        shadowOffsetX: 3,
        shadowOffsetY: 3,
        type:'solid'  // 虚线'dotted' 实线'solid'
        }
    }
  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

We change the line chart to a smooth line chart:

4.2.3. Smooth Line Chart

Year-on-year trend chart of Guangdong Consumer Price Index from January 2022 to July 2023

 code show as below:

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    option = {
  grid: {
    left: '3%',
    right: '4%',
    bottom: '1%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ["22年01月","02月","03月","04月","05月","06月","07月","08月","09月","10月","11月","12月","23年01月","02月","03月","04月","05月","06月","07月"]
  },
  yAxis: {
    type: 'value',
  	axisTick: {
	show:false,
	alignWithLabel: true,
	},
  minInterval: 1, //最小刻度是1
  splitNumber: 4, //段数是4
  min: 98, //最小是0
  max: function (value) { //最大设定
  if (value.max < 4) {return 4;} 
  else {return value.max;}

},
	
  },
  series: [
    {
      itemStyle : { normal: {label : {show: true,fontSize:8},}}, //可以显示数字
      data: [101.7,101.5,101.9,102.4,102.3,103.1,102.9,102.5,102.6,102,101.8,102.2,102.7,100.8,100.8,100.6,100.3,99.6,99.8],
      type: 'line',
      smooth: true,

    }
  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

4.2.4. Dotted Line Chart

Year-on-year trend chart of Guangdong Consumer Price Index from January 2022 to July 2023

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    option = {
  grid: {
    left: '3%',
    right: '4%',
    bottom: '1%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ["22年01月","02月","03月","04月","05月","06月","07月","08月","09月","10月","11月","12月","23年01月","02月","03月","04月","05月","06月","07月"]
  },
  yAxis: {
    type: 'value',
  	axisTick: {
	show:false,
	alignWithLabel: true,
	},
	minInterval: 1, //最小刻度是1
  splitNumber: 4, //段数是4
  min: 98, //最小是0
  max: function (value) { //最大设定
  if (value.max < 4) {return 4;} 
  else {return value.max;}

},
	
  },
  series: [
    {
      itemStyle : { normal: {label : {show: true,fontSize:8},}}, //可以显示数字
      //name: 'Step End',
      data: [101.7,101.5,101.9,102.4,102.3,103.1,102.9,102.5,102.6,102,101.8,102.2,102.7,100.8,100.8,100.6,100.3,99.6,99.8],
      type: 'line',
      lineStyle: {
        width: 3,
        type: 'singleAxis',
        shadowColor : 'rgba(2, 89, 133,0.4)', //默认透明
        shadowBlur: 5,
        shadowOffsetX: 3,
        shadowOffsetY: 3,
        type:'dotted'  // 虚线'dotted' 实线'solid'
        }
    }
  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

4.2.5. Ladder line chart

Year-on-year trend chart of Guangdong Consumer Price Index from January 2022 to July 2023

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    option = {
  grid: {
    left: '3%',
    right: '4%',
    bottom: '1%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ["22年01月","02月","03月","04月","05月","06月","07月","08月","09月","10月","11月","12月","23年01月","02月","03月","04月","05月","06月","07月"]
  },
  yAxis: {
    type: 'value',
  	axisTick: {
	show:false,
	alignWithLabel: true,
  },
	minInterval: 1, //最小刻度是1
  splitNumber: 4, //段数是4
  min: 98, //最小是0
  max: function (value) { //最大设定
  if (value.max < 4) {return 4;} 
  else {return value.max;}

},
	
  },
  series: [
    {
      itemStyle : { normal: {label : {show: true,fontSize:8},}}, //可以显示数字
      data: [101.7,101.5,101.9,102.4,102.3,103.1,102.9,102.5,102.6,102,101.8,102.2,102.7,100.8,100.8,100.6,100.3,99.6,99.8],
      type: 'line',
      step: 'end',

    }
  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

4.2.6. Area Line Chart

Year-on-year trend chart of Guangdong Consumer Price Index from January 2022 to July 2023

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    option = {
  grid: {
    left: '3%',
    right: '4%',
    bottom: '1%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ["22年01月","02月","03月","04月","05月","06月","07月","08月","09月","10月","11月","12月","23年01月","02月","03月","04月","05月","06月","07月"]
  },
  yAxis: {
    type: 'value',
  	axisTick: {
	show:false,
	alignWithLabel: true,
  },
	minInterval: 1, //最小刻度是1
  splitNumber: 4, //段数是4
  min: 98, //最小是0
  max: function (value) { //最大设定
  if (value.max < 4) {return 4;} 
  else {return value.max;}

},
	
  },
  series: [
    {
      itemStyle : { normal: {label : {show: true,fontSize:8},}}, //可以显示数字
      data: [101.7,101.5,101.9,102.4,102.3,103.1,102.9,102.5,102.6,102,101.8,102.2,102.7,100.8,100.8,100.6,100.3,99.6,99.8],
      type: 'line',
      areaStyle: {},
    }
  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

4.3. Production of data visualization histogram

 

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    option = {
  title: {
    text: '广州城镇非私营单位在岗职工历年平均工资(元)'
  },
  xAxis: {
    type: 'category',
    data: [
      '2006年',
      '2007年',
      '2008年',
      '2009年',
      '2010年',
      '2011年',
      '2012年',
      '2013年',
      '2014年',
      '2015年',
      '2016年',
      '2017年',
      '2018年',
      '2019年',
      '2020年',
      '2021年'
    ],
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      itemStyle : { normal: {label : {show: true,fontSize:9},}}, //可以显示数字
      data: [
        '36770',
        '40561',
        '45702',
        '49518',
        '54494',
        '57474',
        '67515',
        '73678',
        '74246',
        '81171',
        '89096',
        '98612',
        '111839',
        '123498',
        '135138',
        '144288'
      ],
      type: 'bar'
    }
  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

4.4. Production of data visualization polar coordinate histogram

 

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    option = {
  title: [
    {
      text: '广州城镇非私营单位在岗职工历年平均工资(元)'
    }
  ],
  polar: {
    radius: [30, '90%']
  },
  angleAxis: {
    max:74246,
    startAngle: 30
  },
  radiusAxis: {
    type: 'category',
    data: ["22年01月","02月","03月","04月","05月","06月","07月","08月","09月","10月","11月","12月","23年01月","02月","03月","04月","05月","06月","07月"],
  },
  tooltip: {},
  series: {
    type: 'bar',
    data: [
        '36770',
        '40561',
        '45702',
        '49518',
        '54494',
        '57474',
        '67515',
        '73678',
        '74246',
        '81171',
        '89096',
        '98612',
        '111839',
        '123498',
        '135138',
        '144288'
      ],
    coordinateSystem: 'polar',
    label: {
      show: true,
      position: 'middle',
      formatter: '{b}: {c}'
    }
  }
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

 Big data articles:

         Recommended reading:

[Have you found someone who will hold hands for a lifetime? ] Chinese Valentine's Day Special
Can digital technology bring ancient books back to life?
When you are in a bad mood, help yourself to train an AI emotional encourager (based on PALM 2.0 finetune)
Deep learning framework TensorFlow
AI Developer Workflow, Perceptions, Tool Statistics
June 2023 Developer Survey Statistics - Most Popular Technologies (2)
June 2023 Developer Survey Statistics - Most Popular Technologies (1)
Let Ai help us draw a zongzi, what will it look like?

​​

​​

​​
Change the background color of the photo (python+opencv) Twelve categories of cats Virtual digital human based on large model__virtual anchor example

​​

​​

​​
Computer Vision__Basic Image Operations (Display, Read, Save) Histogram (color histogram, grayscale histogram) Histogram equalization (adjust image brightness, contrast)

​​

​​

​​

 Speech recognition practice (python code) (1)

 Artificial Intelligence Basics

 Basics of Computer Vision__Image Features

93d65dbd09604c4a8ed2c01df0eebc38.png​​

 Quick check of matplotlib's own drawing style effect display (28 types, all)

074cd3c255224c5aa21ff18fdc25053c.png​​
Detailed explanation of Three.js example ___ rotating elf girl (with complete code and resources) (1)

fe88b78e78694570bf2d850ce83b1f69.png​​

​​

cb4b0d4015404390a7b673a2984d676a.png​​
Three-dimensional multi-layer rose drawing source code__Rose python drawing source code collection

 Python 3D visualization (1)

 Make your work better - the method of making word cloud Word Cloud (based on python, WordCloud, stylecloud)

e84d6708316941d49a79ddd4f7fe5b27.png​​

938bc5a8bb454a41bfe0d4185da845dc.jpeg​​

0a4256d5e96d4624bdca36433237080b.png​​

 Usage of python Format() function___Detailed example (1) (full, many examples)___Various formatting replacements, format alignment printing

 Write romance with code__Collection (python, matplotlib, Matlab, java to draw hearts, roses, front-end special effects roses, hearts)

 Python love source code collection (18 models)

dc8796ddccbf4aec98ac5d3e09001348.jpeg​​

0f09e73712d149ff90f0048a096596c6.png​​

40e8b4631e2b486bab2a4ebb5bc9f410.png​​

 Usage of the Print() function in Python___Detailed examples (full, many examples)

 The complete collection of detailed explanations of Python function and method examples (updating...)

 "Python List List Full Example Detailed Explanation Series (1)" __ series general catalog, list concept

09e08f86f127431cbfdfe395aa2f8bc9.png​​

​​
Celebrate the Mid-Autumn Festival with code, do you want to have a bite of python turtle mooncake?

 directory of python exercises

03ed644f9b1d411ba41c59e0a5bdcc61.png​​

daecd7067e7c45abb875fc7a1a469f23.png​​

17b403c4307c4141b8544d02f95ea06c.png​​
Strawberry bear python turtle drawing (windmill version) with source code

 ​Strawberry Bear python turtle drawing code (rose version) with source code

 ​Strawberry bear python drawing (Spring Festival version, Christmas countdown snowflake version) with source code

4d9032c9cdf54f5f9193e45e4532898c.png​​

c5feeb25880d49c085b808bf4e041c86.png​​

 Buzz Lightyear python turtle drawing__with source code

 Pikachu python turtle turtle drawing (power ball version) with source code

80007dbf51944725bf9cf4cfc75c5a13.png​​

1ab685d264ed4ae5b510dc7fbd0d1e55.jpeg​​

1750390dd9da4b39938a23ab447c6fb6.jpeg​​

 Node.js (v19.1.0npm 8.19.3) vue.js installation and configuration tutorial (super detailed)

 Color and color comparison table (1) (hexadecimal, RGB, CMYK, HSV, Chinese and English names)

 A number of authoritative organizations in April 2023____Programming language rankings__Salary status

aa17177aec9b4e5eb19b5d9675302de8.png​​​

38266b5036414624875447abd5311e4d.png​​

6824ba7870344be68efb5c5f4e1dbbcf.png​​

 The phone screen is broken____how to export the data inside (18 methods)

 [CSDN Cloud IDE] Personal experience and suggestions (including ultra-detailed operation tutorials) (python, webGL direction)

 Check the jdk installation path, realize the coexistence solution of multiple java jdk on windows, and solve the terminal garbled characters after installing java19

​​
Vue3 project building tutorial (based on create-vue, vite, Vite + Vue)

fea225cb9ec14b60b2d1b797dd8278a2.png​​

bba02a1c4617422c9fbccbf5325850d9.png​​

37d6aa3e03e241fa8db72ccdfb8f716b.png​​
The second part of the 2023 Spring Festival blessings - send you a guardian rabbit, let it warm every one of you [html5 css3] drawing and moving bunny, cool charging, special font

 Unique, original, beautiful and romantic Valentine's Day confession album, (copy is available) (html5, css3, svg) confession love code (4 sets)

 Detailed explanation series of SVG examples (1) (overview of svg, difference between bitmap and vector graphics (diagram), SVG application examples)

5d409c8f397a45c986ca2af7b7e725c9.png​​

6176c4061c72430eb100750af6fc4d0e.png​​

1f53fb9c6e8b4482813326affe6a82ff.png​​
[Programming Life] Python turtle drawing of World Cup elements in Qatar (with source code), 5 World Cup theme front-end special effects (with source code) HTML+CSS+svg draws exquisite colorful flashing lights Christmas tree, HTML+CSS+Js real-time New Year countdown (with source code)

 The first part of the 2023 Spring Festival Blessing Series (Part 1) (flying Kongming lanterns for blessings, wishing everyone good health) (with complete source code and resources for free download)

fffa2098008b4dc68c00a172f67c538d.png​​

5218ac5338014f389c21bdf1bfa1c599.png​​

c6374d75c29942f2aa577ce9c5c2e12b.png​​

 Tomcat11, tomcat10 installation configuration (Windows environment) (detailed graphics)

 Tomcat port configuration (detailed)

 Tomcat startup flashback problem solving set (eight categories in detail)

Guess you like

Origin blog.csdn.net/weixin_69553582/article/details/132518203
Recommended
Ranking
error: (-215:Assertion failed) !_img.empty() in function ‘cv::imwrite‘
Database migration between Navicat servers
Minimum number of rotation of the array: Array
balenaEtcher for mac (make a boot disk software) v1.5.67
Custom processing serialization and deserialization in jackson
Mu-en-mask system development software
Mastering Regular Expressions
Find mileage Java--
Web pages can not directly concern the public micro-channel number how to do? A key to arouse public concern number of micro-channel solutions
[CodeForces - 739B] Alyona and a tree Tree + [difference] + bipartite
Daily
More
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

Code World

© 2018 codetd.com