統計資料圖echarts.js應用

ECharts，資料圖表，一個純Javascript的圖表庫。支援折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖等等

圖表名詞先簡單了解裡line（折線圖），bar(柱狀圖）

1.在頁面引入echarts.min.js

2.建立圖示div

3.核心代碼

var myChart = echarts.init(document.getElementById('mychart'));
		option = {
		    title : {
		        text: '            企業部門人員統計表'
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            dataView : {show: true, readOnly: false},
		            magicType : {show: true, type: ['line', 'bar']},
		            restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    tooltip : {
		        trigger: 'axis',
		        formatter: "當月統計 : <br/>{b} : {c}人"
		    },
		    xAxis : [//橫軸
		        {
		            type : 'category',
		            data :xdata //['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
		        }
		    ],
		    yAxis : [//縱軸
		        {
		            type : 'category',
		            axisLine : {onZero: false},
		            axisLabel : {
		                formatter: '{value} 人'
		            },
		           
		        }
		    ],
		    series : [//資料
		        {
		            type:'line',//折線圖
		            smooth:true,
		            itemStyle: {
		                normal: {
		                    lineStyle: {
		                        shadowColor : 'rgba(0,0,0,0.4)'
		                    }
		                }
		            },
		            data:ydata//[2, 6,8,10,12,15,8,9,6,12,11,14]
		        }
		    ]
		};
        // 為echarts對象加載資料 
        myChart.setOption(option); 
           

4.簡單來說就是需要資料數組

比如x軸時間，y人數