PyEcharts 学习总结

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 引入子模块
from pyecharts import charts as pyc
from pyecharts import options as opts
# 这里链式调用，也可以先实例化一个 charts 对象再一步步设置
bar = (
    # 实例化：
    pyc.Bar()
    # 对应上面html文档中的 option.XAxis.data：
    .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
    # 对应上面html文档中的 option.series：
    # 注意到 option.series 是js数组类型，也就是可以添加多个序列
    .add_yaxis("销量", [5, 20, 36, 10, 10, 20]) 
    # global_opts 对应上面html文档中的 option 的属性
    # 例如 option.title 通过 title_opts 参数设置
    .set_global_opts(title_opts=opts.TitleOpts(title="Echarts 入门示例"))
)
# 在当前目录生成默认名称为 render.html 的文档
bar.render()

1
2
3
4
# 图表类的 init_opts，设置图表整体风格，大小等
from pyecharts import globals as glbs
Bar(init_opts=opts.InitOpts(
    glbs.ThemeType.DARK, bg_color='#1a1c1d', width='100%', height='400px'))

1
2
3
4
# 使用 add 方法（泛指 add_yaxis, add_schema 等）时的 options
itemstyle_opts = opts.ItemStyleOpts()           # 元素样式，如散点图的点
emphasis_itemstyle_opts = opts.ItemStyleOpts()  # 元素高亮样式
linestyle_opts = opts.LineStyleOpts()           # 用于 Line.add_yaxis 里面

1
2
3
4
5
# set_series_opts 中的 options
tooltip_opts = opts.TooltipOpts()       # 工具提示
itemstyle_opts = opts.ItemStyleOpts()   # 元素样式
label_opts = opts.LabelOpts()           # 标签样式，例如条形图顶部显示的数值
areastyle_opts = opts.AreaStyleOpts()   # 区域样式，例如线形图与坐标轴围成的区域

1
2
3
4
5
6
7
8
9
# set_global_opts 中的 options
title_opts = opts.TitleOpts()           # 标题、副标题及其字体颜色等样式
xaxis_opts = opts.AxisOpts()            # 坐标轴的样式，如轴线样式，文字旋转等
yaxis_opts = opts.AxisOpts()            # 同上
datazoom_opts = opts.DataZoomOpts()     # 数据过多时可以使用类似滚动条的插件
legend_opts = opts.LegendOpts()         # 图例是否显示、样式及其位置等
visualmap_opts = opts.VisualMapOpts()   # 视觉映射，例如按系列值的大小给元素着色
toolbox_opts = opts.ToolboxOpts()       # 在图中加入放大缩小，导出图片等工具按钮
graphic_opts = [opts.GraphicGroup]      # 加入自定义的图形，如多边形，水印等内容

1
2
3
Line().add_xaxis(...).add_yaxis(...).set_global_opts(
    legend_opts=opts.LegendOpts(is_show=True)
)

1
2
3
Line().add_xaxis(...).add_yaxis(...).set_global_opts(
    legend_opts={'show': True}
)

1
2
3
Scatter().add_xaxis(...).add_yaxis(...).set_series_opts(
    emphasis_itemstyle_opts=opts.ItemStyleOpts(color='red')
)

1
2
cdn = "https://cdn.jsdelivr.net/npm/echarts@latest/dist/"
pyecharts.globals.CurrentConfig.ONLINE_HOST = cdn

1
2
3
4
5
6
7
8
Scatter().add_xaxis(
    [int(i) for i in df.index]
).add_yaxis(
    [float(n) for n in df['col']]
)
# 注意，以下写法是不行的
# 虽然传递的参数是内置类型float，但是pandas还是会自作主张给你改成numpy.float64
df['col'].astype(float)

1
2
3
4
5
6
7
8
9
10
11
12
def write_js(file, locate, write):
    with open(file, 'r') as f:
        html = f.read()
    with open(file, 'w') as f:
        f.write(html.replace(locate, write)) 

# locate 用于定位修改位置，这里建议使用 option 里面参数来定位
# 比如这里准备写到 "title" 属性的前面：
locate = '"title": [\n' # 尽可能多的字符，否则可能定位错
# 需要写入的属性
write = '"grid": {"x": "20%", "y": "30%", "x2": "30%", "y2": "20%"}, \n'
write_js('render.html', locate, write+locate)

