Echarts之散點圖、地圖、雷達圖、關係圖、詞雲圖、樹形圖

原創 阿坨 2020-07-04 18:59

文章目錄

散點圖

代碼實現如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>

<body>
    <div id="scatter" style="widows:600px;height:400px"></div>
    <script>
        var scattr_chart = echarts.init(document.getElementById("scatter"));
        var scattr_option = {
        	//背景色漸變
        	backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
        		offset: 0.3,
        		color: '#f7f8fa'
    		}, {
        	offset: 1,
        	color: '#cdd0d5'
    		}]),
    		//標題
            title: {
                text: "散點圖"
            },
            tooltip: {
                trigger: "axis"
            },
            yAxis: {},
            xAxis: {},
            series: [{
		        type: 'effectScatter',
		        symbolSize: 20,
		        data: [
		            [7.7, 9.2],
		            [6.4,8.5]
		        ]
		    },
            {
                symbolSize: 20,
                data: [
                    [10.0, 8.04],
                    [8.0, 6.95],
                    [13.0, 7.58],
                    [9.0, 8.81],
                    [11.0, 8.33],
                    [14.0, 9.96],
                    [6.0, 7.24],
                    [4.0, 4.26],
                    [12.0, 10.84],
                    [7.0, 4.82],
                    [5.0, 5.68]
                ],
                type: 'scatter'
            }]
        }
        scattr_chart.setOption(scattr_option);
    </script>
</body>
</html>

繪圖效果如下
在這裏插入圖片描述

地圖

代碼實現如下
注意：代碼依賴並引用了china.js文件
可以到我的百度雲下載該文件：https://pan.baidu.com/s/1qPovxvPcJiC7SduTWSuRxw
提取碼：ptab

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小坨的地圖</title>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
		<script src="js/china.js"></script>
	</head>
	<body>
		<div id="map" style="width: 600px;height: 400px;"></div>
		<script type="text/javascript">
      var map_chart = echarts.init(document.getElementById('map'));
     var data_area = [
         {
             name: "北京",
             value: 100,
         },
         {
             name: "上海",
             value: 200,
         },
         {
             name: "廣東",
             value: 300,
         }
     ]
     var map_option = {
     	title:{
     		text:"中國地圖"
     	},
     	//提示工具
         tooltip: {
         	//數據項圖形觸發
             trigger: 'item',
             formatter: "數量 <br> {b}: {c}"
         },
         visualMap: {
             seriesIndex: 0,
             min: 0,
             max: 300,
             left: 'left',
             top: 'bottom',
             text: ['高', '低'],// 文本，默認爲數值文本
             calculable: true //手柄是否能被拖拽
         },
         //網格離容器的位置
         grid: {
             height: 200,
             width: 8,
             right: 80,
             bottom: 10
         },
         geo: {
             map: 'china',
             //設定地圖的長寬比
             aspectScale: 0.75,
             //地圖組件離容器的位置
             top: 5,
             bottom: 15,
             label: {
                 normal: {
                     show: true,
                 },
                 emphasis: {
                     show: true,
                 }
             },
             roam: false,
         },
         series: [
             {
                 zlevel: 1,
                 name: 'china',
                 type: 'map',
                 mapType: 'china',
                 selectedMode: 'multiple',
                 roam: true,
                 left: 0,
                 right: '15%',
                 geoIndex: 0,
                 aspectScale: 0.75, //地圖長寬比
                 label: {
                     normal: {
                         show: true,
                     },
                     emphasis: {
                         show: true,
                     }
                 },
                 data: data_area
             }
         ]
     };

     map_chart.setOption(map_option);
 </script>
	</body>
</html>

繪圖效果如下
在這裏插入圖片描述

雷達圖

代碼實現如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小坨的雷達圖</title>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
	</head>
	<body>
		 <div id="radar" style="width: 600px;height:400px;"></div>
		 <script>
     var radar_chart = echarts.init(document.getElementById('radar'));
     var radar_option = option = {
         title: {
             text: '基礎雷達圖'
         },
         tooltip: {},
         legend: {
             data: ['預算分配（Allocated Budget）', '實際開銷（Actual Spending）']
         },
         radar: {
         	//六個頂點旁邊的小邊框
             name: {
                 textStyle: {
                     color: '#fff',
                     backgroundColor: '#999',
                     borderRadius: 3,
                     padding: [3, 5]
                 }
             },
             indicator: [
                 { name: '銷售（sales）', max: 6500 },
                 { name: '管理（Administration）', max: 16000 },
                 { name: '信息技術（Information Techology）', max: 30000 },
                 { name: '客服（Customer Support）', max: 38000 },
                 { name: '研發（Development）', max: 52000 },
                 { name: '市場（Marketing）', max: 25000 }
             ]
         },
         series: [{
             name: '預算 vs 開銷（Budget vs spending）',
             type: 'radar',
             // areaStyle: {normal: {}},
             data: [
                 {
                     value: [4300, 10000, 28000, 35000, 50000, 19000],
                     name: '預算分配（Allocated Budget）'
                 },
                 {
                     value: [5000, 14000, 28000, 31000, 42000, 21000],
                     name: '實際開銷（Actual Spending）'
                 }
             ]
         }]
     };
     radar_chart.setOption(radar_option);
 </script>
	</body>
