构建数据可视化（基于Echarts,python)

news2024/9/25 19:22:25

 构建数据可视化（基于Echarts,python)

本文目录：

一、写在前面的题外话

二、数据可视化概念

三、用Python matplotlib库绘制数据可视化图

四、基于Echarts构建大数据可视化

4.1、安装echarts.js

4.2、数据可视化折线图制作

4.2.1、基础折线图

4.2.2、改善折线图

4.2.3、平滑折线图

4.2.4、虚线折线图

4.2.5、阶梯折线图

4.2.6、面积折线图

4.3、数据可视化柱状图制作

4.4、数据可视化极坐标柱状图制作

一、写在前面的题外话

2ab463de26a541818271efa176656ae6.png

 　　我们无法决定一个人的出现，也无法决定一个人的离开，你或许能做的，就是珍惜不期而遇的惊喜。前世的缘分，今生的相遇，来生的回眸。

 　　任何类型的关系（朋友、亲戚。。。），有心者，必有所累，无心者，亦无所谓。情出自愿，不谈亏欠，一念起，天涯咫尺；一念灭，咫尺天涯。

 　　每个人性格不同，人生经历也不同，如果因为环境等因素造成无法正常相处，不如选择礼貌退场，找回原来的自己，把别人还于人海，互不打扰。

 　　没有谁的人生是经过铺垫顺畅无阻的，都不容易，你觉得别人比你过得好，只是因为你不曾看见他（她）疲惫不堪却不得不坚持的另一面。半生风雨半身寒，一杯浊酒敬流年，回首过往半生路，七分酸楚三分甜。

 　　世界上，每个人都是独一无二，无可替代的。所以我们才会在不知不觉中被某件微不足道的小事物牵引，记起某个人，某个声音，某个别人的故事。。。

 　　《再无一人恰似我》 　　作者：弘一法师 李叔同
 　　旧人不知我近况，
 　　新人不知我过往。
 　　纵你阅人何其多，
 　　再无一人恰似我。

   逆境清醒

2023.8.27

f3751a45350f4910835ba888fb79118a.gif

二、数据可视化概念

数据可视化：

 　　数据可视化是指将数据转换为图表、图形或其它形式的视觉元素，以帮助人们更好地理解和分析数据。它可以展示数据的模式、趋势、关联性和规律，有助于人们从数据中发现埋藏的价值和见解，从而更好地做出决策和行动。数据可视化涉及到多种技术和工具，包括图表、地图、网络图、热力图等。它已经成为数据分析和商业智能领域中非常重要的一部分。

实现数据可视化需要注意的事项：

  • 选择合适的图表类型：不同类型的数据要使用不同类型的图表来展示。比如，使用折线图来展示趋势数据，使用饼图来展示占比数据。
  • 确定数据的重点：为了呈现数据的重点，需要确保视觉元素的排列、颜色、和大小等符合数据的重点。
  • 保持简洁：不要在图表中添加太多的信息，将信息保持简洁，易于理解和阅读。
  • 使用色彩有效：对比色和相关色可以帮助读者更好地理解数据。不过，要避免使用过多的颜色，这会分散读者注意力。
  • 选择合适的字体：使用易于阅读的字体，并确保字体大小足够大，以便读者可以轻松地阅读数据。
  • 保持一致性：确保数据可视化的元素（如颜色、字体、大小）在整个视觉化项目中保持一致。

三、用Python matplotlib库绘制数据可视化图

#-*- 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()

 　　在上述代码中，我们使用了plt.pie()函数来绘制图形。

 　　其中，

 　　labels参数指定了每个扇形图的标签，

 　　values参数指定了每个扇形图所占的值，

 　　colors参数指定了每个扇形图的颜色，

 　　autopct参数指定了每个扇形图所占的比例的显示方式，

 　　startangle参数指定了起始角度。

 　　最后，我们使用plt.axis('equal')来保证扇形图是一个正圆。

 　　通过调用plt.show()来展示扇形图。