1
2
3
4
5
6
7
# 首先绘图
bar = Bar().add_xaxis(...).add_yaxis(...).set_global_opts(...)
# 然后还缺什么属性，直接往 options 里面添加，然后 render
bar.options['grid'] = {"x": "20%", "y": "30%", "x2": "30%", "y2": "20%"}
bar.render()
# 注意到 bar.options 是一个字典
# 它的内容就是生成的 html 文档的 js 代码里面的 option 变量的内容

1
2
3
Scatter().add_xaxis(index_data).add_yaxis(
    series_name, value_data, itemstyle_opts=opts.ItemStyleOpts(color='red')
)

1
2
opts.ItemStyleOpts(color='#ff0000')
opts.ItemStyleOpts(color='rgba(255,0,0,1)')

1
2
3
4
5
6
7
8
9
10
from pyecharts.commons.utils import JsCode

opts.ItemStyleOpts(color=JsCode(
    # 引入echarts.min.js后就可以使用echarts库的方法
    ''' new echarts.graphic.RadialGradient(
        0.5, 0.5, 0.5,  
        [{offset: 0, color: 'rgba(255,0,0,1)'},
        {offset: 1, color: 'rgba(0,0,255, 1)'}]
    ) '''
))

1
2
3
4
5
6
Scatter().add_xaxis(...).add_yaxis(
    series_name, data_pair,
    # 固定大小：symbol_size=5,
    # 由数据值决定大小：
    symbol_size=JsCode('function (data) {return data[1]*10;}')
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
from pyecharts.commons.utils import JsCode
tooltipJS = '''
    function (param) { 
        // param参数接收的就是上图中的option.series.data这个数组中对应的元素
        var line1 = 'name: ' + param.data[0] + '<br/>';
        var line2 = 'value1: ' + param.data[1] + '<br/>';
        var line3 = 'value2: ' + Math.ceil(10**param.data[2]); // 引用js内置函数
        return line1 + line2 + line3;   // return的内容就是到时工具提示显示的内容
    }
'''
# 然后通过 JsCode 传给 TooltipOpts 的 formatter
Scatter().set_global_opts(
    tooltip_opts=opts.TooltipOpts(formatter=JsCode(tooltipJS))
)

1
2
3
4
5
6
7
8
9
from pyecharts import charts as pyc
from pyecharts import options as opts
from pyecharts import globals as glbs
bar = pyc.Bar(
    init_opts=opts.InitOpts(theme=glbs.ThemeType.DARK, bg_color='#1a1c1d')
).add_xaxis(['A', 'B', 'C']).add_yaxis(
    'test charts', [1, 2, 3]
)
bar.render()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
bar = pyc.Bar(
    init_opts=opts.InitOpts(theme=glbs.ThemeType.DARK, bg_color='#1a1c1d')
).add_xaxis(['A', 'B', 'C']).add_yaxis(
    'test charts', 
    [(0,1,'低','更多信息'), (1,2,'中','更多信息'), (2,3,'高','更多信息')]
    # 通过元组列表强行传进更多的信息
    # 元组第一位是对应 xaxis 的序号，第二位是序列的值 这里就是bar的长度
    # 剩下的爱加多少加多少，每个点写一篇800字作文都行
).set_global_opts(
    tooltip_opts=opts.TooltipOpts(formatter=JsCode(
        '''
        function (param) {
            var line1 = 'index: ' + param.data[0] + '<br/>';
            var line2 = 'value: ' + param.data[1] + '<br/>';
            var line3 = 'info1: ' + param.data[2] + '<br/>';
            var line4 = 'info2: ' + param.data[3];
            return line1 + line2 + line3 + line4;
        }
        '''
    ))
)
bar.render()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Geo().add_schema(...).add_coordinate(...).add(
    series_name,
    [('A', [1,2,3]), ('B', [4,5,6]), ('C', [7,8,9])]
    # 这里传入的数据也是一个元组列表，但是它仅限两位的元组
    # 第一位是地图中区域的名称，也就是到时会在地图中 A, B, C 三个地点标上散点
    # 第一位在 js 中通过 param.data.name 引用
    # 第二位是包含额外数据的列表，通过 param.data.value(一个js数组) 引用
).set_global_opts(
    tooltip_opts=opts.TooltipOpts(formatter=JsCode(
        '''
        function (param) {
            return param.data.name + ' | ' +
                'info1:' + param.data.value[0] + 
                ', info2:' + param.data.value[1] + 
                ', info3:' + param.data.value[2];
        }
        '''
        # 当鼠标悬停在 B 点时，返回“B | info1: 4, info2: 5, info3: 6”
    ))
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
data_pair = [('A', 10), ('B', 100), ('C', 1000)] 
# 上面的 10, 100, 1000 就是用在 visualmap 中的数据值
# 下面的则是用于 tooltip 的额外数据
extend_data = {'A': [1,2,3], 'B': [4,5,6], 'c': [7,8,9]}
tooltip_data = [{'name': k, 'value': v} for k, v in extend_data.items()]
# 返回 tooltips 的函数
tooltipjs = r'''
    function (param) {
        var tooltip_data = __MARKER__; // 到时在 __MARKER__ 这里写入要传的数据
        for (int i=0; i<tooltip_data.length; i++) {         // 遍历
            if (param.data.name == tooltip_data[i].name) {  // 匹配
                var values = tooltip_data[i].value;         // 提取额外数据
            }
        }
        // 返回给 tooltips
        return param.data.name + ' | ' +
            'info1:'+values[0]+', info2:'+values[1]+', info3:'+values[2];
    }
'''.replace('__MARKER__', str(tooltip_data))    # 在这里加入了额外的数据
# 绘图
Geo().add_schema(...).add_coordinate(...).add(
    series_name, data_pair
).set_global_opts(
    tooltip_opts=opts.TooltipOpts(formatter=Jscode(tooltipjs)),
    visualmap_opts=opts.VisualMapOpts()
)
# 可以看到在调用 pyecharts 绘图时没有用到额外的数据，只有 data_pair
# 用于 tooltip 的数据是写在 js 字符串里偷偷传进去的
# 这时 tooltip 的效果跟上例一样，但是上例的写法不支持 visualmap

1
2
3
4
5
6
7
8
9
10
11
12
13
import pandas as pd
from pyecharts import charts as pyc
from pyecharts import options as opts
from pyecharts import globals as glbs

data = pd.read_csv('data.csv', sep='\t')
line = pyc.Line(init_opts=opts.InitOpts(theme=glbs.ThemeType.DARK, width='100%')
).add_xaxis(
    list(data.iloc[:,0])
).add_yaxis(
    'Beijing AQI', list(data.iloc[:,1])
)
line.render()

1
2
3
4
5
6
7
8
9
10
11
line.set_series_opts(
    label_opts=opts.LabelOpts(is_show=False)
).set_global_opts(
    title_opts=opts.TitleOpts(title='Beijing AQI'), 
    legend_opts=opts.LegendOpts(),
    visualmap_opts=opts.VisualMapOpts(), 
    datazoom_opts=opts.DataZoomOpts(), 
    tooltip_opts=opts.TooltipOpts(),
    toolbox_opts=opts.ToolboxOpts()
)
line.render()

1
2
3
line.set_global_opts(
    title_opts=opts.TitleOpts(title='Beijing AQI', pos_left='1%'), 
)

1
2
3
line.set_global_opts(
    legend_opts=opts.LegendOpts(is_show=False),
)

1
2
3
4
5
6
7
8
9
10
11
12
13
line.set_global_opts(
    visualmap_opts=opts.VisualMapOpts(
        is_piecewise=True, pos_top=50, pos_right=10,
        pieces=[
            {'min':0, 'max': 50, 'color': '#93CE07'},
            {'min':50, 'max': 100, 'color': '#FBDB0F'},
            {'min':100, 'max': 150, 'color': '#FC7D02'},
            {'min':150, 'max': 200, 'color': '#FD0100'},
            {'min':200, 'max': 300, 'color': '#AA069F'},
            {'min':300, 'color': '#AC3B2A'}
        ]
    ), 
)

1
2
3
4
5
6
7
8
line.set_global_opts(
    datazoom_opts=[
        opts.DataZoomOpts(
            start_value='2014-06-01', range_start=None, range_end=None
        ), 
        opts.DataZoomOpts(type_='inside')
    ], 
)

1
line.set_global_opts(tooltip_opts=opts.TooltipOpts(trigger='axis'))

1
2
3
4
5
6
line.set_global_opts(
    toolbox_opts=opts.ToolboxOpts(
        pos_left=None, pos_right=10,
        feature={'dataZoom': {}, 'restore': {}, 'saveAsImage': {}}
    ),
)

1
2
3
4
5
6
7
line.set_series_opts(
    markline_opts=opts.MarkLineOpts(
        label_opts=opts.LabelOpts(position='end'),
        linestyle_opts=opts.LineStyleOpts(color='#333'),
        data=[{'yAxis': y} for y in [50, 100, 150, 200, 300]]
    )
)

1
line.options['grid'] = {'left': '6%', 'right': '15%', 'bottom': '12%'}