技術標籤：資料分析資料視覺化視覺化echarts資料分析

文章目錄

• 前言
• 一、ECharts是什麼？
• 二、ECharts入門案例
• • 1.環境搭建
  • 2.折線圖與曲線圖
  • 3.柱狀圖與進度條
  • 4.餅圖
• 三、總結

前言

好久沒正經學習了。之前一直對資料視覺化超級感興趣的，好懷念以前自由自在，能學自己喜歡的東西的日子呀！

提示：以下是本篇文章正文內容，下面案例可供參考

一、ECharts是什麼？

ECharts 是一個使用 JavaScript 實現的開源視覺化庫，涵蓋各行業圖表，滿足各種需求。

是一款有百度推出的視覺化類庫，文件全中文，學習十分友好。現已託管至apache。

二、ECharts入門案例

1.環境搭建

下載並將ECharts引入html檔案

放置ECharts圖表的容器必須是一個有大小的容器（如<div>，必須指定它的寬高）

ECharts使用JSON生成配置資訊。下面詳細講講每個配置的含義

程式碼如下（示例）：

• color: 指定資料顏色(柱狀條或線段)
• tooltip: 工具箱
• grid:定位圖表的位置
• xAxis / yAxis : json陣列,指定X/Y軸的資訊
• series : 資料的展示方式與資料值的定義
• legend : 圖例元件

這些配置會在下文給出詳細解釋

2.折線圖與曲線圖

程式碼如下（示例）：

option2 = {
    title: {
        text:
 
 '折線圖'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['專案1', '專案2']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis:
 
 {
        type: 'category',
        boundaryGap: false,
        data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '專案1',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '專案2',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        
    ]
};

3.柱狀圖與進度條

(1).柱狀圖

<div id="barCharts" class="continer" style="width: 300px; height: 300px;"></div>
<script type="text/javascript">
	 var chart = echarts.init(document.getElementById('barCharts'));
	 option = {
		color:['#c33'],
		tooltip:{
			trigger:'axis',
			axisPointer:{
				type:'shadow',
			},
		},
		toolbox: {
			feature: {
				saveAsImage: {} //儲存為圖片
			}
		},
		grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true //區域是否包含座標軸的刻度標籤
		},
		xAxis: [ //json陣列
			{
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], //X軸標籤
				axisTick: {
				alignWithLabel: true //刻度對於柱狀條居中
				}
			}
		],
		yAxis: [
			{
				type: 'value' //縱座標
			}
		],
		series: [
			{
				name: '銷售額', //資料標註
				type: 'bar', //柱狀圖
				barWidth: '50%', //柱狀條寬度 
				data: [10, 52, 200, 334, 390, 330, 220] //縱軸資料
			}
		]
	};
	 chart.setOption(option);
</script>

(2).進度條

4.餅圖

var option03 = {
toolbox:{
	feature: {
		saveAsImage: {}
	}
},
series : [
	{
		name: '資料',
		type: 'pie',
		radius: '55%',
		roseType: 'angle',
		data:[
			{value:235, name:'專案1'},
			{value:274, name:'專案2'},
			{value:310, name:'專案3'},
			{value:335, name:'專案4'},
			{value:400, name:'專案5'}
		]
	}
]
};

三、總結

對於這種類庫,說白了就是在考驗使用者會不會抄,能不能看懂程式碼. 對於簡單的入門 , 是非常非常容易的.