データ視覚化の構築 (Echarts、Python に基づく)

プログラミング 2023-09-06 10:19:02 訪問数: null

 データ視覚化の構築 (Echarts、Python に基づく)

この記事の内容:

1. 前に書いた余談

2. データ可視化の概念

3. Python matplotlib ライブラリを使用してデータ視覚化グラフを描画します

4. 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. データ可視化極座標ヒストグラムの作成

1. 前に書いた余談

2ab463de26a541818271efa176656ae6.png

 　　人の容姿は決められないし、人の旅立ちも決められない、あなたにできることは、予期せぬサプライズを大切にすることかもしれません。前世の因縁、今世の出会い、そして来世の振り返り。

 　　どのような関係（友人、親戚...）であっても、心がある人は疲れるはずですし、心がない人は関係ありません。愛は自発的なものです。借金のことは話さないでください。考えてみれば、世界の終わりはとても近いのです。

 　　人はそれぞれ性格や人生経験が異なりますので、環境などの要因で正常に付き合うことができない場合には、お互いに迷惑をかけずに、潔く退場し、本来の自分を見つけて集団に戻すという選択をしたほうが良いでしょう。

 　　準備を整えてから順調に、何の支障もなく人生を歩める人はいませんし、それは簡単なことではありません。人生の半分は風が強く、体の半分は冷え、濁ったワインで儚い年月に乾杯し、過去の半生を振り返り、七分は酸っぱく、三分は甘い。

 　　この世界の誰もが個性的で、かけがえのない存在です。だからこそ、私たちは無意識のうちに、ある人、ある声、ある人の物語を思い出し、何か取るに足らないものに引き寄せられるのです。。。

 　　「私のような人はいない」 著者：李秀通老師
 　　古い人は私の現在の状況を知りませんが、
 　　新しい人は私の過去を知りません。
 　　どれだけ読んでも
 　　私と同じ人はいない。

   逆境でも冷静に

2023.8.27

f3751a45350f4910835ba888fb79118a.gif

2. データ可視化の概念

データの視覚化:

 　　データの視覚化とは、人々がデータをよりよく理解して分析できるように、データをチャート、グラフ、またはその他の形式の視覚要素に変換することを指します。データのパターン、傾向、相関関係、規則性を示し、人々がデータから埋もれた価値や洞察を発見して、より良い意思決定や行動を行えるように支援します。データの視覚化には、チャート、マップ、ネットワーク図、ヒート マップなどを含むさまざまな技術とツールが必要です。これは、データ分析とビジネス インテリジェンスの分野で非常に重要な部分となっています。

データ視覚化を実装する際に留意すべき点は次のとおりです。

  • 適切なグラフの種類を選択する:異なる種類のデータは、異なる種類のグラフを使用して表示する必要があります。たとえば、傾向データを表示するには折れ線グラフを使用し、パーセント データを表示するには円グラフを使用します。
  • データの焦点を決定する:データの焦点を示すには、視覚要素の配置、色、サイズがデータの焦点と一致していることを確認する必要があります。
  • シンプルに保つ:図にあまりにも多くの情報を盛り込み過ぎず、情報は簡潔で理解しやすく、読みやすいものにしてください。
  • 色を効果的に使用する:対照的な色や関連する色を使用すると、読者がデータをよりよく理解できるようになります。ただし、読者の注意をそらす可能性があるため、多色を使用しないでください。
  • 適切なフォントを選択する:読みやすいフォントを使用し、読者がデータを読みやすいようにフォント サイズが十分に大きいことを確認します。
  • 一貫性を保つ:データ視覚化の要素 (色、フォント、サイズなど) が視覚化プロジェクト全体で一貫していることを確認します。

3. 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() 関数を使用してグラフを描画しました。

 　　で、

 　　ラベルパラメータは各円グラフのラベルを指定します。

 　　value パラメータは各円グラフの値を指定し、

 　　Colors パラメータは各円グラフの色を指定します。

 　　autopct パラメータは、各円グラフの割合の表示モードを指定します。

 　　startangle パラメーターは開始角度を指定します。

 　　最後に、plt.axis('equal') を使用して、円グラフが完全な円であることを確認します。

 　　plt.show() を呼び出して円グラフを表示します。

4. Echarts に基づいたビッグデータの視覚化を構築する

4.1. echarts.js のインストール

まず echart をインストールする必要があります。

ダウンロードアドレス: https://archive.apache.org/dist/echarts/5.4.3/

