ECharts的簡單使用過程

網頁中經常要使用圖表，以前使用的是highcharts插件，現在發現echarts使用起來和highcharts差不多，但是個人感覺echarts更酷炫，以下是echarts的使用過程，其實highcharts使用方法也跟這個差不多，幾乎一樣。

 

1、使用基礎圖形引入js

<script type="text/javascript" src="/js/jBox/jquery-1.4.2.min.js"></script>

引入<script type="text/javascript" src="/js/echarts.min.js"></script>

 

2、需要顯示組件，如圖例，引入組件

還需要引入<script type="text/javascript" src="/js/echarts-all.js"></script>

 

3、畫布：必須指定高度，否則不會顯示

<div class="Chart" id="Chart" style="height: 500px;"></div>

 

4、使用，定義、顯示

var cjhq_chart ;
var option = {
            title: {
                text: '均價（元/平米）'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data: legendData//數組
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type: 'category',
                    boundaryGap : false,
                    data : xAxisData//數組
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
                
            ],
            series : ySeries//數組
        };
cjhq_chart = echarts.init(document.getElementById('Chart'));
cjhq_chart.setOption(option, true);

 

 

5、動態創建

option.title.text = obj.busName;

option.xAxis[0].data = xAxisDataSingle;

option.series = ySeriesSingle;

option.legend.data = [];

重新賦值option里面的屬性的值，再創建面板顯示

var div = $('<div class="ChartSingle" id="'+obj.busCode+'" style="height: 300px;"></div>');

div.appendTo($('#single'));

cjhq_chart = echarts.init(document.getElementById(obj.busCode));

cjhq_chart.setOption(option, true);

 

6、更多功能參考echarts api

示例 http://echarts.baidu.com/examples.html

首頁 http://echarts.baidu.com/

 

僅供參考，不足之處還請見諒，歡迎指正！轉載請標明出處。如有疑問，歡迎評論或者聯系我郵箱 [e-mail]