Echarts简单折线/柱状图混合实例

时间:2024-04-05 15:37:53

    前段时间面试+学校项目占用了小生很大一部分时间,博客也没有在记录了。在这样下去上个月获得的“持之以恒”勋章就要被收回去了(ಥ﹏ಥ)

    为了勋章,今日小生特地爬上来整理、记录最近做项目新学的可视化库——Echarts

//=======================================================================

一、Echarts简介

Echarts是百度团队开发的一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)。

它内置多种图表类型,包括折线图柱状图散点图饼图K线图,用于统计的盒形图,用于地理数据可视化的地图热力图线图,用于关系数据可视化的关系图treemap旭日图,多维数据可视化的平行坐标,用于 BI 的漏斗图仪表盘,并且支持图与图之间的混搭。(更多特性可以查看:http://echarts.baidu.com/feature.html)

二、Echarts API(只记录实例需要用到的API)

(1)初始化图表:echarts.init(domEl)

    初始化图表实例,domEL为在body中定义的HTML元素

(2)为图表设置配置项:echarts.setOption(option)

设置图表实例的配置项、数据,所有参数和数据的修改都可以通过setOption完成,ECharts 会合并新的参数和数据,刷新图表。

option配置项与图表位置对应如下

Echarts简单折线/柱状图混合实例

三、实例——折线+柱状图混合型图表

(1)在 http://echarts.baidu.com/examples/index.html 中选择基础折线图表,在实例编辑器中编辑图表样式

Echarts简单折线/柱状图混合实例

(2)在series属性中,添加 柱状图 以及 数据

Echarts简单折线/柱状图混合实例Echarts简单折线/柱状图混合实例

(3)添加图例 用于切换图表

legend中添加图例名称,并在series中添加相应name值,注意两者要一一对应

Echarts简单折线/柱状图混合实例Echarts简单折线/柱状图混合实例

(4)添加标题 以及 小贴士

Echarts简单折线/柱状图混合实例Echarts简单折线/柱状图混合实例

(5)下载echarts.js引入html文档,在body中添加表格容器,注意宽高必须定义

Echarts简单折线/柱状图混合实例

(6)用移动端浏览,发现表格未居中

调节grid属性,修改left以及top值,直至居中

Echarts简单折线/柱状图混合实例

至此,简单的混合图表实例已完成