echarts學習筆記(1) ---- 使用模塊化單文件引入

因爲最近需要用到echarts來做 BI 商業智能工具, 而echarts相對d3而言有了更好的方便控制的交互性, 在開發上也容易的多, 所以筆者將會在之後的幾篇文章當中,都會詳細的講echarts的使用.

這是筆者第一篇科技的博客文章, 希望大家多多提點, 謝謝!

echarts的第一步很好上手, 在此使用echarts推薦的模塊化單文件引入,  照着官方的入門教程做就ok.

具體地址: http://echarts.baidu.com/doc/start.html

官方說明不夠詳細, 爲了讓大家更快上手, 下面具體來介紹一下每段code的作用:

 require.config({
            paths:{ 
                'echarts' : 'http://echarts.baidu.com/build/echarts',  //這一段基本照抄，但是如果把echarts.js下到自己電腦的，可以用echart的路徑，但是不要加.js
                'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts' //用到什麼類型的圖表就按需寫好路徑，這裏取了bar
            }
        });

require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
            ],

 function (ec) {
                // 基於準備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('main')); //這一段告訴echarts要加載到哪個id上去。
                
                var option = {
                    tooltip: {//tooltip指的是鼠標移動某點時出來的框框，很簡單就搞定，因爲echarts已經有很多默認的設置
                        show: true
                    },
                    legend: {  //legend指的是圖例
                        data:['銷量']
                    },
                    xAxis : [  //這裏不用解釋，就是x軸，但是這樣的方式，很難提數據，之後的文章會講到。
                        {
                            type : 'category',
                            data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [  //各個bar的數據和情況
                        {
                            "name":"銷量",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                };
        
                // 爲echarts對象加載數據 
                myChart.setOption(option); 
            }
        );

這樣，很簡單的一個圖就做好了，之後要做什麼圖，就用這個改改參數就行了。