Score
0
Watch 2 Star 2 Fork 0

joylei / riot-echartsTypeScriptMIT

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
a no-brainer riot tag to display charts easily with Baidu ECharts, like Google Chart does spread retract

Clone or download
Loading...
README.md

riot-echarts

a no-brainer riot tag to display charts easily with Baidu ECharts, like Google Chart does.

riot-echarts demo

Features

  • take advantage of ECharts

  • easy to present data with a DataTable structure. You'll feel familiar with this if you have used Google Charts,

  • friendly to SQL queries(no row-column transforms)

usage

import ECharts or use CDN

https://cdn.bootcss.com/echarts/3.3.2/echarts.min.js

install riot-echarts

npm install riot-echarts --save

import riot-echarts

import 'riot-echarts'
<app>
    <p>chart</p>
    <echart simple="{ option }"></echart>
    <script>
        this.option = {type:'pie',
            data: [
                ['name', 'value'],
                ['a', 10],
                ['b', 20],
                ['c', 25],
                ['d', 15],
                ['e', 55]
            ]
        }
    </script>
    <style>
        echart {
            display:block;
            width: 100%;
            height: 500px;
        }
    </style>
</app>

Note: the container of charts must be visible and have determined height and width before chart rendering.

For more information, see example.

riot echart tag supported attributes

simple attribute

simple={type:string, data, color:Array<string>}

type: pie | bar | line

data:

  • can be an array, first line of which are columns

  • can be can DataTable object

  • can be an thenable object, which eventually be resolved to an array or DataTable

  • can be an function that returns array,DataTable or thenable

  • can be an function that accept an callback and eventually be resolved to an array or DataTable

color: color sheets, if not provided will use built-in ones

option attribute

option={}

You can provide ECharts option directly by this attribute. see docs of ECharts for usages.

Plans

  • add more chart types

  • make DataTable headers more meaningful for chart types and other informations

  • make it extensible for custom chart types

License

MIT

Comments ( 0 )

Sign in for post a comment

TypeScript
1
https://gitee.com/wowin/riot-echarts.git
git@gitee.com:wowin/riot-echarts.git
wowin
riot-echarts
riot-echarts
master

Help Search