</html>

繪圖效果如下
在這裏插入圖片描述

關係圖

代碼實現如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>關係圖</title>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
 <div id="graph" style="width: 600px; height: 400px;"></div>
 <script>
     var graph_chart = echarts.init(document.getElementById('graph'));
     var graph_option = option = {
		 title: {
		     text: '關係圖'
		 },
		 tooltip: {},
		 //數據更新動畫的時長
		 animationDurationUpdate: 1500,
		 //數據更新動畫的緩動效果
		 animationEasingUpdate: 'quinticInOut',
		 series: [
		     {
		         type: 'graph',
		         layout: 'none',
		         symbolSize: 50,
		         //開啓鼠標縮放和平移漫遊
		         roam: true,
		         label: {
		             show: true
		         },
		         //邊兩端的標記類型
		         edgeSymbol: ['circle', 'arrow'],
		         //邊兩端的標記大小
		         edgeSymbolSize: [4, 10],
		         //邊對應的文本標籤
		         edgeLabel: {
		             fontSize: 20
		         },
		         data: [{
		             name: '節點1',
		             x: 300,
		             y: 300
		         }, {
		             name: '節點2',
		             x: 800,
		             y: 300
		         }, {
		             name: '節點3',
		             x: 550,
		             y: 100
		         }, {
		             name: '節點4',
		             x: 550,
		             y: 500
		         }],
		         // links: [],
		         links: [{
		             source: 0,
		             target: 1,
		             symbolSize: [5, 20],
		             label: {
		                 show: true
		             },
		             lineStyle: {
		                 width: 5,
		                 //邊的曲度，值越大邊的曲度越大
		                 curveness: 0.2
		             }
		         }, {
		             source: '節點2',
		             target: '節點1',
		             label: {
		                 show: true
		             },
		             lineStyle: {
		                 curveness: 0.2
		             }
		         }, {
		             source: '節點1',
		             target: '節點3'
		         }, {
		             source: '節點2',
		             target: '節點3'
		         }, {
		             source: '節點2',
		             target: '節點4'
		         }, {
		             source: '節點1',
		             target: '節點4'
		         }],
		         lineStyle: {
		             opacity: 0.9,
		             width: 2,
		             curveness: 0
		         }
		     }
		 ]
		};
     graph_chart.setOption(graph_option);
 </script>
</body>
</html>

繪圖效果如下
在這裏插入圖片描述

詞雲圖

代碼實現如下
注意：代碼依賴並引用了echarts-wordcloud-min.js文件
該文件官方下載地址：https://github.com/ecomfe/echarts-wordcloud
私人下載地址：https://download.csdn.net/download/atuo200/12576510

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小坨的詞雲圖</title>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
	<script src="js/echarts-wordcloud.min.js"></script>
</head>