四、基于Echarts构建大数据可视化

4.1、安装echarts.js

我们需要先安装echarts,

下载地址：https://archive.apache.org/dist/echarts/5.4.3/

或者在页面代码里加入：

<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

4.2、数据可视化折线图制作

4.2.1、基础折线图

 2022年1月-2023年7月广东居民消费价格指数同比走势图

 代码如下：

<!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/echarts@5.4.3/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/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/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/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/echarts@5.4.3/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>

折线图数据集中在小范围内，效果不明显，我们调整一下代码：

4.2.2、改善折线图

 2022年1月-2023年7月广东居民消费价格指数同比走势图

 代码如下：

<!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/echarts@5.4.3/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/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/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/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/echarts@5.4.3/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>

我们将折线图改成平滑折线图：

4.2.3、平滑折线图

2022年1月-2023年7月广东居民消费价格指数同比走势图

 代码如下：

<!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/echarts@5.4.3/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/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/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/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/echarts@5.4.3/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、虚线折线图

2022年1月-2023年7月广东居民消费价格指数同比走势图

<!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/echarts@5.4.3/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/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/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/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/echarts@5.4.3/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、阶梯折线图

2022年1月-2023年7月广东居民消费价格指数同比走势图

<!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/echarts@5.4.3/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/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/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/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/echarts@5.4.3/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、面积折线图

2022年1月-2023年7月广东居民消费价格指数同比走势图

<!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/echarts@5.4.3/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/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/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/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/echarts@5.4.3/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、数据可视化柱状图制作

 

<!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/echarts@5.4.3/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/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/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/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/echarts@5.4.3/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、数据可视化极坐标柱状图制作

 

<!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/echarts@5.4.3/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/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/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/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/echarts@5.4.3/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>

 大数据文章：

  • 大数据（一）定义、特性
  • 大数据（二）大数据行业相关统计数据
  • 大数据（三）大数据相关的职位
  • 基于Echarts构建大数据可视化大屏
  • 大数据（四）主流大数据技术

         推荐阅读：

[你找到牵手一辈子的人了吗？] 七夕情人节特辑
数字技术能让古籍“活过来”吗？
心情不好时，帮自己训练个AI情绪鼓励师吧（基于PALM 2.0 finetune)
深度学习框架TensorFlow
人工智能开发人员工作流程、看法、工具统计数据
2023 年6月开发者调查统计结果——最流行的技术（2）
2023 年6月开发者调查统计结果——最流行的技术（1）
让Ai帮我们画个粽子，它会画成什么样呢？

​​

​​

​​

给照片换底色（python+opencv）猫十二分类基于大模型的虚拟数字人__虚拟主播实例

​​

​​

​​

计算机视觉__基本图像操作（显示、读取、保存）直方图（颜色直方图、灰度直方图）直方图均衡化（调节图像亮度、对比度）

​​

​​

​​

 语音识别实战（python代码）(一）

 人工智能基础篇

 计算机视觉基础__图像特征

93d65dbd09604c4a8ed2c01df0eebc38.png​​

 matplotlib 自带绘图样式效果展示速查（28种，全）

074cd3c255224c5aa21ff18fdc25053c.png​​

Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）

fe88b78e78694570bf2d850ce83b1f69.png​​

​​

cb4b0d4015404390a7b673a2984d676a.png​​

立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦

 Python 3D可视化（一）

 让你的作品更出色——词云Word Cloud的制作方法（基于python，WordCloud，stylecloud)

e84d6708316941d49a79ddd4f7fe5b27.png​​

938bc5a8bb454a41bfe0d4185da845dc.jpeg​​

