ECharts的基本使用與方法

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

繪製數據圖表html

一、柱狀圖java

柱狀圖效果瀏覽瀏覽器

代碼實現echarts

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script 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>

二、折線圖dom

<!DOCTYPE html>
<html>
<head>     <meta charset="utf-8">     <title>數據統計圖：折線圖</title>     <!-- 引入 ECharts 文件 這裏選擇min.js壓縮版的echarts -->     <script 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: '將來一週氣溫變化'             },             tooltip:{                 trigger: 'axis'             },             xAxis:{                 type: 'category',                 data: ['週一','週二','週三','週四','週五','週六','週日']             },             yAxis:{                 type: 'value',                 axisLabel: {  //座標軸刻度標籤的相關設置。
                    formatter: '{value} °C'  // 使用字符串模板，模板變量爲刻度默認標籤 {value}
                }             },             series:[                 {                     name:'最高氣溫',                     type:'line',                     data:[11, 11, 15, 13, 12, 13, 10],                 },                 {                     name:'最低氣溫',                     type:'line',                     data:[1, -2, 2, 5, 3, 2, 0],                 }             ]         };         // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);     </script>

</body>
</html>

三、餅圖spa

代碼以下：code

<!-- 爲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: '小杰公司年齡階段的員工佔比',
					   x:'center'//水平居中
		           },
		       tooltip: {//提示框組件
				   trigger:'item',//'item'數據項圖形觸發,主要在散點圖,餅圖等無類目軸的圖表中使用
				   formatter:"{a}<br/>{b}:{c} ({d}%)"
			   },
		       series:[
				   {
					   name:'年齡佔比',
					   type:'pie',
					   radius:'55%',
					   center:['50%','60%'],
					   data:[
						   {value:80,name:'20-25歲'},
						   {value:30,name:'26-30歲'},
						   {value:20,name:'31-35歲'},
						   {value:8,name:'36-40歲'},
						   {value:5,name:'41歲以上'}
					   ],
					   itemStyle:{
						   emphasis:{
							   shadowBlur:10,
							   shadowOffsetX:0,
							   shadowColor:'rgba(0,0,0,0.5)'
						   }
					   }
				   }
			   ]
		       };
		
		       // 使用剛指定的配置項和數據顯示圖表。
		       myChart.setOption(option);
		   </script>

結語orm

以上繪製的圖表是數據圖中用的頻率較高的三種。不只如此，ECharts 還可用於地理數據可視化的地圖，用於關係數據可視化的關係圖，多維數據可視化的平行座標，還有用於 BI 的漏斗圖，而且支持圖與圖之間的混搭。更多有關 ECharts 的使用方法，可參考 ECharts 的官方文檔：htm

https://echarts.baidu.com/index.html