<body>
<div id="wordcloud" style="width: 600px; height: 400px;"></div>
<script>
     var wordcloud_chart = echarts.init(document.getElementById('wordcloud'));
     var wordcloud_option = {
     		 //數據項觸發工具，保持默認配置
             tooltip: {},
             series: [ {
                 type: 'wordCloud',
                 gridSize: 2,
                 //字體大小範圍
                 sizeRange: [12, 50],
                 //字體旋轉角度範圍
                 rotationRange: [-90, 90],
                 //詞雲圖形狀
                 shape: 'pentagon',
                 //詞雲圖長寬
                 width: 600,
                 height: 400,
                 drawOutOfBound: true,
                 textStyle: {
                 	 //字體隨機顏色
                     normal: {
                         color: function () {
                             return 'rgb(' + [
                                 Math.round(Math.random() * 160),
                                 Math.round(Math.random() * 160),
                                 Math.round(Math.random() * 160)
                             ].join(',') + ')';
                         }
                     },
                     emphasis: {
                     	 //陰影距離
                         shadowBlur: 10,
                         //陰影顏色
                         shadowColor: '#333'
                     }
                 },
                 data: [
                     {
                         name: 'Sam S Club',
                         value: 10000,
                         textStyle: {
                             normal: {
                                 color: 'black'
                             },
                             emphasis: {
                                 color: 'red'
                             }
                         }
                     },
                     {
                         name: 'Macys',
                         value: 6181
                     },
                     {
                         name: 'Amy Schumer',
                         value: 4386
                     },
                     {
                         name: 'Jurassic World',
                         value: 4055
                     },
                     {
                         name: 'Charter Communications',
                         value: 2467
                     },
                     {
                         name: 'Chick Fil A',
                         value: 2244
                     },
                     {
                         name: 'Planet Fitness',
                         value: 1898
                     },
                     {
                         name: 'Pitch Perfect',
                         value: 1484
                     },
                     {
                         name: 'Express',
                         value: 1112
                     },
                     {
                         name: 'Home',
                         value: 965
                     },
                     {
                         name: 'Johnny Depp',
                         value: 847
                     },
                     {
                         name: 'Lena Dunham',
                         value: 582
                     },
                     {
                         name: 'Lewis Hamilton',
                         value: 555
                     },
                     {
                         name: 'KXAN',
                         value: 550
                     },
                     {
                         name: 'Mary Ellen Mark',
                         value: 462
                     },
                     {
                         name: 'Farrah Abraham',
                         value: 366
                     },
                     {
                         name: 'Rita Ora',
                         value: 360
                     },
                     {
                         name: 'Serena Williams',
                         value: 282
                     },
                     {
                         name: 'NCAA baseball tournament',
                         value: 273
                     },
                     {
                         name: 'Point Break',
                         value: 265
                     }
                 ]
             } ]
         };

     wordcloud_chart.setOption(wordcloud_option);
</script>
</body>
</html>

繪圖效果如下
在這裏插入圖片描述

樹形圖

代碼實現如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>

<body>
    <div id="tree" style="width: 600px; height: 400px;"></div>

    <script>
        var data = {"name":"flare","children":[{"name":"analytics","children":[{"name":"cluster","children":[{"name":"AgglomerativeCluster","value":3938},{"name":"CommunityStructure","value":3812},{"name":"HierarchicalCluster","value":6714},{"name":"MergeEdge","value":743}]},{"name":"graph","children":[{"name":"BetweennessCentrality","value":3534},{"name":"LinkDistance","value":5731},{"name":"MaxFlowMinCut","value":7840},{"name":"ShortestPaths","value":5914},{"name":"SpanningTree","value":3416}]},{"name":"optimization","children":[{"name":"AspectRatioBanker","value":7074}]}],"collapsed":true},{"name":"animate","children":[{"name":"Easing","value":17010},{"name":"FunctionSequence","value":5842},{"name":"interpolate","children":[{"name":"ArrayInterpolator","value":1983},{"name":"ColorInterpolator","value":2047},{"name":"DateInterpolator","value":1375},{"name":"Interpolator","value":8746},{"name":"MatrixInterpolator","value":2202},{"name":"NumberInterpolator","value":1382},{"name":"ObjectInterpolator","value":1629},{"name":"PointInterpolator","value":1675},{"name":"RectangleInterpolator","value":2042}]},{"name":"ISchedulable","value":1041},{"name":"Parallel","value":5176},{"name":"Pause","value":449},{"name":"Scheduler","value":5593},{"name":"Sequence","value":5534},{"name":"Transition","value":9201},{"name":"Transitioner","value":19975},{"name":"TransitionEvent","value":1116},{"name":"Tween","value":6006}]}]};
        
        var tree_chart = echarts.init(document.getElementById('tree'));
        var tree_option = {
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series: [
                {
                    type: 'tree',

                    data: [data],
					//樹圖組件離容器的位置
                    top: '1%',
                    left: '15%',
                    bottom: '1%',
                    right: '7%',

                    symbolSize: 10,
                    //樹圖的佈局:中從左到右
                    orient: 'LR',
					
					//label描述了每個節點所對應的文本標籤的樣式
                    label: {
                        position: 'right',
                        //文本標籤塊文字垂直對齊方向
                        verticalAlign: 'middle',
                        //文本標籤塊文字水平對齊方向
                        align: 'left'
                    },
                    //葉子節點的特殊配置
                    leaves: {
                    	//葉子節點對應的文本標籤的特殊配置
                        label: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right'
                        }
                    },
                    //子樹摺疊和展開的交互，打開 
                    expandAndCollapse: true,
                    
                    animationDuration: 550, //初始動畫的時長
                    animationDurationUpdate: 750  //數據更新動畫的時長
                }
            ]
        }
        tree_chart.setOption(tree_option);
    </script>
</body>
</html>

繪圖效果如下
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

ECharts折線圖實例