0a4256d5e96d4624bdca36433237080b.png​​

 python Format()函数的用法___实例详解（一）(全，例多）___各种格式化替换，format对齐打印

 用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）

python爱心源代码集锦（18款）

dc8796ddccbf4aec98ac5d3e09001348.jpeg​​

0f09e73712d149ff90f0048a096596c6.png​​

40e8b4631e2b486bab2a4ebb5bc9f410.png​​

 Python中Print()函数的用法___实例详解(全，例多）

 Python函数方法实例详解全集(更新中...)

 《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念

09e08f86f127431cbfdfe395aa2f8bc9.png​​

​​

用代码过中秋，python海龟月饼你要不要尝一口？

 python练习题目录

03ed644f9b1d411ba41c59e0a5bdcc61.png​​

daecd7067e7c45abb875fc7a1a469f23.png​​

17b403c4307c4141b8544d02f95ea06c.png​​

草莓熊python turtle绘图（风车版）附源代码

 ​草莓熊python turtle绘图代码（玫瑰花版）附源代码

 ​草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码

4d9032c9cdf54f5f9193e45e4532898c.png​​

c5feeb25880d49c085b808bf4e041c86.png​​

 巴斯光年python turtle绘图__附源代码

皮卡丘python turtle海龟绘图（电力球版）附源代码

80007dbf51944725bf9cf4cfc75c5a13.png​​

1ab685d264ed4ae5b510dc7fbd0d1e55.jpeg​​

1750390dd9da4b39938a23ab447c6fb6.jpeg​​

 Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）

 色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)

2023年4月多家权威机构____编程语言排行榜__薪酬状况

aa17177aec9b4e5eb19b5d9675302de8.png​​​

38266b5036414624875447abd5311e4d.png​​

6824ba7870344be68efb5c5f4e1dbbcf.png​​

 手机屏幕坏了____怎么把里面的资料导出（18种方法）

【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)

 查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决

​​

vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）

fea225cb9ec14b60b2d1b797dd8278a2.png​​

bba02a1c4617422c9fbccbf5325850d9.png​​

37d6aa3e03e241fa8db72ccdfb8f716b.png​​

2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特

 别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(4套)

SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）

5d409c8f397a45c986ca2af7b7e725c9.png​​

6176c4061c72430eb100750af6fc4d0e.png​​

1f53fb9c6e8b4482813326affe6a82ff.png​​

【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)

 2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）

fffa2098008b4dc68c00a172f67c538d.png​​

5218ac5338014f389c21bdf1bfa1c599.png​​

c6374d75c29942f2aa577ce9c5c2e12b.png​​

 tomcat11、tomcat10 安装配置（Windows环境）（详细图文）

 Tomcat端口配置（详细）

 Tomcat 启动闪退问题解决集（八大类详细）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/934915.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

安全开发-JS应用NodeJS指南原型链污染Express框架功能实现审计WebPack打包器第三方库JQuery安装使用安全检测

安全开发-JS应用NodeJS指南原型链污染Express框架功能实现审计WebPack打包器第三方库JQuery安装使用安全检测

文章内容 环境搭建-NodeJS-解析安装&库安装安全问题-NodeJS-注入&RCE&原型链案例分析-NodeJS-CTF题目&源码审计打包器-WebPack-使用&安全第三方库-JQuery-使用&安全 环境搭建-NodeJS-解析安装&库安装 Node.js是运行在服务端的JavaScript 文档参考…
阅读更多...
3张图打造个人写真照，你也可以AIGC

3张图打造个人写真照，你也可以AIGC

前阵子&#xff0c;妙鸭相机的出现&#xff0c;9.9的价格&#xff0c;让大家过了一把写真照的瘾。 最近自己也开始关注一些大数据模型相关的内容&#xff0c;有时会想想&#xff0c;有没哪些比较好的模型&#xff0c;能够运用在手机移动端。然后我们实际生活中又会有哪些应用需…
阅读更多...
【C++】map的奇葩用法：和函数结合

【C++】map的奇葩用法：和函数结合

2023年8月26日&#xff0c;周六下午 今天才发现map居然还能这样用... #include <iostream> #include <map> #include <functional>void printOne() {std::cout << "已经打印出1" << std::endl; }void printTwo() {std::cout <<…
阅读更多...
Vue2向Vue3过度核心技术指令补充

Vue2向Vue3过度核心技术指令补充

