Android使用ECharts详解简书,系统了解ECharts的使用

  • Post author:
  • Post category:其他


ECharts是一款开源的统计图表框架,ECharts 底层依赖 ZRender,ZRender是一个轻量级的二维绘制库。ECharts的使用也是非常的简单,网上有很多教程,这里再简单的整理一下。

首先,echarts.min.js的引入;

可以去官网或github上下载合适的版本,也可以优雅地使用npm install echarts –save命令下载,这里从github下载最新的版本4.7.0;

第二,在进行统计图的使用之前,还有一点非常重要,那就是主题的设置。

echarts默认有三个主题,第一个是默认的主题,第二个是dark,黑色的背景;第三个是light,白色的背景;统计图表里的颜色,有默认值。

很多同事,包括我自己,一上来就画统计图,还不知道有主题设置这一说,后面在调整统计图里的色调时,费了老大的劲了,而且越调整越不协调,搞得花里胡哨的。通过设置主题可以避免这个繁琐的环节。

先看看效果,有对比,才有差异;主题设置是很重要的一环,选对了主题,后面就不需要手动设置color调整颜色了,调色绝对是个费时费力不讨好的活,毕竟每个人的审美观不同。选对了主题,就不用拘于调色这种小节了,多省事。

就用饼图,做三种主题的的区分吧;

386500167ae0

默认主题

386500167ae0

dark主题

386500167ae0

light主题

myProject

// 绘制图表。

var pieMain = echarts.init(document.getElementById(‘main’),’light’);//使用默认样式、dark、light;

pieMain.setOption({

series: {

type: ‘pie’,

data: [

{name: ‘A’, value: 1212},

{name: ‘B’, value: 2323},

{name: ‘C’, value: 1919}

]

}

});

这三种主题,如果都不满意,那么可以通过 ECharts主题定制 自定义主题,这些主题,有主色调,媚而不妖,太耐看了。

//设置主题

$.getJSON(‘lib/wonderland.json’, function (themeJSON) {

echarts.registerTheme(‘