または、ページコードに追加します。

<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/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/[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>

折れ線グラフのデータは狭い範囲に集中しているため、その効果は明ら​​かではありません。コードを調整してみましょう。

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/[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>

折れ線グラフを滑らかな折れ線グラフに変更します。

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/[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. 点線グラフ

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/[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. ラダー折れ線グラフ

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/[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. 面折れ線グラフ

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/[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. データ視覚化ヒストグラムの作成

 

<!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. データ可視化極座標ヒストグラムの作成

 

<!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>

 ビッグデータに関する記事:

         推奨読書:

【一生手を繋いでくれる人は見つかりましたか？】チャイニーズバレンタインデースペシャル
デジタル技術で古書を蘇らせることができるのか？
機嫌が悪いときは、AI 感情励ましツールを自分でトレーニングしてください (PALM 2.0 微調整に基づいています)
深層学習フレームワーク TensorFlow
AI 開発者のワークフロー、認識、ツールの統計
2023 年 6 月の開発者調査統計 - 最も人気のあるテクノロジー (2)
2023 年 6 月の開発者調査統計 - 最も人気のあるテクノロジー (1)
Aiさんに宗子を描くのを手伝ってもらいましょう。どんな感じになるでしょうか？

​​

​​

​​
写真の背景色を変更する (Python+opencv) 12種類の猫 大規模モデルに基づく仮想デジタル ヒューマン__仮想アンカーの例

​​

​​

​​
コンピュータ ビジョン__基本的な画像操作 (表示、読み取り、保存) ヒストグラム（カラーヒストグラム、グレースケールヒストグラム） ヒストグラムイコライゼーション（画像の明るさ、コントラストを調整）

​​

​​

​​

 音声認識の練習（Pythonコード）(1)

 人工知能の基礎

 コンピューター ビジョンの基礎__画像の機能

93d65dbd09604c4a8ed2c01df0eebc38.png​​

 matplotlib独自の描画スタイルエフェクト表示のクイックチェック（全28種類）

074cd3c255224c5aa21ff18fdc25053c.png​​
Three.js サンプル ___ 回転エルフ少女の詳細な説明 (完全なコードとリソース付き) (1)

fe88b78e78694570bf2d850ce83b1f69.png​​

​​

cb4b0d4015404390a7b673a2984d676a.png​​
立体多層バラ描画ソースコード__バラPython描画ソースコード集

 Python 3D ビジュアライゼーション (1)

 仕事をより良くする - ワードクラウドの作り方 Word Cloud (Python, WordCloud, stylecloudベース)

e84d6708316941d49a79ddd4f7fe5b27.png​​

938bc5a8bb454a41bfe0d4185da845dc.jpeg​​

0a4256d5e96d4624bdca36433237080b.png​​

 Python Format() 関数の使用法___詳細な例 (1) (完全な例、多数の例)___さまざまな書式置換、書式調整印刷

 code__Collection でロマンスを作成する (ハート、バラ、フロントエンド特殊効果のバラ、ハートを描画するための Python、matplotlib、Matlab、Java)

 Python大好きソースコード集（18モデル）

dc8796ddccbf4aec98ac5d3e09001348.jpeg​​

0f09e73712d149ff90f0048a096596c6.png​​

40e8b4631e2b486bab2a4ebb5bc9f410.png​​

 Python での Print() 関数の使用___詳細な例 (完全な、多数の例)

 Pythonの関数詳細解説とメソッド例の完全集（随時更新中）

 『Pythonリスト リスト完全例題詳細解説シリーズ(1)』＿シリーズ総合カタログ、リストコンセプト

09e08f86f127431cbfdfe395aa2f8bc9.png​​

​​
コードで中秋節を祝いましょう。ニシキヘビの亀の月餅を食べてみませんか?

 Python 演習のディレクトリ

03ed644f9b1d411ba41c59e0a5bdcc61.png​​

daecd7067e7c45abb875fc7a1a469f23.png​​

17b403c4307c4141b8544d02f95ea06c.png​​
イチゴのクマのパイソンカメの描画 (風車バージョン) ソースコード付き

 Strawberry Bear Python タートル描画コード (ローズ バージョン) ソース コード付き

 イチゴクマパイソン描画 (春祭りバージョン、クリスマスカウントダウンスノーフレークバージョン) ソースコード付き

4d9032c9cdf54f5f9193e45e4532898c.png​​

c5feeb25880d49c085b808bf4e041c86.png​​

 バズ・ライトイヤーのPythonタートル描画__ソースコード付き

 ピカチュウ パイソン カメ カメの描画 (パワー ボール バージョン) ソース コード付き

80007dbf51944725bf9cf4cfc75c5a13.png​​

1ab685d264ed4ae5b510dc7fbd0d1e55.jpeg​​

1750390dd9da4b39938a23ab447c6fb6.jpeg​​

 Node.js (v19.1.0npm 8.19.3) vue.js のインストールと構成のチュートリアル (超詳細)

 色と色比較表(1) (16進数、RGB、CMYK、HSV、中国語名、英語名)

 2023 年 4 月の権威ある組織の数____プログラミング言語ランキング__給与状況

aa17177aec9b4e5eb19b5d9675302de8.png​​​

38266b5036414624875447abd5311e4d.png​​

6824ba7870344be68efb5c5f4e1dbbcf.png​​

 携帯電話の画面が壊れました____内部データをエクスポートする方法 (18 の方法)

 [CSDN Cloud IDE] 個人的な経験と提案 (超詳細な操作チュートリアルを含む) (Python、webGL ディレクション)

 jdkのインストールパスを確認し、Windows上で複数のjava jdkの共存解決を実現し、java19インストール後のターミナル文字化けを解決する

​​
Vue3 プロジェクト構築チュートリアル (create-vue、vite、Vite + Vue に基づく)

fea225cb9ec14b60b2d1b797dd8278a2.png​​

bba02a1c4617422c9fbccbf5325850d9.png​​

37d6aa3e03e241fa8db72ccdfb8f716b.png​​
2023年春祭りの祝福の第2弾 - 守護ウサギを送って、皆さんを暖かくしてください[html5 css3]描画と動くウサギ、クールな充電、特別なフォント

 ユニークでオリジナル、美しくロマンチックなバレンタインデーの告白アルバム、（コピー可能）（html5、css3、svg）告白ラブコード（4セット）

 SVG作例徹底解説シリーズ(1)（SVGの概要、ビットマップとベクターグラフィックス（図）の違い、SVG応用例）

5d409c8f397a45c986ca2af7b7e725c9.png​​

6176c4061c72430eb100750af6fc4d0e.png​​

1f53fb9c6e8b4482813326affe6a82ff.png​​
[プログラミング ライフ] カタールでのワールド カップ要素の Python タートル描画 (ソース コード付き)、5 つのワールド カップ テーマ フロントエンド特殊効果 (ソース コード付き) HTML+CSS+svg で絶妙なカラフルな点滅ライトを描画 クリスマスツリー、HTML+CSS+Js リアルタイム新年カウントダウン (ソースコード付き)

 2023 年春節祝福シリーズの最初の部分 (パート 1) (祝福のために孔明灯籠を飛ばし、皆の健康を祈る) (完全なソース コードとリソースは無料でダウンロードできます)

fffa2098008b4dc68c00a172f67c538d.png​​

5218ac5338014f389c21bdf1bfa1c599.png​​

c6374d75c29942f2aa577ce9c5c2e12b.png​​

 Tomcat11、tomcat10のインストール構成（Windows環境）（詳細図）

 Tomcat ポートの構成 (詳細)

 Tomcat 起動フラッシュバック問題解決セット (詳細 8 つのカテゴリ)

おすすめ

転載: blog.csdn.net/weixin_69553582/article/details/132518203
おすすめ
大規模な言語モデルに基づくオープンソースのナレッジベースの質問と回答システムである MaxKB GitHub Star の数が 5,000 を超えました。
ランキング
短线选股的一种方法
Javaクライアントでのユーバーのリズムワークフローで睡眠時間をキャンセルし、再スケジュール
CALIPSOデータバッチダウンロード方式
LeetCode アルゴリズム再帰クラス - ソードはオファー 26 を参照します。 ツリーの部分構造
HTMLのインポート外部CSS、JavaScriptの論文
PostgreSQL 13.1、12.5、11.10、10.15、9.6.20、および9.5.24がリリースされました
アップルは、エラーメッセージがポテトに接続されていた実行する方法ポテトポテトショーをダウンロードすることができません
あなたは空腹で突然電話を切っていますか？これはテクノロジーの裏側ですか、それともテスト用の銃ですか？
VIMエディタのヒント
動的計画法の最長共通部分列（LCS）
アーカイブ
もっと
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)

コードワールド

© 2018 codetd.com