统计数据图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人数