精华内容
下载资源
问答
  • 本资源包含8个高质量的大屏数据可视化案例源码,既有实际项目案例,也有旭日图、树图、热力图、地图、3D图表、地理信息数据可视化等专题案例
  • 上篇文章《基于Pyecharts可视化大屏案例一(1)》已经为大家详细展示了大屏中间第一张图形的制作过程以及可视化大屏的布局,我们先来回顾下完整的精美大屏:请看下本文在上文基础上制作左上图形的最终效果:视频显示:...

            上篇文章《基于Pyecharts可视化大屏案例一(1)》已经为大家详细展示了大屏中间第一张图形的制作过程以及可视化大屏的布局,我们先来回顾下完整的精美大屏:

    41774d9ee66d435a456cc5edce4a7f20.png

            请看下本文在上文基础上制作左上图形的最终效果:

    34e54a5e4f9530147a9d0c5a0eb39b5b.png

            视频显示:

            接下来,请开始你的表演......

    1.  加载一箩筐的库

    from pyecharts.charts import Page,Bar,Line,Grid,Pieimport pyecharts.options as optsfrom pyecharts.globals import ThemeTypefrom pyecharts.faker import Fakerfrom pyecharts.commons.utils import JsCodeimport pandas as pdimport numpy as npimport randomfrom bs4 import BeautifulSoup

    2.  生成随机数据

    names = ['门店_'+str(i) for i in range(1,31)] #生成30个门店的名字sales = [random.randint(1000,10000) for _ in range(30)] #随机生成30个数字,代表门店销售额df = pd.DataFrame() #生成一个空DataFrame()df['店名'] = names df['销售额'] = salesdf.sort_values(by='销售额',ascending=True,inplace=True) #按销售额从小到大排序# 修改店名(加上排名显示)new_names = [] for name,i in zip(df['店名'],[i for i in range(30,0,-1)]):     new_names.append(name+'(第'+str(i)+'名)')df['店名'] = new_names

    3. 不加任何参数绘制柱形图

    bar = (    Bar()    .add_xaxis(df['店名'].tolist())    .add_yaxis("门店销售额(万元)", df['销售额'].tolist())).render('test.html')

    72c65bad42e083971d1790fb9d1df848.png

    4. 设置主题背景(以DARK为例)

    bar = (    Bar(        init_opts=opts.InitOpts(            theme =  ThemeType.DARK #设置主题        )    )    .add_xaxis(df['店名'].tolist())    .add_yaxis("门店销售额(万元)", df['销售额'].tolist())).render('test.html')

    464f736749edc3295c6b64d2a8657e96.png

    5. 旋转X、Y轴

    bar = (    Bar(        init_opts=opts.InitOpts(            theme =  ThemeType.DARK #设置主题        )    )    .add_xaxis(df['店名'].tolist())    .add_yaxis("门店销售额(万元)", df['销售额'].tolist())    .reversal_axis() #旋转XY轴).render('test.html')

    4a280f8b37dc88305ecc75295fcecd39.png

    6.  设置提示框、拖拉框,以及设置拖拉框按Y轴拖拉

    bar = (    Bar(        init_opts=opts.InitOpts(            theme =  ThemeType.DARK #设置主题        )    )    .add_xaxis(df['店名'].tolist())    .add_yaxis("门店销售额(万元)", df['销售额'].tolist())    .reversal_axis() #旋转XY轴    .set_global_opts(        tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),        datazoom_opts=opts.DataZoomOpts(            orient='vertical', #将拖拉框垂直放置,即按Y轴拖拉            range_start = 60, #拖拉起始位置(百分比)            range_end = 100, #拖拉结束位置(百分比)        ),    )).render('test.html')

    da49c80df3eafc61120df4f7b025bb6f.png

    7. 将拖拉框隐藏

    bar = (    Bar(        init_opts=opts.InitOpts(            theme =  ThemeType.DARK #设置主题        )    )    .add_xaxis(df['店名'].tolist())    .add_yaxis("门店销售额(万元)", df['销售额'].tolist())    .reversal_axis() #旋转XY轴    .set_global_opts(        tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),        datazoom_opts=opts.DataZoomOpts(            type_='inside',  #将拖拉框隐藏            orient='vertical', #将拖拉框垂直放置,即按Y轴拖拉            range_start = 60, #拖拉起始位置(百分比)            range_end = 100, #拖拉结束位置(百分比)        ),    )).render('test.html')

    5d12a93c0205ab834a4a713400a73b6f.png

    8.   设置X、Y轴、legend的刻度范围、字体大小、字体颜色

    bar = (    Bar(        init_opts=opts.InitOpts(            theme =  ThemeType.DARK #设置主题        )    )    .add_xaxis(df['店名'].tolist())    .add_yaxis("门店销售额(万元)", df['销售额'].tolist())    .reversal_axis() #旋转XY轴    .set_global_opts(        xaxis_opts=opts.AxisOpts(            max_ = 11000,            axislabel_opts  = opts.LabelOpts(                color = '#BFBFBF' # 设置X轴标签颜色            ),        ),        yaxis_opts=opts.AxisOpts(            axislabel_opts  = opts.LabelOpts(                font_size = 15,                color = '#BFBFBF' # 设置Y轴标签颜色            ),        ),        legend_opts=opts.LegendOpts(            is_show=True,             pos_left="center",             orient="vertical",            textstyle_opts = opts.TextStyleOpts(                  color  = '#FFDA85',                # 文字的字体大小                font_size = 20,                                               )        ),        tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),        datazoom_opts=opts.DataZoomOpts(            type_='inside',  #将拖拉框隐藏            orient='vertical', #将拖拉框垂直放置,即按Y轴拖拉            range_start = 60, #拖拉起始位置(百分比)            range_end = 100, #拖拉结束位置(百分比)        ),    )).render('test.html')

    94a3051e5bd18e8f1a9ad8b5e69d4066.png

    9.  设置标签值的位置以及添加均值线

    bar = (    Bar(        init_opts=opts.InitOpts(            theme =  ThemeType.DARK #设置主题        )    )    .add_xaxis(df['店名'].tolist())    .add_yaxis("门店销售额(万元)", df['销售额'].tolist())    .reversal_axis() #旋转XY轴    .set_global_opts(        xaxis_opts=opts.AxisOpts(            max_ = 11000,            axislabel_opts  = opts.LabelOpts(                color = '#BFBFBF' # 设置X轴标签颜色            ),        ),        yaxis_opts=opts.AxisOpts(            axislabel_opts  = opts.LabelOpts(                font_size = 15,                color = '#BFBFBF' # 设置Y轴标签颜色            ),        ),        legend_opts=opts.LegendOpts(            is_show=True,             pos_left="center",             orient="vertical",            textstyle_opts = opts.TextStyleOpts(                  color  = '#FFDA85',                # 文字的字体大小                font_size = 20,                                               )        ),        tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),        datazoom_opts=opts.DataZoomOpts(            type_='inside',  #将拖拉框隐藏            orient='vertical', #将拖拉框垂直放置,即按Y轴拖拉            range_start = 60, #拖拉起始位置(百分比)            range_end = 100, #拖拉结束位置(百分比)        ),    )    .set_series_opts(        label_opts=opts.LabelOpts(position="right"), #设置标签值的位置        markline_opts=opts.MarkLineOpts(            data=[opts.MarkLineItem(x=df['销售额'].mean(), name="均值")], #添加均值线            linestyle_opts=opts.LineStyleOpts(color="#00CC99")         ),    )).render('test.html')

    6758a747d83218e969f6579f0e2761a7.png

    10.  将其添加到可视化大屏上

            此时需要将上一篇文章的图形与本文的图形绘制过程封装成两个函数,然后通过Page()这个对象将两者拼接起来,再通过修改两个图形在html的位置即可(注意文件名已经更改为my_first_pycharts.html)。完整代码如下:

    def get_grid_1():    year = list(range(2004,2021)) #年份    random_data_1 = [random.randint(1000,10000) for _ in range(17) ] #生成17个随机整数    random_data_2 = [random.randint(100,1000) for _ in range(17) ] #生成17个随机整数    r1 = [round((random_data_1[i]-random_data_1[i-1])/random_data_1[i],2) for i in range(len(random_data_1))[1:]] #计算增长率,并取2位小数点    r2 = [round((random_data_2[i]-random_data_2[i-1])/random_data_2[i],2) for i in range(len(random_data_2))[1:]] #计算增长率,并取2位小数点    # 柱图    bar = (        Bar()        .add_xaxis(year)        .add_yaxis('销售额',random_data_1,yaxis_index=0,gap='10%')        .add_yaxis('订单量',random_data_2,yaxis_index=1,gap='10%')        .extend_axis(              #添加一个描绘订单量的坐标轴            yaxis=opts.AxisOpts(                name = '订单量\n(万件)',                position = 'right', #设置坐标轴在画布右侧                min_ = 0, #设置y刻度的最小值                max_ = 1300, #设置y刻度的最小值                offset = 60, #设置Y轴偏移                axisline_opts=opts.AxisLineOpts(                    linestyle_opts=opts.LineStyleOpts(color="#FFB8B8")                ),            )        )        .extend_axis(               #添加一个描绘增长率的坐标轴            yaxis=opts.AxisOpts(                name = '增长率',                position="left",   #设置坐标轴在画布左侧                min_ = -5, #设置y刻度的最小值                max_ = 5,#设置y刻度的最大值                axisline_opts=opts.AxisLineOpts(                    linestyle_opts=opts.LineStyleOpts(color="#CCCC00")                ),            )        )        .set_global_opts(            yaxis_opts=opts.AxisOpts(                name = '销售额\n(万元)',                position="right", #设置描绘销售额的坐标轴在画布右侧                axisline_opts=opts.AxisLineOpts(                    linestyle_opts=opts.LineStyleOpts(color="#EEAEEE")                ),            ),             title_opts=opts.TitleOpts(                title="历年订货额/订单量增长情况",                pos_left = 'center',                pos_top = '0px',                # 设置主标题字体、颜色、大小等                title_textstyle_opts = opts.TextStyleOpts(                     #文字颜色                     color='#66FFB3',                      #文字风格,可选:normal(正常)、italic(斜体)、oblique(斜体)                     font_style='normal',                      #主标题文字字体的粗细,可选:'normal','bold','bolder','lighter'                     font_weight='bold',                     #文字的字体系列,还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...                     font_family='Arial',                     # 文字的字体大小                     font_size = 25,                )            ),            legend_opts=opts.LegendOpts( #将标签设置在左边居中,并纵向排列                is_show=True,                 pos_left="left",                 orient="vertical",                pos_top = 'center',                textstyle_opts = opts.TextStyleOpts(                                          font_size = 10,  # 标签字体大小                                                 )            ),            tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"), #设置提示框            datazoom_opts=opts.DataZoomOpts(                range_start = 70,                range_end = 100,            ),        )    )    #线图    line = (        Line()        .add_xaxis(['2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020'])        .add_yaxis('销增长率',r1,yaxis_index=2,itemstyle_opts=opts.ItemStyleOpts(color='green'))        .add_yaxis('订增长率',r2,yaxis_index=2,itemstyle_opts=opts.ItemStyleOpts(color='#FF4D4D'))    )    # 合并两个图    overlap_ = bar.overlap(line)    grid = (        Grid(            init_opts=opts.InitOpts(                width = '1500px', # 设置画布宽                height = '800px', #设置画布高        #             bg_color = '#004B66', # 背景颜色设置                theme =  ThemeType.WONDERLAND #设置主题            )        )        .add(overlap_,              opts.GridOpts(                 pos_left="10%", #调整左边轴线与画布的距离                 pos_right="13%" #调整右边边轴线与画布的距离             ),              is_control_axis_index=True,        )    )        return griddef get_grid_2():    names = ['门店_'+str(i) for i in range(1,31)] #生成30个门店的名字    sales = [random.randint(1000,10000) for _ in range(30)] #随机生成30个数字,代表门店销售额    df = pd.DataFrame() #生成一个空DataFrame()    df['店名'] = names     df['销售额'] = sales    df.sort_values(by='销售额',ascending=True,inplace=True) #按销售额从小到大排序    # 修改店名(加上排名显示)    new_names = []     for name,i in zip(df['店名'],[i for i in range(30,0,-1)]):         new_names.append(name+'(第'+str(i)+'名)')    df['店名'] = new_names        # 画图    bar = (        Bar(            init_opts=opts.InitOpts(                theme =  ThemeType.DARK #设置主题            )        )        .add_xaxis(df['店名'].tolist())        .add_yaxis("门店销售额(万元)", df['销售额'].tolist())        .reversal_axis() #旋转XY轴        .set_global_opts(            xaxis_opts=opts.AxisOpts(                max_ = 11000,                axislabel_opts  = opts.LabelOpts(                    color = '#BFBFBF' # 设置X轴标签颜色                ),            ),            yaxis_opts=opts.AxisOpts(                axislabel_opts  = opts.LabelOpts(                    font_size = 15,                    color = '#BFBFBF' # 设置Y轴标签颜色                ),            ),            legend_opts=opts.LegendOpts(                is_show=True,                 pos_left="center",                 orient="vertical",                textstyle_opts = opts.TextStyleOpts(                      color  = '#FFDA85',                    # 文字的字体大小                    font_size = 20,                                                   )            ),            tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),            datazoom_opts=opts.DataZoomOpts(                type_='inside',  #将拖拉框隐藏                orient='vertical', #将拖拉框垂直放置,即按Y轴拖拉                range_start = 60, #拖拉起始位置(百分比)                range_end = 100, #拖拉结束位置(百分比)            ),        )        .set_series_opts(            label_opts=opts.LabelOpts(position="right"), #设置标签值的位置            markline_opts=opts.MarkLineOpts(                data=[opts.MarkLineItem(x=df['销售额'].mean(), name="均值")], #添加均值线                linestyle_opts=opts.LineStyleOpts(color="#00CC99")             ),        )    )        return bardef get_page():    grid1 = get_grid_1()    grid2 = get_grid_2()        page = (        Page()        .add(grid1)        .add(grid2)    )    return pagewith open("my_first_pycharts.html", "r+", encoding='utf-8') as html:    page = get_page()    page.render('my_first_pycharts.html')        html_bf = BeautifulSoup(html, 'lxml')    divs = html_bf.select('.chart-container')    divs[0]['style'] = "width:750px;height:400px;position:absolute;top:120px;left:550px;border-style:solid;border-color:#444444;border-width:0px;"    divs[1]['style'] = "width:550px;height:400px;position:absolute;top:120px;left:30px;border-style:solid;border-color:#444444;border-width:0px;"                body = html_bf.find("body")    body["style"] = "background-color:#07645D;" #设置网页背景颜色    div_title="
    \n2020年销售数据分析
    " #修改页面背景色、追加标题 body.insert(0,BeautifulSoup(div_title,"lxml").div) html_new = str(html_bf) html.seek(0, 0) html.truncate() html.write(html_new) html.close()

    225b1e8aedfc55f2d53648f1d893beb0.png

    11.  修改主题背景以及Y轴与左边框的间距

            从上图中可以看出,主题背景还得得改成WONDERLAND。对于店名显示不全的问题,需要在get_grid_2()里创建一个grid()进行修改,完整代码如下:

    def get_grid_1():    year = list(range(2004,2021)) #年份    random_data_1 = [random.randint(1000,10000) for _ in range(17) ] #生成17个随机整数    random_data_2 = [random.randint(100,1000) for _ in range(17) ] #生成17个随机整数    r1 = [round((random_data_1[i]-random_data_1[i-1])/random_data_1[i],2) for i in range(len(random_data_1))[1:]] #计算增长率,并取2位小数点    r2 = [round((random_data_2[i]-random_data_2[i-1])/random_data_2[i],2) for i in range(len(random_data_2))[1:]] #计算增长率,并取2位小数点    # 柱图    bar = (        Bar()        .add_xaxis(year)        .add_yaxis('销售额',random_data_1,yaxis_index=0,gap='10%')        .add_yaxis('订单量',random_data_2,yaxis_index=1,gap='10%')        .extend_axis(              #添加一个描绘订单量的坐标轴            yaxis=opts.AxisOpts(                name = '订单量\n(万件)',                position = 'right', #设置坐标轴在画布右侧                min_ = 0, #设置y刻度的最小值                max_ = 1300, #设置y刻度的最小值                offset = 60, #设置Y轴偏移                axisline_opts=opts.AxisLineOpts(                    linestyle_opts=opts.LineStyleOpts(color="#FFB8B8")                ),            )        )        .extend_axis(               #添加一个描绘增长率的坐标轴            yaxis=opts.AxisOpts(                name = '增长率',                position="left",   #设置坐标轴在画布左侧                min_ = -5, #设置y刻度的最小值                max_ = 5,#设置y刻度的最大值                axisline_opts=opts.AxisLineOpts(                    linestyle_opts=opts.LineStyleOpts(color="#CCCC00")                ),            )        )        .set_global_opts(            yaxis_opts=opts.AxisOpts(                name = '销售额\n(万元)',                position="right", #设置描绘销售额的坐标轴在画布右侧                axisline_opts=opts.AxisLineOpts(                    linestyle_opts=opts.LineStyleOpts(color="#EEAEEE")                ),            ),             title_opts=opts.TitleOpts(                title="历年订货额/订单量增长情况",                pos_left = 'center',                pos_top = '0px',                # 设置主标题字体、颜色、大小等                title_textstyle_opts = opts.TextStyleOpts(                     #文字颜色                     color='#66FFB3',                      #文字风格,可选:normal(正常)、italic(斜体)、oblique(斜体)                     font_style='normal',                      #主标题文字字体的粗细,可选:'normal','bold','bolder','lighter'                     font_weight='bold',                     #文字的字体系列,还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...                     font_family='Arial',                     # 文字的字体大小                     font_size = 25,                )            ),            legend_opts=opts.LegendOpts( #将标签设置在左边居中,并纵向排列                is_show=True,                 pos_left="left",                 orient="vertical",                pos_top = 'center',                textstyle_opts = opts.TextStyleOpts(                                          font_size = 10,  # 标签字体大小                                                 )            ),            tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"), #设置提示框            datazoom_opts=opts.DataZoomOpts(                range_start = 70,                range_end = 100,            ),        )    )    #线图    line = (        Line()        .add_xaxis(['2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020'])        .add_yaxis('销增长率',r1,yaxis_index=2,itemstyle_opts=opts.ItemStyleOpts(color='green'))        .add_yaxis('订增长率',r2,yaxis_index=2,itemstyle_opts=opts.ItemStyleOpts(color='#FF4D4D'))    )    # 合并两个图    overlap_ = bar.overlap(line)    grid = (        Grid(            init_opts=opts.InitOpts(                width = '1500px', # 设置画布宽                height = '800px', #设置画布高        #             bg_color = '#004B66', # 背景颜色设置                theme =  ThemeType.WONDERLAND #设置主题            )        )        .add(overlap_,              opts.GridOpts(                 pos_left="10%", #调整左边轴线与画布的距离                 pos_right="13%" #调整右边边轴线与画布的距离             ),              is_control_axis_index=True,        )    )        return griddef get_grid_2():    names = ['门店_'+str(i) for i in range(1,31)] #生成30个门店的名字    sales = [random.randint(1000,10000) for _ in range(30)] #随机生成30个数字,代表门店销售额    df = pd.DataFrame() #生成一个空DataFrame()    df['店名'] = names     df['销售额'] = sales    df.sort_values(by='销售额',ascending=True,inplace=True) #按销售额从小到大排序    # 修改店名(加上排名显示)    new_names = []     for name,i in zip(df['店名'],[i for i in range(30,0,-1)]):         new_names.append(name+'(第'+str(i)+'名)')    df['店名'] = new_names        # 画图    bar = (        Bar()        .add_xaxis(df['店名'].tolist())        .add_yaxis("门店销售额(万元)", df['销售额'].tolist())        .reversal_axis() #旋转XY轴        .set_global_opts(            xaxis_opts=opts.AxisOpts(                max_ = 11000,                axislabel_opts  = opts.LabelOpts(                    color = '#BFBFBF' # 设置X轴标签颜色                ),            ),            yaxis_opts=opts.AxisOpts(                axislabel_opts  = opts.LabelOpts(                    font_size = 15,                    color = '#BFBFBF' # 设置Y轴标签颜色                ),            ),            legend_opts=opts.LegendOpts(                is_show=True,                 pos_left="center",                 orient="vertical",                textstyle_opts = opts.TextStyleOpts(                      color  = '#FFDA85',                    # 文字的字体大小                    font_size = 20,                                                   )            ),            tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),            datazoom_opts=opts.DataZoomOpts(                type_='inside',  #将拖拉框隐藏                orient='vertical', #将拖拉框垂直放置,即按Y轴拖拉                range_start = 60, #拖拉起始位置(百分比)                range_end = 100, #拖拉结束位置(百分比)            ),        )        .set_series_opts(            label_opts=opts.LabelOpts(position="right"), #设置标签值的位置            markline_opts=opts.MarkLineOpts(                data=[opts.MarkLineItem(x=df['销售额'].mean(), name="均值")], #添加均值线                linestyle_opts=opts.LineStyleOpts(color="#00CC99")             ),        )    )        # 创建一个grid    grid = (        Grid(            init_opts=opts.InitOpts(                theme =  ThemeType.WONDERLAND #设置主题            )        )        .add(bar, grid_opts=opts.GridOpts(pos_left='20%',)) #调整位置,将店名都显示出来    )       return griddef get_page():    grid1 = get_grid_1()    grid2 = get_grid_2()        page = (        Page()        .add(grid1)        .add(grid2)    )    return pagewith open("my_first_pycharts.html", "r+", encoding='utf-8') as html:    page = get_page()    page.render('my_first_pycharts.html')        html_bf = BeautifulSoup(html, 'lxml')    divs = html_bf.select('.chart-container')    divs[0]['style'] = "width:750px;height:400px;position:absolute;top:120px;left:550px;border-style:solid;border-color:#444444;border-width:0px;"    divs[1]['style'] = "width:550px;height:400px;position:absolute;top:120px;left:30px;border-style:solid;border-color:#444444;border-width:0px;"                body = html_bf.find("body")    body["style"] = "background-color:#07645D;" #设置网页背景颜色    div_title="
    \n2020年销售数据分析
    " #修改页面背景色、追加标题 body.insert(0,BeautifulSoup(div_title,"lxml").div) html_new = str(html_bf) html.seek(0, 0) html.truncate() html.write(html_new) html.close()

    81dbe929a1ffb533defd3217ea7f756d.png

    有问题欢迎联系我vx:HCP19970120

    展开全文
  • 目 录 第一部分:效果图展示 1.1 最终效果图展示 1.2 本文效果图展示 第二部分:绘制精美图形 实 操 第一部分:效果图展示 1.1 最终效果图展示 本案例是基于pyecharts制作了一块常见的销售数据分析可视化大屏,...

    前  言

          Pyecharts是一个用于生成Echarts图表的类库,可以通过python import方法加载使用,没有安装的需要pip install pyecharts安装一下;Pyecharts的图表非常精美,功能较为强大,且对于有一定python基础来说很容易上手.

    目  录

    第一部分:效果图展示

            1.1 最终效果图展示

            1.2 本文效果图展示

    第二部分:绘制精美图形

    实  操

    第一部分:效果图展示

            1.1 最终效果图展示

            本案例是基于pyecharts制作了一块常见的销售数据分析可视化大屏,大致的效果图如下(因数据来源的问题,最终效果会有一丝偏差,但是基本不影响):

    e6d9c65c764aa9d2944ffbb762d8bbb2.png

            1.2 本文效果图展示

            由于图形有六个,故分成六篇文章来呈现。本文是第一篇,描绘的是中间第一张图表,最后的静态效果如下:

    6f88bc17025b5e27d479ff42fc9b55bf.png

            动态渲染效果也非常不错:

    第二部分:绘图

            接下来,开始我们的表演......

    2.1 加载库

            我们先把整个大屏需要的所有库都加载上:

    from pyecharts.charts import Page,Bar,Line,Grid,Pieimport pyecharts.options as optsfrom pyecharts.globals import ThemeTypefrom pyecharts.faker import Fakerfrom pyecharts.commons.utils import JsCodeimport pandas as pdimport numpy as npimport randomfrom bs4 import BeautifulSoup

    2.2 生成本文所需要的随机数据,都是list形式

    year = list(range(2004,2021)) #年份random_data_1 = [random.randint(1000,10000) for _ in range(17) ] #生成17个随机整数random_data_2 = [random.randint(100,1000) for _ in range(17) ] #生成17个随机整数r1 = [round((random_data_1[i]-random_data_1[i-1])/random_data_1[i],2) for i in range(len(random_data_1))[1:]] #计算增长率,并取2位小数点r2 = [round((random_data_2[i]-random_data_2[i-1])/random_data_2[i],2) for i in range(len(random_data_2))[1:]] #计算增长率,并取2位小数点

    2.3 不加任何参数绘制柱形图

            因为销售额与订单量数值有差别,且共用一个y轴,所以会绘制的柱子高度相差较大。

    bar = (    Bar()    .add_xaxis(year)     .add_yaxis('销售额',random_data_1)     .add_yaxis('订单量',random_data_2)).render('my_first_pycharts.html')

    3030b3b320f72aa31758addedf7f6354.png

    2.4 将坐标轴右移,并设置Y轴刻度范围,此处是在全局变量下设置。

    bar = (    Bar()    .add_xaxis(year)    .add_yaxis('销售额',random_data_1)    .add_yaxis('订单量',random_data_2)    .set_global_opts(        yaxis_opts=opts.AxisOpts(            position="right", #设置坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 13000, #设置y刻度的最小值        )    )).render('my_first_pycharts.html')

    acc092cbd8cd5c6f0ace67de3cb0adaf.png

    2.5 添加一个描绘订单量的坐标轴

            为了解决销售额与订单量共用一个坐标轴的问题,本文利用yaxis_index将其与销售额坐标轴分开来,再利用offset设置Y 轴相对于默认位置的偏移(一般在多Y轴上使用),并设置在右侧、刻度范围(注意代码添加的位置)

    bar = (    Bar()    .add_xaxis(year)    .add_yaxis('销售额',random_data_1,yaxis_index=0,)    .add_yaxis('订单量',random_data_2,yaxis_index=1,)    .extend_axis(              #添加一个描绘订单量的坐标轴        yaxis=opts.AxisOpts(            position = 'right', #设置坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 1300, #设置y刻度的最小值            offset = 60, #设置Y轴偏移        )    )    .set_global_opts(        yaxis_opts=opts.AxisOpts(            position="right", #设置描绘销售额的坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 13000, #设置y刻度的最小值        )    )).render('my_first_pycharts.html')

    4650927d196508f3d1db19e3cd0723b3.png

    2.6 引入描绘增长率的坐标轴,并设置在左侧、刻度范围

    bar = (    Bar()    .add_xaxis(year)    .add_yaxis('销售额',random_data_1,yaxis_index=0,)    .add_yaxis('订单量',random_data_2,yaxis_index=1,)    .extend_axis(              #添加一个描绘订单量的坐标轴        yaxis=opts.AxisOpts(            position = 'right', #设置坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 1300, #设置y刻度的最小值            offset = 60, #设置Y轴偏移        )    )     .extend_axis(               #添加一个描绘增长率的坐标轴        yaxis=opts.AxisOpts(            position="left",   #设置坐标轴在画布左侧            min_ = -5, #设置y刻度的最小值            max_ = 5 #设置y刻度的最大值        )    )    .set_global_opts(        yaxis_opts=opts.AxisOpts(            position="right", #设置描绘销售额的坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 13000, #设置y刻度的最小值        )    )).render('my_first_pycharts.html')

    1edf5c7be7af405e09d85592cc807cb4.png

    2.7 绘制折线图,并利用overlap将线图与柱图拼接起来,以及调整y轴线距离画布边的距离,要不然y轴线显示不全。(注意线图的yaxis_index=2)

    # 柱图bar = (    Bar()    .add_xaxis(year)    .add_yaxis('销售额',random_data_1,yaxis_index=0,gap='10%')    .add_yaxis('订单量',random_data_2,yaxis_index=1,gap='10%')    .extend_axis(              #添加一个描绘订单量的坐标轴        yaxis=opts.AxisOpts(            position = 'right', #设置坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 1300, #设置y刻度的最小值            offset = 60, #设置Y轴偏移        )    )    .extend_axis(               #添加一个描绘增长率的坐标轴        yaxis=opts.AxisOpts(            position="left",   #设置坐标轴在画布左侧            min_ = -5, #设置y刻度的最小值            max_ = 5,#设置y刻度的最大值        )    )    .set_global_opts(        yaxis_opts=opts.AxisOpts(            position="right", #设置描绘销售额的坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 13000, #设置y刻度的最小值        )    ))#线图line = (    Line()    .add_xaxis(['2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020'])    .add_yaxis('销增长率',r1,yaxis_index=2,)    .add_yaxis('订增长率',r2,yaxis_index=2,))# 合并两个图overlap_ = bar.overlap(line)grid = (    Grid()    .add(overlap_,          opts.GridOpts(             pos_left="5%", #调整左边轴线与画布的距离             pos_right="13%" #调整右边边轴线与画布的距离         ),          is_control_axis_index=True,    )).render('my_first_pycharts.html')

    bfd0d99def53fd7547d7724bfd30b336.png

    2.8 利用legend_opts=opts.LegendOpts()将标签设置在画布左侧居中,并纵向排列,这里需要调整左Y轴与画布边上的距离

    # 柱图bar = (    Bar()    .add_xaxis(year)    .add_yaxis('销售额',random_data_1,yaxis_index=0,gap='10%')    .add_yaxis('订单量',random_data_2,yaxis_index=1,gap='10%')    .extend_axis(              #添加一个描绘订单量的坐标轴        yaxis=opts.AxisOpts(            position = 'right', #设置坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 1300, #设置y刻度的最小值            offset = 60, #设置Y轴偏移        )    )    .extend_axis(               #添加一个描绘增长率的坐标轴        yaxis=opts.AxisOpts(            position="left",   #设置坐标轴在画布左侧            min_ = -5, #设置y刻度的最小值            max_ = 5,#设置y刻度的最大值        )    )    .set_global_opts(        yaxis_opts=opts.AxisOpts(            position="right", #设置描绘销售额的坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 13000, #设置y刻度的最小值        ),        legend_opts=opts.LegendOpts( #将标签设置在左边居中,并纵向排列            is_show=True,             pos_left="left",             orient="vertical",            pos_top = 'center',            textstyle_opts = opts.TextStyleOpts(                                      font_size = 10,  # 标签字体大小                                             )        ),    ))#线图line = (    Line()    .add_xaxis(['2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020'])    .add_yaxis('销增长率',r1,yaxis_index=2,)    .add_yaxis('订增长率',r2,yaxis_index=2,))# 合并两个图overlap_ = bar.overlap(line)grid = (    Grid()    .add(overlap_,          opts.GridOpts(             pos_left="10%", #调整左边轴线与画布的距离             pos_right="13%" #调整右边边轴线与画布的距离         ),          is_control_axis_index=True,    )).render('my_first_pycharts.html')

    3b3d78992dfeae8a7f8d3993ca5ba54d.png

    2.9 利用初始化配置项init_opts=opts.InitOpts()设置主题背景(以DARK为例)以及画布的宽、高。官方主题背景参考:https://pyecharts.org/#/zh-cn/themes上面的定制主题。

    # 柱图bar = (    Bar()    .add_xaxis(year)    .add_yaxis('销售额',random_data_1,yaxis_index=0,gap='10%')    .add_yaxis('订单量',random_data_2,yaxis_index=1,gap='10%')    .extend_axis(              #添加一个描绘订单量的坐标轴        yaxis=opts.AxisOpts(            position = 'right', #设置坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 1300, #设置y刻度的最小值            offset = 60, #设置Y轴偏移        )    )    .extend_axis(               #添加一个描绘增长率的坐标轴        yaxis=opts.AxisOpts(            position="left",   #设置坐标轴在画布左侧            min_ = -5, #设置y刻度的最小值            max_ = 5,#设置y刻度的最大值        )    )    .set_global_opts(        yaxis_opts=opts.AxisOpts(            position="right", #设置描绘销售额的坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 13000, #设置y刻度的最小值        ),        legend_opts=opts.LegendOpts( #将标签设置在左边居中,并纵向排列            is_show=True,             pos_left="left",             orient="vertical",            pos_top = 'center',            textstyle_opts = opts.TextStyleOpts(                                      font_size = 10,  # 标签字体大小                                             )        ),    ))#线图line = (    Line()    .add_xaxis(['2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020'])    .add_yaxis('销增长率',r1,yaxis_index=2,)    .add_yaxis('订增长率',r2,yaxis_index=2,))# 合并两个图overlap_ = bar.overlap(line)grid = (    Grid(        init_opts=opts.InitOpts(            width = '1500px', # 设置画布宽            height = '800px', #设置画布高    #             bg_color = '#004B66', # 背景颜色设置            theme =  ThemeType.DARK #设置主题        )    )    .add(overlap_,          opts.GridOpts(             pos_left="10%", #调整左边轴线与画布的距离             pos_right="13%" #调整右边边轴线与画布的距离         ),          is_control_axis_index=True,    )).render('my_first_pycharts.html')

    0e66ef8a3c1c2e1acc69a05b180273c5.png

    2.10 设置主标题和三条y轴的标题、颜色、字体大小等,以及两条折线的颜色

    # 柱图bar = (    Bar()    .add_xaxis(year)    .add_yaxis('销售额',random_data_1,yaxis_index=0,gap='10%')    .add_yaxis('订单量',random_data_2,yaxis_index=1,gap='10%')    .extend_axis(              #添加一个描绘订单量的坐标轴        yaxis=opts.AxisOpts(            name = '订单量\n(万件)',            position = 'right', #设置坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 1300, #设置y刻度的最小值            offset = 60, #设置Y轴偏移            axisline_opts=opts.AxisLineOpts(                linestyle_opts=opts.LineStyleOpts(color="#FFB8B8")            ),            name_textstyle_opts = opts.TextStyleOpts(                #文字颜色                color='#FFB8B8',             ),        )    )    .extend_axis(               #添加一个描绘增长率的坐标轴        yaxis=opts.AxisOpts(            name = '增长率',            position="left",   #设置坐标轴在画布左侧            min_ = -5, #设置y刻度的最小值            max_ = 5,#设置y刻度的最大值            axisline_opts=opts.AxisLineOpts(                linestyle_opts=opts.LineStyleOpts(color="#CCCC00")            ),            name_textstyle_opts = opts.TextStyleOpts(                #文字颜色                color='#CCCC00',             ),        )    )    .set_global_opts(        yaxis_opts=opts.AxisOpts(            name = '销售额\n(万元)',            position="right", #设置描绘销售额的坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 13000, #设置y刻度的最小值            axisline_opts=opts.AxisLineOpts(                linestyle_opts=opts.LineStyleOpts(color="#EEAEEE")            ),            name_textstyle_opts = opts.TextStyleOpts(                #文字颜色                color='#EEAEEE',             ),        ),         title_opts=opts.TitleOpts(            title="历年订货额/订单量增长情况",            pos_left = 'center',            pos_top = '0px',            # 设置主标题字体、颜色、大小等            title_textstyle_opts = opts.TextStyleOpts(                 #文字颜色                 color='#66FFB3',                  #文字风格,可选:normal(正常)、italic(斜体)、oblique(斜体)                 font_style='normal',                  #主标题文字字体的粗细,可选:'normal','bold','bolder','lighter'                 font_weight='bold',                 #文字的字体系列,还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...                 font_family='Arial',                 # 文字的字体大小                 font_size = 25,            )        ),        legend_opts=opts.LegendOpts( #将标签设置在左边居中,并纵向排列            is_show=True,             pos_left="left",             orient="vertical",            pos_top = 'center',            textstyle_opts = opts.TextStyleOpts(                                      font_size = 10,  # 标签字体大小                                             )        ),    ))#线图line = (    Line()    .add_xaxis(['2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020'])    .add_yaxis('销增长率',r1,yaxis_index=2,itemstyle_opts=opts.ItemStyleOpts(color='green'))    .add_yaxis('订增长率',r2,yaxis_index=2,itemstyle_opts=opts.ItemStyleOpts(color='#FF4D4D')))# 合并两个图overlap_ = bar.overlap(line)grid = (    Grid(        init_opts=opts.InitOpts(            width = '1500px', # 设置画布宽            height = '800px', #设置画布高    #             bg_color = '#004B66', # 背景颜色设置            theme =  ThemeType.DARK #设置主题        )    )    .add(overlap_,          opts.GridOpts(             pos_left="10%", #调整左边轴线与画布的距离             pos_right="13%" #调整右边边轴线与画布的距离         ),          is_control_axis_index=True,    )).render('my_first_pycharts.html')

    27e6e8593aec5788d52b8fc638896841.png

    2.11 设置提示框、拖拉框(这个功能非常优秀!)

            如果x轴数据量太多怎么办?比如本文的x轴是代表年份,从2004-2020共17年,图形柱子太多,显得不够美观,这时候拖拉框功能就派上用场拉。提示框的功能是,当你鼠标停留在图形上时,会提示对应的数据出来,详情请继续往下浏览。

    # 柱图bar = (    Bar()    .add_xaxis(year)    .add_yaxis('销售额',random_data_1,yaxis_index=0,gap='10%')    .add_yaxis('订单量',random_data_2,yaxis_index=1,gap='10%')    .extend_axis(              #添加一个描绘订单量的坐标轴        yaxis=opts.AxisOpts(            name = '订单量\n(万件)',            position = 'right', #设置坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 1300, #设置y刻度的最小值            offset = 60, #设置Y轴偏移            axisline_opts=opts.AxisLineOpts(                linestyle_opts=opts.LineStyleOpts(color="#FFB8B8")            ),        )    )    .extend_axis(               #添加一个描绘增长率的坐标轴        yaxis=opts.AxisOpts(            name = '增长率',            position="left",   #设置坐标轴在画布左侧            min_ = -5, #设置y刻度的最小值            max_ = 5,#设置y刻度的最大值            axisline_opts=opts.AxisLineOpts(                linestyle_opts=opts.LineStyleOpts(color="#CCCC00")            ),                    )    )    .set_global_opts(        yaxis_opts=opts.AxisOpts(            name = '销售额\n(万元)',            position="right", #设置描绘销售额的坐标轴在画布右侧            axisline_opts=opts.AxisLineOpts(                linestyle_opts=opts.LineStyleOpts(color="#EEAEEE")            ),        ),         title_opts=opts.TitleOpts(            title="历年订货额/订单量增长情况",            pos_left = 'center',            pos_top = '0px',            # 设置主标题字体、颜色、大小等            title_textstyle_opts = opts.TextStyleOpts(                 #文字颜色                 color='#66FFB3',                  #文字风格,可选:normal(正常)、italic(斜体)、oblique(斜体)                 font_style='normal',                  #主标题文字字体的粗细,可选:'normal','bold','bolder','lighter'                 font_weight='bold',                 #文字的字体系列,还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...                 font_family='Arial',                 # 文字的字体大小                 font_size = 25,            )        ),        legend_opts=opts.LegendOpts( #将标签设置在左边居中,并纵向排列            is_show=True,             pos_left="left",             orient="vertical",            pos_top = 'center',            textstyle_opts = opts.TextStyleOpts(                                      font_size = 10,  # 标签字体大小                                             )        ),        tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"), #设置提示框        datazoom_opts=opts.DataZoomOpts( #设置拖拉框            range_start = 70,  #拖拉起始位置(百分比)            range_end = 100,   #拖拉结束位置(百分比)        ),    ))#线图line = (    Line()    .add_xaxis(['2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020'])    .add_yaxis('销增长率',r1,yaxis_index=2,itemstyle_opts=opts.ItemStyleOpts(color='green'))    .add_yaxis('订增长率',r2,yaxis_index=2,itemstyle_opts=opts.ItemStyleOpts(color='#FF4D4D')))# 合并两个图overlap_ = bar.overlap(line)grid = (    Grid(        init_opts=opts.InitOpts(            width = '1500px', # 设置画布宽            height = '800px', #设置画布高    #             bg_color = '#004B66', # 背景颜色设置            theme =  ThemeType.DARK #设置主题        )    )    .add(overlap_,          opts.GridOpts(             pos_left="10%", #调整左边轴线与画布的距离             pos_right="13%" #调整右边边轴线与画布的距离         ),          is_control_axis_index=True,    )).render('my_first_pycharts.html')

    906211d539ff2a063a7f5263a89855bd.png

    2.12 画入大屏

            由于本人没有接触过前端知识,下面这些代码都是从网上找的,直接复制粘贴来用,只需要修改网页背景、标题和图形的位置以及标题文字的大小、颜色即可。

    with open("my_first_pycharts.html", "r+", encoding='utf-8') as html:    html_bf = BeautifulSoup(html, 'lxml')    divs = html_bf.select('.chart-container')    divs[0]['style'] = "width:750px;height:400px;position:absolute;top:120px;left:550px;border-style:solid;border-color:#444444;border-width:0px;"    body = html_bf.find("body")    body["style"] = "background-color:#07645D;" #设置网页背景颜色    div_title="
    \n2020年销售数据分析
    " #修改页面背景色、追加标题 body.insert(0,BeautifulSoup(div_title,"lxml").div) html_new = str(html_bf) html.seek(0, 0) html.truncate() html.write(html_new) html.close()

    e67a6e40976f4218be022810e4f2b421.png

    2.13 最后,将背景DARK改为WONDERLAND,就得到最终的效果图:

    20ae326531de45ab26010b14e664f0de.png

    有问题欢迎联系我vx:HCP19970120

    展开全文
  • 柱状图import echarts from 'echarts'; let root = document.getElementById('root'); ...

    柱状图

    import echarts from 'echarts';
    let root = document.getElementById('root');
    let myCharts  = echarts.init(root);
    let options = {    xAxis:{        type:'category',        data:['red','yellow','pink'],    },    yAxis:{        type:'value',    },    series:[        {            name:'英语',            type:'bar',            data:[70,80,66]        }    ]}
    myCharts.setOption(options);
    
    

    柱状图配置最大值最小值平均值

    import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {    xAxis:{        type:'category',        data:['张三','李四','王五','马六','小明','二妞','大强'],    },    yAxis:{        type:'value'    },    series:[        {               name:'语文',            type:'bar',            +markPoint:{                +data:[                    {                        type:'max',                        name:'最大值',                    },                    {                        type:'min',                        name:'最小值'                    }                ]            },            markLine:{                data:[                    {                        type:'average',                        name:'平均值',                    }                ]            },            data:[88,92,63,77,94,80,72,]        }   ]}myCharts.setOption(option);
    
    

    柱状图 数值 柱宽度 显示设置

    import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {    xAxis:{        type:'category',        data:['张三','李四','王五','马六','小明','二妞','大强'],    },    yAxis:{        type:'value'    },    series:[        {               name:'语文',            type:'bar',            label:{                show:true,                position:'top',            },            barWidth:'40%',            data:[88,92,63,77,94,80,72,]        }    ]}myCharts.setOption(option);
    

    通用配置title

    import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {    title:{        text:'成绩展示',        textStyle:{            color:'pink',                   },        borderWidth:2,        borderColor:'blue',        borderRadius:5,        left:'50%',    },    xAxis:{        type:'category',        data:['张三','李四','王五','马六','小明','二妞','大强'],    },    yAxis:{        type:'value'    },    series:[        {               name:'语文',            type:'bar',            label:{                show:true,                position:'top',            },            barWidth:'40%',            data:[88,92,63,77,94,80,72,]        }    ]}myCharts.setOption(option);
    

    tooltip的通用配置 触发类型trigger,触发时机triggerOn格式化formatter

    import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {    tooltip:{        // trigger:'item',        trigger:'item',        // triggerOn:'click',        formatter:(args) => {            return `${args.seriesName}的分数是${args.data}`;        }    },    xAxis:{        type:'category',        data:['张三','李四','王五','马六','小明','二妞','大强'],    },    yAxis:{        type:'value'    },    series:[        {               name:'语文',            type:'bar',            label:{                show:true,                position:'top',            },            barWidth:'40%',            data:[88,92,63,77,94,80,72,]        }    ]}myCharts.setOption(option);
    

    toolbox工具栏配置 导出图片,动态类型,数据区域缩放

    import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {    toolbox:{        feature:{            saveAsImage:{ //导出图片                show:true,            },            dataView:{ //数据视图                show:true,            },            restore:{ //数据重置                show:true,            },            dataZoom:{//区域缩放                show:true,            },            magicType:{ //动态图表类形切换                type:['bar','line']            }
            }    },    xAxis:{        type:'category',        data:['张三','李四','王五','马六','小明','二妞','大强'],    },    yAxis:{        type:'value'    },    series:[        {               name:'语文',            type:'bar',            label:{                show:true,                position:'top',            },            barWidth:'40%',            data:[88,92,63,77,94,80,72,]        }    ]}myCharts.setOption(option);
    

    通用配置legend

    import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {        xAxis:{        type:'category',        data:['张三','李四','王五','马六','小明','二妞','大强'],    },    yAxis:{        type:'value'    },    legend:{        data:['语文','数学']    },    series:[        {               name:'语文',            type:'bar',            label:{                show:true,                position:'top',            },            barWidth:'40%',            data:[88,92,63,77,94,80,72,]        },        {            name:'数学',            type:'bar',            barWidth:'40%',            data:[88,22,44,77,94,80,72,]        }    ]}myCharts.setOption(option);
    

    基本折线图

    import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);
    let option = {    xAxis:{        type:'category',        data:['一月','二月','三月','四月','五月'],    },    yAxis:{        type:'value'    },    series:[        {            type:'line',            data:[22,44,20,99,55]        }    ]};myCharts.setOption(option);
    

    折线图最大值,最小值,平均值,标注区间,线条,平滑,风格的设置

    import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);
    let option = {    xAxis:{        type:'category',        data:['一月','二月','三月','四月','五月'],    },    yAxis:{        type:'value'    },       series:[        {            type:'line',            data:[22,44,20,99,55],            markPoint:{                data:[                    {                        type:'max',                        name:'最大值'                    },                    {                        type:'min',                        name:'最小值'                    }                ]            },            markLine:{                data:[                    {                        type:'average',                    }                ]            },            smooth:true,            lineStyle:{                color:'yellow',                type:'dashed'            },            markArea:{                data:[                    [                        {                            xAxis:'一月'                        },                        {                            xAxis:'二月'                        }                ]                ]            }        }    ]};myCharts.setOption(option);
    
    

    grid基本配置

    import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);
    let option = {   //是否显示    grid:{        show:true,        borderWidth:5,        borderColor:'pink',    },    xAxis:{        type:'category',        data:['一月','二月','三月','四月','五月'],        boundaryGap:false,    },    yAxis:{        type:'value',        scale:true,    },       series:[        {            type:'line',            stack:'all',            data:[22,44,20,99,55],        },        {            type:'line',            stack:'all',            data:[55,66,88,22,10],        }    ]};myCharts.setOption(option);
    

    区域缩放器

    import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {    dataZoom:[        {            type:'slider',            //type:'inside',        }    ],    xAxis:{        type:'category',        data:['张三','李四','王五','马六','小明','二妞','大强'],    },    yAxis:{        type:'value'    },    series:[        {               name:'语文',            type:'bar',            label:{                show:true,                position:'top',            },            barWidth:'40%',            data:[88,92,63,77,94,80,72,]        }    ]}myCharts.setOption(option);
    
    

    饼图的基本实现

    import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {   series:[       {            type:'pie',            data:[                {                    name:'京东',                    value:998                },                {                    name:'唯品会',                    value:2209                },                {                    name:'淘宝',                    value:2440                }            ]       }   ]}myCharts.setOption(option);
    

    显示数值的设置

    import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {   series:[       {            type:'pie',            data:[                {                    name:'京东',                    value:998                },                {                    name:'唯品会',                    value:2209                },                {                    name:'淘宝',                    value:2440                }            ],            label:{                show:true,                formatter:(values) =>  {                    return `${values.name}所占百分比${(values.percent)+'%'}`                }            }       }   ]}myCharts.setOption(option);
    

    设置圆环

    import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {   series:[       {            type:'pie',            data:[                {                    name:'京东',                    value:998                },                {                    name:'唯品会',                    value:2209                },                {                    name:'淘宝',                    value:2440                }            ],            radius:['50%','75%']       }   ]}myCharts.setOption(option);
    

    雷达图

    import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {  radar:{      indicator:[            {                name:'功能',                value:100            },            {                name:'拍照',                value:100,            },            {                name:'跑分',                value:100,            },            {                name:'续航',                value:100,            },            {                name:'易用性',                value:100            }        ]  },  series:[    {        type:'radar',        data:[            {                name:'华为手机',                value:[80,90,80,82,94],                type:'specified'            },            {                name:'中兴手机',                type:'specified',                value:[70,82,75,70,78]            }        ]
        }    ]}myCharts.setOption(option);
    

    雷达图显示数值,区域面和,绘制类型的配置

    • 设置label显示数值

    • 设置areaStyle显示面积

    import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {  radar:{    //   shape:'circle',      indicator:[            {                name:'功能',                value:100            },            {                name:'拍照',                value:100,            },            {                name:'跑分',                value:100,            },            {                name:'续航',                value:100,            },            {                name:'易用性',                value:100            }        ]  },  series:[    {        type:'radar',        label:{            show:true,        },        areaStyle:{
            },        data:[            {                name:'华为手机',                value:[80,90,80,82,94],                type:'specified'            },            {                name:'中兴手机',                type:'specified',                value:[70,82,75,70,78]            }        ]
        }    ]}myCharts.setOption(option);
    

    仪表盘

    import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {  series:[{      type:'gauge',      data:[          {              value:97,
              }        ]  }]}myCharts.setOption(option);
    

    主题的使用

    • 两套主是分别是dark和light

    import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root,'dark');let option = {  series:[{      type:'gauge',      data:[          {              value:97,
              }        ]  }]}myCharts.setOption(option);
    

    自适应

    import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);window.onresize = myCharts.resize;let option = {    color:['pink','pink','yellow'],    tooltip:{        // trigger:'item',        trigger:'item',        // triggerOn:'click',        formatter:(args) => {            return `${args.seriesName}的分数是${args.data}`;        }    },    xAxis:{        type:'category',        data:['张三','李四','王五','马六','小明','二妞','大强'],    },    yAxis:{        type:'value'    },    series:[        {               name:'语文',            type:'bar',            label:{                show:true,                position:'top',            },            barWidth:'40%',            data:[88,92,63,77,94,80,72,]        }    ]}myCharts.setOption(option);
    

    绑定事件

    import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {    legend:{        data:['京东','唯品会','淘宝']    },    series:[        {                type:'pie',                data:[                    {                        name:'京东',                        value:998                    },                    {                        name:'唯品会',                        value:2209                    },                    {                        name:'淘宝',                        value:2440                    }                ]        }    ]}// myCharts.on('click',(ev) => {//     console.log('ev',ev);// });myCharts.on('legendselectchanged',(ev) => {    console.log('ev',ev);})myCharts.setOption(option);
    

    转自:https://juejin.cn/post/6960109467505524766

    7个可视化大屏案例展示

    以下为源码案例展示,如果你需要此源码,请关注“前端达人”公众号,回复“echarts”获取。

    展开全文
  • 下面我们以近期Smartbi实施的生产可视化监控大屏案例进行介绍。 Smartbi监控大屏解决方案: 1 客户介绍 该客户是高端营养及健康产业的领导者,在中国婴幼儿营养市场以及草药和矿物补充剂市场均具有领先的地位。 2 ...

    全球制造业正加快迈向数字化、智能化时代,智能制造对制造业竞争力的影响越来越大。对于中国制造业来说,提高质量效益、转变生产方式是必须要解决的问题,而发展智能制造正是中国制造由大到强的必由之路。

    智能制造的基础是企业的数字化,当数字化技术渗透到企业生产链的各个环节时,实时采集生产过程中产生的数据,并对这些数据进行监控、分析,将有利于生产决策者做出更加智慧的决策。Smartbi在制造业数字化中的应用,也从最初的数据展示,发展到提供数据采集、展示、监控和分析等一站式的解决方案,将生产管理系统(MES)、设备管理系统(FEMS)、企业资源计划系统(ERP) 等业务系统的数据进行有效整合,充分发挥数据价值,帮助决策者随时掌握相关数据以及变化趋势,从而合理配置资源进行事件决策。下面我们以近期Smartbi实施的生产可视化监控大屏案例进行介绍。

    Smartbi监控大屏解决方案:

    1 客户介绍

    该客户是高端营养及健康产业的领导者,在中国婴幼儿营养市场以及草药和矿物补充剂市场均具有领先的地位。

    2 项目背景

    车间仓库大多数手工记录数据信息,容易丢失;

    车间仓库管理系统简单老旧,没有可视化展示,不便于日常工作进展的监控和管理;

    企业为提高核心竞争力,试行生产过程的数字化运营模式。

    3 项目目标

    利用可视化直观地展示车间的生产进度情况,以及仓库的出入货情况,使车间和仓库人员根据情况调整生产计划和工作,确保生产目标的达成;

    规范车间仓库员工的日常工作,推动车间仓库数据入库,减少手工记录数据信息情况,减少信息丢失情况,提高工作效率;

    利用可视化信息,便于领导对车间及仓库工作及时管理。

    4 项目价值

    通过数字化和可视化大屏定时轮播展示生产过程的环节,实现数据化生产目标;

    通过第三方硬件发布系统和软件加密数据,使人员和数据对应,实现数据安全;

    利用可视化信息,便于领导安排生产计划和调配资源,确保生产目标达成。

    5 成果展示

    1、生产计划进度监控:从生产计划到领料开工,再到在制报工,再到完工入库,完全可视化跟踪,并及时监控异常:

    你是我的眼:制造业生产的可视化监控应用

    2、奶粉生产线状态:奶粉产线看板共7个,每条产线分配一个大屏看板,主要展示目前该产线上奶粉的生产情况:

    你是我的眼:制造业生产的可视化监控应用

    3、品质分析:质量是企业的生命线,对质量的严格掌握有利于企业长期的发展。成品检测的指标有:测试不良率、测试合格率、组装合格率:

    你是我的眼:制造业生产的可视化监控应用

    4、生产效率分析:制造企业多为低利润,通过提高内部生产效率,从而达到降低产品成本,提高企业盈利:

    你是我的眼:制造业生产的可视化监控应用

    5、成品库存监控:成品仓看板分为左右两部分。左半部分展示的是仓库的发货详情,右半部分展示的是客户收货及承运商出库的汇总情况。通过可视化大屏展示,仓库员工可以直观查看到仓库目前的总体情况,同时承运商可根据目前的出库完成率规划成品的出库方案,总体提高工作效率:

    你是我的眼:制造业生产的可视化监控应用

    Smartbi监控大屏解决方案——生产可视化监控,可支持多种数据源的采集,支持数据的处理和可视化,将制造企业生产链各个环节的数据进行关联,以流程化、图形化形式进行全方位直观展示,成为生产管理人员的“眼”。通过全过程、多角度的生产数据实时监控,可以看清生产链每一个环节存在的问题并及时采取措施。

    展开全文
  • 大屏展示Demo

    2018-11-28 10:57:53
    采用echarts +jquery +css 做的Demo演示 希望有助于学习的朋友
  • 淘宝数据可视化大屏案例(Hadoop实验)

    万次阅读 多人点赞 2020-12-05 00:12:47
    身处大数据时代,每一天都在产生数据,对于数据的应用是每一个行业的最基本的要求,也是他们立足于商业的必要手段。 项目简介 项目条件 1.首先要准备数据集 2.准备环境,Hadoop集群,需要hdfs,hive,Fiume,...
  • 包含11个大屏可视化网页项目,包括智慧城市,智慧物流,智慧金融,智慧政务等,无版权使用,修改过后可以当作你自己的项目
  • 可视化大屏实例

    2018-11-16 18:47:26
    可视化大屏完整实例,用echarts 实现图标,效果比较好,
  • 大屏数据可视化案例

    万次阅读 多人点赞 2018-06-25 18:07:38
    数据可视化:把相对复杂的、抽象的数据通过可视的、交互的方式进行展示,从而形象直观地表达数据蕴含的信息和规律。 数据可视化是数据空间到...大屏数据可视化应用的难点并不在于图表类型的多样化,而在于如何能在...
  • 数据可视化案例集合,有详细步骤和数据,可以复现。适用于没有基础的新手。tableau以讲故事的方式改变传统数据的枯燥性。
  • 大屏数据可视化demo

    2019-03-22 16:00:32
    大屏数据可视化案例;大数据可视化案例;供大家学习使用。
  • 前端ECharts图表可视化大屏开发案例

    千次阅读 2019-11-02 10:12:08
    前端ECharts图表可视化大屏开发案例 https://blog.csdn.net/daoke_li/article/details/93065550 项目开源地址: 码云:https://gitee.com/daoke0818/pro_bigScreenCharts Github:...
  • 今天要跟大家分享我一年多设计大数据可视化大屏的经验和观点,下面从UI设计、交互设计、动效设计三个方面来分享。 UI设计 设计大屏一样要谨记要以展示数据为核心,在任何炫酷屌炸天表现都要建立在不影响数据的...
  • 用Echarts在web中实现大屏展示效果,实现数据可视化,大屏显示效果,用echarts插件实现
  • Echats可视化大屏经典案例
  • 下面以业内大数据可视化应用典型案例——天士力集团可视化大屏案例简单分析: 一、制作属于企业个人风格的可视化大屏。作为在大健康城展览馆展示的大屏,是天士力对外宣传公司实力和品牌形象的重要窗口,所以公司对...
  • [FineReport]综合案例大屏显示

    万次阅读 2016-12-28 09:43:22
    学习进入第三周也做了一些简单报表设计,以综合大屏显示作为自己本阶段的总结吧。 1.大屏显示首先引入眼帘的是色彩,为了统一配色,我采用表单整个图片背景导入。 2.字体统一,主题字体:微软雅黑,主体字体:微软...
  • 近几年,随着大数据产业的...下面我们来看看5个经典的数据可视化大屏应用案例。 1、法院数据分析系统 法院行政案件大数据分析系统包含了结案特征分析、当事人分析、实效分析和管辖改革成效。通过收案/结案的数量和增
  • 点击▲关注 “爪哇笔记” 给公众号标星置顶 更多精彩 第一时间直达 三个月前码云上开源了一个大屏数据展示模板仓库,一直霸占在今日热门上,目前已经3k星标,红薯大佬也给了赞赏,可...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,988
精华内容 2,795
关键字:

大屏案例