前言：本文是在把数据做得更好看1——Echarts基础柱状图绘制&渲染&PPT联动（Python数据可视化）的基础上的拓展和进阶，对pyecharts不熟悉的童鞋可以参考上面的链接。

文章目录

1.柱状图的组合拓展
- 1.1 柱状图的标注
- - 1.1.1 标记点
  - 1.1.2 标记线
  - 1.1.3 标记区域
- 1.2 柱状图的拓展
- - 1.2.1 多轴柱状图
  - 1.2.2 柱状图与折线图的组合
  - 1.2.3 formatter的使用
2. 柱状图的选区聚焦
- 2.1 手动聚焦
- 2.2 缩放聚焦

1.柱状图的组合拓展

柱状图作为较为基本的统计图表，所能涵盖的信息有限。但如果能在柱状图的基础上增添一些标记功能或者形成多种图表的组合，就会让柱状图的层次感大大提升。快进到正文。

1.1 柱状图的标注

为柱状图添加标注，首先要了解与标注相关的配置项，pyecharts中主要有如下配置项与标注有关：

配置项	功能
MarkPointItem：标记点数据项	标注的类型（特殊类型：最大，最小，均值）；标注的形状（圆形，三角，图片等）；标注的大小及坐标等
MarkLineItem：标记线数据项	同标记点数据项
MarkAreaItem: 标记区域数据项	同标记点数据项

下面结合一些实例，康一康如何给柱状图添加标注。（偷个懒，测试代码采用了Faker函数，即数据为随机生成。）

1.1.1 标记点

from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.faker import Fakerc = (Bar().add_xaxis(Faker.choose()).add_yaxis("某宝", Faker.values()).add_yaxis("并夕夕", Faker.values()).set_global_opts(title_opts=opts.TitleOpts(title="不同类型的标记点")).set_series_opts(label_opts=opts.LabelOpts(is_show=False),  # 关闭标签显示使得标注点更明显markpoint_opts=opts.MarkPointOpts(data=[opts.MarkPointItem(type_="max", name="最大值", symbol="pin"),opts.MarkPointItem(type_="min", name="最小值", symbol="circle"),opts.MarkPointItem(type_="average", name="平均值", symbol="arrow"),]),).render("bar_markpoint.html")
)

这里说几个经验和感受：
1.默认标记点的symbol是pin，实测下来确实也是pin最好看，其他需要手动调相对位置才比较能看，建议直接用默认值就好。
2.关于type的average，虽然表面是均值，但实测下来它的含义更像中位数，所以当你的组数为偶数时，这个标记点时有时无。我暂时还没有摸清楚逻辑，但最好的解决方法是用标记线标记均值。

1.1.2 标记线

标记线的定义方式与标记点几乎一致：

markline_opts=opts.MarkLineOpts(data=[opts.MarkLineItem(type_="average", name="平均值", symbol="circle"),]),)

就得到了均值的线（symbol定义的是这条线起始点形状，不是修改终点的箭头）

当然，在数据分析时，除了最值和均值，我们也需要标注一些其他值（比如阈值，异常值等），这就需要我们自定义标记线。这里可以结合numpy中的一些函数做简单的数据处理，举个栗子。

from pyecharts import options as opts
from pyecharts.charts import Bar
import numpy as npdata = [90, 20, 36, 10, 75, 5]
bar = (Bar().add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]).add_yaxis("商家A", data).set_global_opts(title_opts=opts.TitleOpts(title="自定义标记线"),).set_series_opts(markline_opts=opts.MarkLineOpts(data=[opts.MarkLineItem(y=np.mean(data)/2), ]),)# 标定均值的一半视作异常值
)bar.render("sta1.html")

至于标记线的外观也可以定义，使之更有区分度。

