juneyuzhujun / echarts-rails

Wrappers of Echarts Javascript Chart Libary for Rails 3.1+

echarts-rails

Wrappers of ECharts Javascript Chart Libary for Rails 3.1+

Check out how to use ECharts at http://echarts.baidu.com

• echarts-rails 0.1.0 -> ECharts 3.1.3
• echarts-rails 0.1.4 -> ECharts 3.2.3
• echarts-rails 0.1.5 -> ECharts 3.3.0
• echarts-rails 0.1.6 -> ECharts 3.3.2
• echarts-rails 0.1.7 -> ECharts 3.7.1
• echarts-rails 0.1.8 -> ECharts 3.7.2

Installation

Add this line to your application's Gemfile:

gem 'echarts-rails'

And then execute:

$ bundle

Or install it yourself as:

$ gem install echarts-rails

Now you need to edit your app/assets/javascripts/application.js file and add echarts , echarts-simple or echarts-common into it:

//= require echarts

The difference between echarts , echarts.simple or echarts.common :

• echarts-en: Includes all charts and components.

• echarts.simple-en: Only includes basic charts: line bar pie.

• echarts.common-en: Includes common charts and components: line bar pie scatter legend tooltip toolbox markLine markPoint markArea dataZoom

• echarts: 包含所有图表组件。

• echarts.simple: 只包含基础图表： 折 柱 饼。

• echarts.common: 包含常用的图表组件：折 柱 饼 散点 图例 工具栏 标注 标线 数据区域缩放

And you're done!

Usage

<!-- prepare a DOM container with width and height -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // based on prepared DOM, initialize echarts instance
    var myChart = echarts.init(document.getElementById('main'));

    // specify chart configuration item and data
    var option = {
        title: {
            text: 'ECharts entry example'
        },
        tooltip: {},
        legend: {
            data:['Sales']
        },
        xAxis: {
            data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
        },
        yAxis: {},
        series: [{
            name: 'Sales',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // use configuration item and data specified to show chart
    myChart.setOption(option);
</script>

You can also go to ECharts Gallery to view examples.

License

The gem is available as open source under the BSD license.

ECharts is available under the BSD license.