|
最近項(xiàng)目中要做圖形報(bào)表,，要求使用echarts實(shí)現(xiàn),，圖形報(bào)表有很多中實(shí)現(xiàn)之前也接觸過,，但echarts還是頭一次聽說,，正好可以趁這個(gè)機(jī)會(huì)好好學(xué)習(xí)一下它。
之前不知道就不知道啦,，現(xiàn)在知道了就了不得了,，一下子喜歡上了echarts，今后項(xiàng)目中要是讓做報(bào)表我肯定首選echarts在沒有強(qiáng)制要求的前提下,。主要是echarts太完美了：1,，開源軟件，無私的為我們提供漂亮的圖形界面,；2,，使用簡單,，默默的為我們封裝了重要的js，只要會(huì)引用就會(huì)使用echarts,；3,，種類多，echarts為我們提供了各種圖標(biāo),，其中最具象征的就是地圖了,；4，兼容性好,，基于html5動(dòng)畫渲染超棒,。
echarts官網(wǎng) 提供了源碼和說明文檔，使用echarts需要先到官網(wǎng)下載需要的js源文件,。
官網(wǎng)上的demo中夾雜著很多我們用不到的東西,，想使用餅狀圖就得從demo中把不用的去掉，劈植斬葉留下最原始的功能實(shí)現(xiàn),。這樣畢竟比較費(fèi)時(shí),，我就在裁剪后的代碼中加以總結(jié)于是乎新的使用教程如下所示：
echarts餅狀圖實(shí)現(xiàn)步驟：
1，在簡單的html中引入js文件
- <head>
- <meta charset="utf-8">
- <title>Charts demo</title>
- <script src="js/esl.js"></script>
- </head>
- <body>
- </body>
2,，為圖形準(zhǔn)備容器
- <head>
- <meta charset="utf-8">
- <title>Charts demo</title>
- <script src="js/esl.js"></script>
- </head>
- <body>
-
- <div id="picturePlace"></div>
-
- </body>
就是在html中添加一個(gè)div給定id,，圖表就會(huì)顯示在div中。
3,，模塊導(dǎo)入js
- <head>
- <meta charset="utf-8">
- <title>Charts demo</title>
- <script src="js/esl.js"></script>
- </head>
- <body>
- <div id="picturePlace"></div>
- <script type="text/javascript">
- // 路徑配置
- require.config({
- paths:{
- 'echarts' : 'js/echarts',
- 'echarts/chart/pie' : 'js/echarts'
- }
- });
- </script>
- </body>
4,，添加顯示數(shù)據(jù)
- <head>
- <meta charset="utf-8">
- <title>Charts demo</title>
- <script src="js/esl.js"></script>
- </head>
- <body>
- <div id="picturePlace"></div>
- <script type="text/javascript">
- // 路徑配置
- require.config({
- paths:{
- 'echarts' : 'js/echarts',
- 'echarts/chart/pie' : 'js/echarts'
- }
- });
-
- // 使用
- require(
- [
- 'echarts',
- 'echarts/chart/pie' // 使用柱狀圖就加載bar模塊，按需加載
- ],
- function (ec) {
- // 基于準(zhǔn)備好的dom,，初始化echarts圖表
- var myChart = ec.init(document.getElementById('<span style="font-family:SimSun;">picturePlace</span><span style="font-family:FangSong_GB2312;">'</span>));
-
- option = {
- title : {
- text: '某站點(diǎn)用戶訪問來源',
- subtext: '純屬虛構(gòu)',
- x:'center'
- },
- tooltip : {
- trigger: 'item',
- formatter: "{a} <br/>, : {c} (3squ974rb%)"
- },
- legend: {
- orient : 'vertical',
- x : 'left',
- data:['直接訪問','郵件營銷','聯(lián)盟廣告','視頻廣告','搜索引擎']
- },
- toolbox: {
- show : true,
- feature : {
- mark : {show: true},
- dataView : {show: true, readOnly: false},
- restore : {show: true},
- saveAsImage : {show: true}
- }
- },
- calculable : true,
- series : [
- {
- name:'訪問來源',
- type:'pie',
- radius : '55%',
- center: ['50%', '60%'],
- data:[
- {value:335, name:'直接訪問'},
- {value:310, name:'郵件營銷'},
- {value:234, name:'聯(lián)盟廣告'},
- {value:135, name:'視頻廣告'},
- {value:1548, name:'搜索引擎'}
- ]
- }
- ]
- };
-
- // 為echarts對(duì)象加載數(shù)據(jù)
- myChart.setOption(option);
- }
- );
- </script>
- </body>
5，運(yùn)行程序顯示結(jié)果
以上是餅狀圖的實(shí)現(xiàn)步驟,，柱狀圖散點(diǎn)圖跟這個(gè)類似就是引用js時(shí)餅狀圖是pie,，柱狀圖是bar，對(duì)應(yīng)的option里面的數(shù)據(jù)不同,，程序的架子是一樣的,。。
點(diǎn)擊下載源碼：
地址1,，地址2
|