bar=(
Bar()
.set_series_opts(markline_opts=opts.MarkLineOpts(data=[opts.MarkLineItem(y=np.mean(data)/2)],linestyle_opts=opts.LineStyleOpts(type_="dotted", width=3, color="#00BFFF"))
)

1.1.3 标记区域

有时候我们也需要对区域进行分块操作，比如把12个月分为四个季度，就可以采用标记区域的方法进行分隔。

from pyecharts import options as opts
from pyecharts.charts import Bardata = [90, 20, 36, 10, 75, 5]
bar = (Bar().add_xaxis(["衬衫", "羊毛衫", "羽绒服", "裤子", "高跟鞋", "袜子"]).add_yaxis("商家A", data).set_global_opts(title_opts=opts.TitleOpts(title="自定义标记区域"))      .set_series_opts(markarea_opts=opts.MarkAreaOpts(data=[opts.MarkAreaItem(name="秋冬季", x=("羊毛衫", "羽绒服"))],itemstyle_opts=opts.ItemStyleOpts(color="#00BFFF", opacity=0.3)),)
)
bar.render("sta1.html")

（丑是丑了点，意思是那个意思，Cover区域可以调节位置参数，不好意思我又懒了）

1.2 柱状图的拓展

柱状图的拓展多种多样，下面主要介绍多轴的柱状图，含有图片信息坐标轴的柱状图和柱状图和折线图的组合。

1.2.1 多轴柱状图

制图中经常会遇到多个y轴，但单位或者刻度不同的情况，就需要在一张图表中创建多个y轴。
在创建多轴之前，需要意识到创建图表会有一条在左侧的默认y轴，所以我们的多轴工作可以拆分成两个部分：一是将默认的y轴设置成我们想要的样子，需要用到set_global_opts下的yaxis_opts（如果要求不高，可以直接在add_yaxis时设置参数）；二是添加额外的坐标轴并设置参数，需要用到extend_axis。
结合代码，看一个实例：

import pyecharts.options as opts
from pyecharts.charts import Barcolors = ["#FFA07A", "#778899"]
x_data = ["一季度", "二季度", "三季度", "四季度"]
legend_list = ["支出", "存款"]
expense = [12000, 8000, 15000, 9000]
deposit = [25, 27, 30, 29]bar = (Bar().add_xaxis(xaxis_data=x_data)# 添加支出轴.add_yaxis(series_name="支出", y_axis=expense, color=colors[0])# 利用全局配置项对默认轴进行修改.set_global_opts(yaxis_opts=opts.AxisOpts(type_="value", name="支出", min_=6000, max_=16000,axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(color=colors[1])),axislabel_opts=opts.LabelOpts(formatter="{value}元")))# 添加收入轴.add_yaxis(series_name="存款", y_axis=deposit, yaxis_index=1, color=colors[1])# 利用extend_axis添加新轴.extend_axis(yaxis=opts.AxisOpts(type_="value", name="存款", min_=20, max_=32, position="right",axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(color=colors[0])),axislabel_opts=opts.LabelOpts(formatter="{value} 万元")))# 交叉指向，数据按照坐标轴区分.set_global_opts(tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross")))
bar.render("multiple_axes.html")

再次说明一下，看起来有些区别对待的操作原因：你只要定义了Bar，即便没有填充任何数据，初始的横轴纵轴已经生成。这个初始的轴只能通过全局配置项修改。更好的办法就是对于这个初始的轴少些骚操作，让它可以通过add_x(y)axis就完成定义。

1.2.2 柱状图与折线图的组合

作为直角坐标系的两类经典图表，柱状图与折线图有较好向性，当然其他直角坐标系图表之间也有较好搭配，核心思想都是运用overlap函数，这里只是试举此例。

from pyecharts import options as opts
from pyecharts.charts import Line, Barx_data = (["一季度", "二季度", "三季度", "四季度"])
wage = [6500, 7000, 8000, 7500]
extra_gains = [2000, 2200, 1800, 3200]
# 柱状图绘制
bar = (Bar().add_xaxis(x_data).add_yaxis("工资", wage).add_yaxis("外快", extra_gains).set_global_opts(title_opts=opts.TitleOpts(title="收入情况"),tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"))
)
# 折线图绘制
revenue_line = (Line().add_xaxis(xaxis_data=x_data).add_yaxis(series_name="总收入", y_axis=[wage[i]+extra_gains[i] for i in range(len(wage))])
)
# overlap合并
bar.overlap(revenue_line).render("bar&line.html")

其实，overlap只是较为简单的堆叠，pyecharts中定义了包括Grid(并行多图)，Page(顺序多图)，Tab(选项卡多图)，以及Timeline(时间线轮播多图)等更为复杂的图表组合关系。有时间的话，我一定补上。

1.2.3 formatter的使用

很多时候，生成图表信息往往有限，有办法让它更丰富吗？或许可以。熟练使用formatter甚至rich(富文本)，可以让你有更丰富的标签展示。篇幅原因，这里简单谈一谈，或许等我摸得更透再写一篇。（疯狂挖坑）
比如图中X轴的前缀，是B（后卫）还是F（锋线）的判断就可以通过formatter实现。

from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.commons.utils import JsCodecolors = ["#FF6347", "#FFFFFF"]
x_data = ["Salah", "Jota", "Mane", "Firmino", "Robertson", "Arnold"]
goal = [16, 9, 6, 5, 1, 0]
assist = [4, 0, 3, 3, 5, 4]
c = (Bar(init_opts=opts.InitOpts(width="1000px", height="680px",bg_color={"type": "transparent", "image": JsCode("img"), "repeat": "repeat"})).add_xaxis(x_data).add_yaxis("进球", goal, color=colors[0]).add_yaxis("助攻", assist, color=colors[1]).set_global_opts(xaxis_opts=opts.AxisOpts(axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(color=colors[0])),axislabel_opts=opts.LabelOpts(# 通过formatter进行判断，为标签丰富信息formatter=JsCode("function(value)""{if (value==='Robertson'||value==='Arnold') {return 'B:'+value} ""else {return 'F:'+value}}"))),yaxis_opts=opts.AxisOpts(axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(color=colors[0]))),legend_opts=opts.LegendOpts(textstyle_opts=opts.TextStyleOpts(color=colors[1])),title_opts=opts.TitleOpts(title="利物浦20赛季队内数据统计", title_textstyle_opts=opts.TextStyleOpts(color=colors[0])))
)
c.add_js_funcs("""var img = new Image(); img.src = 'liverpool.jpeg';img.width="80%";img.height="80%";"""
)
c.render("liverpool.html")

当然，formatter和rich的应用远不如此，比如官方案例中的将坐标轴值设为图片。这一部分的一些操作，饼状图更易实现，且需要一些JS的知识，下次写到再说了。（实际上是柱状图我难以实现，如果有大佬可以在评论区教我一下）

2. 柱状图的选区聚焦

在展示过程中，总会遇到需要聚焦某一部分数据的情况，这个时候就要我们把图表的一部分有重点的呈现。具体来说，选区有种情况，一种是手动选区，类似于截屏的选区操作；另一种是缩放选区，比如筛选一段时间或者一定范围内的数据。捯饬起来。

2.1 手动聚焦

主要利用brush工具，包含矩形选区和圈选。

from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.faker import Fakerc = (Bar().add_xaxis(Faker.choose()).add_yaxis("商家A", Faker.values()).add_yaxis("商家B", Faker.values()).set_global_opts(title_opts=opts.TitleOpts(title="动态选区"),brush_opts=opts.BrushOpts(),).render("brush.html")
)

2.2 缩放聚焦

缩放的控件分为外部控件和内部控件，外部控件通过一个轴控制，内部控件通过鼠标滚轮控制，先看效果。

from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.faker import Fakerc = (Bar().add_xaxis(Faker.days_attrs).add_yaxis("商家A", Faker.days_values, color=Faker.rand_color()).set_global_opts(title_opts=opts.TitleOpts(title="缩放聚焦"),datazoom_opts=[opts.DataZoomOpts(range_start=20),  opts.DataZoomOpts(type_="inside")],# 前项是添加控制轴，后项是内置控制区。range_start为数据窗口范围的起始百分比。).render("datazoom.html")
)

当然对于起始窗口的定位，也可以用start_value定位，但它的优先级低于range_start，即声明range_start后再声明start_value就无效了。

同样可以做y轴的缩放聚焦：

 datazoom_opts=opts.DataZoomOpts(orient="vertical")

这些动态的内容如何嵌入汇报PPT呢，可以参照把数据做得更好看1——Echarts基础柱状图绘制&渲染&PPT联动（Python数据可视化）

谢谢您辛辛苦苦看到这，希望这篇文章能让你的图表更能体现数据特征。

把数据做得更好看2——如何用Echarts更详细地展示数据特征（以柱状图为例）相关推荐

表单及数据提交、表单的作用、服务端接收提交的数据、php处理数据流程、文件域及文件域中数据处理、php展示数据（响应）
表单及数据提交: 表单的作用: 用于收集相关信息:html中有专门提交数据的标签,可以很容易的收集用户输入的信息,这个标签有两个重要的属性:action表单提交的地址和method以什么方式提交表单, ...
两万条数据需要做个数据图_第3关：基于Excel对电商母婴数据进行分析
对于新手,拿到数据往往不知如何下手.那就按图索骥,依照以下五部一步步来 step1:明确问题目标必须明确,基于当前业务出发.如一千个读者有一千个哈姆雷特一样,数据可以被解读出不同样子,必须集中目标, ...
根据要求调参用matplotlib做一个一模一样的直方图（以及如何把成图变得更好看）
又是educoder上的一个题目数据文件长这样: 编程要求 (文件结构就是一个main.py调用了student.py,数据文件在同级目录下)请仔细阅读右侧代码,结合相关知识,在 Begin-End ...
如何更好对数据做分析
数据驱动的时代,无论你的工作内容是什么,掌握一定的数据分析能力,可以帮助你更好地认识这个世界,更好地提升工作效率.一次完整的数据分析流程主要分为以下六个环节:明确分析目的.数据获取.数据处理.数据分析 ...
云栖科技评论第63期：有了AI，世界杯更“好看”
[卷首语]就在2018年俄罗斯世界杯鸣金开赛的第三天,法国VS澳大利亚的比赛上,一个具有历史意义的点球出现了! 开场第45分钟,本次世界杯上首次采用的VAR影像助力裁判系统突然提醒主裁判,澳大利亚球员 ...
UI设计师支招，简单几步让您PPT更好看
本文由UI设计师们支招,简单几步,让我们的PPT大不一样.看设计师怎么教我们整理文字,对齐,封面包装,清晰逻辑,增加感染力-- 是不是干货满满,快拿去给你的PPT做个升华吧. 很多人提起做PPT便很头 ...
时间序列数据库——索引用ES、聚合分析时加载数据用什么？docvalues的列存储貌似更优优势一些...
加载如何利用索引和主存储,是一种两难的选择. 选择不使用索引,只使用主存储:除非查询的字段就是主存储的排序字段,否则就需要顺序扫描整个主存储. 选择使用索引,然后用找到的row id去主存储加载数据 ...
4、PPT图表的制作（制作九宫格图片、更好看的图表）
1.顶级商业图表网站 (1)麦肯锡中国:https://www.mckinsey.com.cn/# (2)第一财经:https://www.cbnweek.com/ (3)网易数读:http://da ...
如何利用大数据做金融风控？原创 2016年11月24日 17:42:03 标签：大数据 / 金融 / 风控 1594 导语：如何通过海量数据与欺诈风险进行博弈？随着金融科技、科技金融等概念的
如何利用大数据做金融风控? 原创 2016年11月24日 17:42:03 标签: 大数据 / 金融 / 风控 1594 导语:如何通过海量数据与欺诈风险进行博弈? 随着金融科技.科技金融等概念的热起 ...

把数据做得更好看2——如何用Echarts更详细地展示数据特征（以柱状图为例）