初識js-charts和E-charts

時間 2019-11-12

原文原文鏈接

在前端開發的過程當中，常常會使用到圖表相關的東西，不少時候，圖表在展現數據方面有着無與倫比的優點。下面咱們就來看看兩個經常使用的圖表相關的插件jscharts和ECharts。前者，功能相對單一，可是不依賴任何其餘插件；後者功能豐富，有時候須要依賴部分插件，咱們可根據須要選擇合適的插件來使用。javascript

jscharts

什麼是JS Charts?

JS Charts是一款基於JavaScript的幾乎不須要再從新編碼的圖表編譯器。經過它，使用JavaScript來繪製圖表將會是一件很輕鬆的事情，由於你只須要使用客戶端編碼就能夠實現，不須要額外添加其餘插件或者服務端模塊，只須要引入文件，準備好數據（xml，json或者數組），就能夠生成圖表！html

JS Charts能夠用來繪製不一樣類型的圖表，例如餅狀圖，柱狀圖以及簡單的折線圖等等。前端

簡單使用：java

（1）首先，咱們引入文件，咱們只須要引入一個js文件jscharts.js，它包含了主要的代碼和用來適配ie瀏覽器的canvas函數。git

<script type="text/javascript" src="jscharts.js"></script>

（2）容器，第二步是準備一個未來用來容納圖表的容器，它能夠是一個簡單的div標籤，這個標籤必需要有一個獨一無二的idgithub

<div id="chartcontainer">This is just a replacement in case Javascript is not available or used for SEO purposes</div>

　這個容器的內容將會被jschart渲染出來的圖表代替。json

（3）繪製第一個圖表，第三步，咱們須要幾行JavaScript代碼。包括：用於繪製圖表的數據，簡單的二維數組。每個子元素數組包含兩個元素，這兩個元素將是一個折線圖的兩個頂點，或者其餘圖表中的某個元素。canvas

	<script type="text/javascript">
		var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
		var myChart = new JSChart('chartcontainer', 'line');
		myChart.setDataArray(myData);
		myChart.draw();
	</script>

簡單的說明一下，首先定義數據，而後選擇咱們寫好的容器，加上類型參數，建立新的圖表對象。第三步，設置圖表對象用來渲染的數據，最後，繪製。（使用免費版的時，會自動添加他們產品的logo）數組

使用xml數據繪製：瀏覽器

<?xml version="1.0"?>
<JSChart>
	<dataset type="bar">
		<data unit="10" value="20"/>
		<data unit="15" value="10"/>
		<data unit="20" value="30"/>
		<data unit="25" value="10"/>
		<data unit="30" value="5"/>
	</dataset>
</JSChart>

var myChart = new JSChart('chartcontainer', 'bar');
myChart.setDataXML('data.xml');
myChart.draw();

使用json數據繪製：

{
	"JSChart": {
		"datasets": [
			{
				"type": "pie",
				"data": [
					{
						"unit": "Unit_1",
						"value": "20"
					}, {
						"unit": "Unit_2",
						"value": "10"
					}, {
						"unit": "Unit_3",
						"value": "30"
					}, {
						"unit": "Unit_4",
						"value": "10"
					}, {
						"unit": "Unit_5",
						"value": "5"
					}
				]
			}
		]
	}
}

var myChart = new JSChart('chartcontainer', 'pie');
myChart.setDataJSON('data.json');
myChart.draw();

（4）去除水印：

若是免費版，將會始終有一個logo水印，可使用網友提供的免費方案去除水印：「在 jscharts.js文件中搜索fs.bg一共出現二處，根據版本不一樣，bg後面的不同個人出現的是fs.bg.2v而後刪除這二句代碼，把後面的括號和分號也一塊兒刪除啊

而後logo水印就去掉了，標題中還有 JS charts ，這個是若是你在JS中不指定標題，默認打印的，因此須要設置一下標題，myChart.setTitle('title'); 在文件中的初始化代碼到處加上這句代碼就OK了，title換成你要的標題，注意必定要在myChart.draw();以前設置標題」。

經過使用購買版的key 也能夠去除水印，使用方式以下：

<script type="text/javascript">
	var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
	var myChart = new JSChart('chartcontainer', 'line', 'b4949a117e0bff9be30');
	myChart.setDataArray(myData);
	myChart.draw();
</script>

ECharts

ECharts是一個使用 JavaScript 實現的開源可視化庫，能夠流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表。

下載的時候咱們有不少選擇，根據本身需求下載合適版本便可：

簡單使用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="js/echarts.min.js" ></script>
</head>
<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項和數據
        var option = {
            title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>

因爲，echarts功能強大，這裏對它就先寫個簡單的例子，其餘強大功能用到的時候再深刻了解。　