目录 1 指令修饰符1.1 什么是指令修饰符&#xff1f;1.2 按键修饰符1.3 v-model修饰符1.4 事件修饰符 2 v-bind对样式控制的增强-操作class2.1 语法&#xff1a;2.2 对象语法2.3 数组语法2.4 代码练习 3 京东秒杀-tab栏切换导航高亮3.1 需求&#xff1a;3.2 准备代码:3.3 思路&…
阅读更多...
算法通关村第十一关——搞清位运算

算法通关村第十一关——搞清位运算

源码、反码和补码 很多人都记不清源码、反码和补码的区分&#xff0c;都是二进制&#xff0c;其实记忆起来很简单&#xff0c;分为正数和负数来记。正数的原码、反码和补码都是一样的&#xff0c;负数的原码符号位为1&#xff0c;反码是在原码的基础上进行改变&#xff1a;保持…
阅读更多...
Redis全局命令与数据结构

Redis全局命令与数据结构

"那篝火在银河尽头~" Redis-cli命令启动 现如今&#xff0c;我们已经启动了Redis服务&#xff0c;下⾯将介绍如何使⽤redis-cli连接、操作Redis服务。客户端与服务端交互的方式有两种: ● 第⼀种是交互式⽅式: 后续所有的操作都是通过交互式的⽅式实现&#xff0c;…
阅读更多...
分享一个vue-slott

分享一个vue-slott

需求再现 <el-table-column align"center" label"状态" prop"mitStatus" show-overflow-tooltip />在这里&#xff0c;我想对于状态进行一个三目判断&#xff0c;如果为0那就是进行中&#xff0c;否则就是已完成&#xff0c;期初我是这样写…
阅读更多...
抖店适合全职还是兼职？兼职去做收入怎么样？找副业的建议看完

抖店适合全职还是兼职？兼职去做收入怎么样？找副业的建议看完

我是王路飞。 普通人如今做抖音&#xff0c;相比较拍短视频、直播带货&#xff0c;在抖音开店正在成为多数人的第一选择。 就是因为抖店的门槛比较低&#xff0c;也没有粉丝数的要求&#xff0c;所以比较适合普通人去做。 可能在大多数新手的认知里&#xff0c;抖店只适合那…
阅读更多...
HoudiniVex笔记_P26_RecursionBasics递归基础

HoudiniVex笔记_P26_RecursionBasics递归基础

原视频&#xff1a;https://www.youtube.com/playlist?listPLzRzqTjuGIDhiXsP0hN3qBxAZ6lkVfGDI Bili&#xff1a;Houdini最强VEX算法教程 - VEX for Algorithmic Design_哔哩哔哩_bilibili Houdini版本&#xff1a;19.5 1、概述 递归是一种直接或者间接地调用自身的算法&a…
阅读更多...
HTML总结2 [转]

HTML总结2 [转]

以下转载和参考自&#xff1a;HTML 表单。 1、表格 可以通过 CSS 设置表格的样式&#xff1a; 如下为将上面table.lamp th,td样式中的padding注释掉&#xff0c;开启table.lamp中的padding的效果&#xff1a; 2、列表 3、表单 表单用于收集用户的输入&#xff0c;如下图所…
阅读更多...
【⑬MySQL | 数据类型（一）】简介 | 整数 | 浮点 | 定点 | 时间/日期类型

【⑬MySQL | 数据类型（一）】简介 | 整数 | 浮点 | 定点 | 时间/日期类型

前言 ✨欢迎来到小K的MySQL专栏&#xff0c;本节将为大家带来MySQL数据类型简介 | 整数 | 浮点 | 定点 | 时间/日期类型的分享✨ 目录 前言0.数据类型简介1 整数类型2 浮点类型3 定点类型4 日期/时间类型总结 0.数据类型简介 数据类型&#xff08;data_type&#xff09;是指系…
阅读更多...
《C和指针》笔记11: external和internal链接属性

《C和指针》笔记11: external和internal链接属性

