HTML圖標製作工具----ECharts

ECharts是由百度的商業前端團隊開發的一個圖表開源項目, 貌似功能很強大,由於項目需求,簡單的學習了一下.他的API文檔是全中文的學習起來很方便.

本人文筆不好. 其他的不多囉嗦,簡單記錄一下學習筆記.

首先,它是基於ZRender,(這個也是有百度商業前端團隊開發的一個圖形倉庫,視圖渲染,交互控制的一個開源項目),所以使用ECharts同時還要用到ZRender

需要分別同時加入到項目中.

我用的是seajs模塊加載器加載js文件所以我的目錄如下:

js文件代碼:

define(function(require, exports, module) {
	var $ = require('jquery');
	var echarts = require('echarts/echarts');//我對seajs使用不是很熟練,所以只能寫硬路徑,有會的大神希望教教我.
	require('echarts/chart/line');// 圖表按需加載，需要主動require
	$(document).ready(function(data) {
		var myChart = echarts.init(document.getElementById('concern-statistics'));
		option = {
			    title : {
			        text: '未來一週氣溫變化',
			        subtext: '純屬虛構'
			    },
			   
			    calculable : true,
			    xAxis : [
			        {
			            type : 'category',
			            boundaryGap : false,
			            data : ['週一','週二','週三','週四','週五','週六','週日']
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value',
			            axisLabel : {
			                formatter: '{value} °C'
			            },
			            splitArea : {show : true}
			        }
			    ],
			    series : [
			        {
			            name:'最高氣溫',
			            type:'line',
			            itemStyle: {
			                normal: {
			                    lineStyle: {
			                        shadowColor : 'rgba(0,0,0,0.4)'
			                    }
			                }
			            },
			            data:[11, 11, 15, 13, 12, 13, 10]
			        },
			        {
			            name:'最低氣溫',
			            type:'line',
			            itemStyle: {
			                normal: {
			                    lineStyle: {
			                        shadowColor : 'rgba(0,0,0,0.4)'
			                    }
			                }
			            },
			            data:[-2, 1, 2, 5, 3, 2, 0]
			        }
			    ]
			};
		myChart.setOption(option);
	});
});

html代碼

<div class="tab-pane active" id="concern-statistics">統計表</div>

CSS代碼(放置圖標的容器一定要有高度.)

#concern-statistics {
	height: 400px;
	overflow: hidden;
	padding: 10px;
	margin-bottom: 10px;
	border: 1px solid #e3e3e3;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

注意:這裏可能是路徑配置原因,所以不得不更改一下echarts.js:

var zrender = require('zrender/zrender');

不然的話找不到zrender.js文件.

到此一個echarts的demo就完成了.