因工作需要, 需求是線段的顏色變化,然後在網上找了很多實例, 文檔中也看了很多的配置屬性, 都沒有找到可以滿足自己要求的 ( 一般實例都是整體的一條線, 並沒有配置兩點之間來設置線的屬性 ), 所以只能自己搗鼓了 但是有個需求依

Nicis丶 2020-07-06 18:32:55

數據可視化----Echarts的基本使用和基本配置詳情

該教程來自 黑馬程序員的 pink老師的 數據可視化教程 ECharts數據可視化項目-大屏數據可視化展示-echarts 圖表製作-pink老師直播課更新完畢 一、數據可視化相關庫介紹 D3.js 目前 Web 端評價最高

独坐空山后 2020-07-06 18:06:05

ECharts 設置圖例形狀（三角，圓，矩形）

添加legeng的icon屬性即可： legend: { data: ['意大利', '巴西', '西班牙', '德國', '英國', '法國' , '美國' ,'俄羅斯'],

hrbust_cxl 2020-07-06 12:06:27

ECharts——繪製柱狀圖

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <sc

我的哥哥呦 2020-07-06 00:43:28

WPF編程，WPF項目中使用Echart控件畫圖的使用方法

Echarts官網 Echarts js文件下載 注意： ** 源碼是不能直接調用的，需要下載編譯後的dist文件夾下的echarts.js文件。通過查看文件可以看出，源碼echarts.js裏面調用很多別的文件，各種i

子不语 2020-07-05 16:42:49

ECharts地圖，ECharts自定義map地圖，自定義座標、圖標、icon

ECharts如何自定義省、市、縣區地圖(各省市直轄區的map地圖)，ECharts如何在地圖上自定義圖片、圖標，根據經緯度顯示自定義建築圖片、添加自定義覆蓋物   前言 最近在做一個項目中，需求是：要顯示中國某個省份下，某個市的地圖，而

MuGuiLin 2020-07-04 16:59:12

echarts實現漸變色

在color中有方法能生成漸變色： // 線性漸變，前四個參數分別是 x0, y0, x2, y2, 範圍從 0 - 1，相當於在圖形包圍盒中的百分比，如果 globalCoord 爲 `true`，則該四個值是絕對的像素位置

不积跬步,无以至千里. 2020-07-03 15:50:11

關於Echarts地圖擴展百度地圖的操作詳解

1，在通過Echarts做地圖操作的時候有三種方式：1種是利用Echarts官網的地圖文件（js，json）地圖導入到頁面中進行展示，這些例子官網很多。還有就是SVG圖片結合Echarts，這種操作在Echarts3.0之後我不是很清楚，

Rava722 2020-07-03 12:11:47

echarts中餅圖顯示不全（解決方法）

修改之前的效果 修改之後的效果 修改兩處 //第一處 tooltip: { trigger: 'item', //formatter: '{a} <br/>{b} : {c}mmo

Web_Lys 2020-07-02 01:22:57

Echarts圖表參數配置

文章目錄一 柱狀圖1.去掉刻度和軸線2.值顯示在圖形上&不同顏色3.文字超出截取 一 柱狀圖 1.去掉刻度和軸線 效果圖： 代碼： xAxis: { show: false, // 是否顯示軸 }, yAxis: { a

MytLoy 2020-07-02 00:58:53

Echarts繪製地圖帶標記tooltip

全國各地區JSON文件網址 .agency_information { width: 250px; padding: 5px 0; background: transparent; border-radius: 5

where_slr 2020-06-29 11:18:18

Echarts地圖上添加自定義圖片標註

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #chart{

jimjiayu 2020-06-28 21:27:51

echarts 解析

本文主要介紹echart的使用。 一、標題組件 tittle title:{ show: true, //是否顯示標題組件 text: '主標題', link: 'https://www.vitian.vip',

吴维炜 2020-06-28 06:58:48

vue 中 Echarts 富文本如何使用

很早的一篇文章中我寫了 Echarts 富文本不生效的解決辦法，很多人看不明白，再來解釋一下，如果你的寫法沒有出問題的話，在頁面中還是不能正常顯示你想要的樣式，那麼就要考慮是不是 echarts 的版本過低，建議升級使用 效果圖 和 代碼

Rainbow1995 2020-06-28 06:49:23

Error in created hook: "TypeError: Cannot read property 'getAttribute' of undefined"

表現：vue項目中，進入頁面的時候，報錯如下 原因：我把Echarts 的初始化，寫到了created 的回調函數中了， 解決辦法：將初始化寫到mounted的回調函數中 理由： created: 在模板渲染成html前調用，即通常初始

Rainbow1995 2020-06-28 06:49:23