当组成一个程序的各个源文件分别被编译之后&#xff0c;所有的目标文件以及那些从一个或多个函数库中引用的函数链接在一起&#xff0c;形成可执行程序。然而&#xff0c;如果相同的标识符出现在几个不同的源文件中时&#xff0c;它们是像Pascal那样表示同一个实体&#xff1f;…
阅读更多...
专业设计必备：Zeplin for Mac免费下载，打造独具特色的作品

专业设计必备：Zeplin for Mac免费下载，打造独具特色的作品

Zeplin是一款高效制图软件&#xff0c;可以帮助用户更好的设计及制作图片&#xff0c;为用户提供了标注、Style Guide、备注文档与简单的团队协作功能&#xff0c;还可以自动生成尺码标注、CSS 样式代码、导出图片等。 功能介绍 量身定制的资源&#xff0c;在一个位置 Zepli…
阅读更多...
Rabbitmq的Shovel

Rabbitmq的Shovel

Federation 具备的数据转发功能类似&#xff0c; Shovel 够可靠、持续地从一个 Broker 中的队列 ( 作为源端&#xff0c;即source)拉取数据并转发至另一个 Broker 中的交换器 ( 作为目的端&#xff0c;即 destination) 。作为源端的队列和作为目的端的交换器可以同时位于…
阅读更多...
Python通过matplotlib动态绘图实现中美GDP历年对比趋势动图

Python通过matplotlib动态绘图实现中美GDP历年对比趋势动图

随着中国的各种实力的提高&#xff0c;经常在各种媒体上看到中国与各个国家历年的各种指标数据的对比&#xff0c;为了更清楚的展示历年的发展趋势&#xff0c;有的还做成了动图&#xff0c;看到中国各种指标数据的近年的不断逆袭&#xff0c;心中的自豪感油然而生。今天通过Py…
阅读更多...
2023.8.27 碎碎念

2023.8.27 碎碎念

碎碎念系列更新 离上次更新快一个月了 随便写写 一、关于工作 公司项目应用端开发&#xff08;了解了shell&#xff0c;awk等&#xff09;公司自研APP维护 后续计划写一篇shell相关的博客 二、关于学习 最近把算法也捡起来了&#xff0c;虽然还是很菜&#xff0c;今天周赛…
阅读更多...
回归预测 | MATLAB实现GWO-ELM灰狼算法优化极限学习机多输入单输出回归预测（多指标，多图）

回归预测 | MATLAB实现GWO-ELM灰狼算法优化极限学习机多输入单输出回归预测（多指标，多图）

回归预测 | MATLAB实现GWO-ELM灰狼算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现GWO-ELM灰狼算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基本介绍程…
阅读更多...
单片机电子元器件-数码管

单片机电子元器件-数码管

数码管分类 共阳 把所有数码管的阳极接到一起形成公共阳极COM 数码管 共阳极COM 接到 5V 电源 共阴 把所有数码管的阴极接到一起形成公共阴极COM 数码管 共阴极COM 接到 地 GND 上 八段 数码管 和 七段数码管&#xff0c; 多了一个 小数点 DP 数码管显示原理 一个数码管如…
阅读更多...
YOLO目标检测——肺炎分类数据集下载分享

YOLO目标检测——肺炎分类数据集下载分享

肺炎分类数据集总共21000图片&#xff0c;可应用于&#xff1a;肺炎检测、疾病诊断、疾病预测和预警等等。 数据集点击下载&#xff1a;YOLO肺炎分类数据集21000图片.rar
阅读更多...
Fooocus启动时modules报错的解决方法

Fooocus启动时modules报错的解决方法

原理&#xff1a;是由于其他程序的安装导致modules的版本不对&#xff0c;先卸载现有版本&#xff0c;再运行run.bat让其自动安装响应的modules版本。 1、cmd运行windows dos终端。 2、将Fooocus_win64_1-1-1035文件夹备份&#xff0c;rename为Fooocus_win64_1-1-1035backup文…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023