Charts

Project Url: frendyxzc/Charts
Introduction: 简单封装百度的 ECharts,轻松实现各种图表效果。
More: Author   ReportBugs   
Tags:
图表-chart-echarts-kotlin-地图-热力图-散点图-折线图-仪表盘-关系图-k线图-饼图-雷达图-

Android Charts base on ECharts

Demo:

001.jpg

Usage:

1. Add it in your root build.gradle at the end of repositories:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

2. Add the dependency:

dependencies {
    compile 'com.github.frendyxzc:Charts:0.0.2'
}

3. Draw charts:

3.1 Handle datas on Android:

chartView.setType(1)
chartView.setDataSource(this)
override fun markChartOptions(): GsonOption {
    return getPieChartOptions()
}
fun getPieChartOptions(): GsonOption {
    val option = GsonOption()
    option.tooltip().trigger(Trigger.item).formatter("{a} <br/>{b} : {c} ({d}%)")
    option.legend().data("直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎");

    val pie = getPie().center("50%", "45%").radius("50%")
    pie.label().normal().show(true).formatter("{b}{c}({d}%)")
    option.series(pie)
    return option
}

fun getPie(): Pie {
    return Pie().name("访问来源").data(
            PieData("直接访问", 335),
            PieData("邮件营销", 310),
            PieData("联盟广告", 274),
            PieData("视频广告", 235),
            PieData("搜索引擎", 400))
}
var option = JSON.parse(Android.getChartOptions());
chart.setOption(option);

3.2 Handle datas on JS (load ready-made ECharts directly):

chartView.loadUrl("file:///android_asset/echart/biz/map.html")
function load() {
    option = {
        title: {
            text: 'iphone 销量',
            subtext: '纯属虚构',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data:['iphone3','iphone4','iphone5']
        },
        visualMap: {
            min: 0,
            max: 2500,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],           // 文本,默认为数值文本
            calculable: true
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            ...
        ]
    };

    chart.setOption(option);
}

Todo:

  • Wrap with Kotlin DSL
  • ...

More info:

Apps
About Me
GitHub: Trinea
Facebook: Dev Tools