精华内容
下载资源
问答
  • Echarts-柱形图与折线图混合显示

    万次阅读 2018-04-02 17:11:10
    背景:想让折线图跟柱形图混合显示,当然其实利用echarts的图形切换功能,可以很容易的实现,比如下边的这个代码  toolbox: {   top:0,  feature: { //点击图表可直接将柱形图与折线图进行切换  magicType: {...

    背景:想让折线图跟柱形图混合显示,当然其实利用echarts的图形切换功能,可以很容易的实现,比如下边的这个代码

        toolbox: {
        top:0,
            feature: {

                      //点击图表可直接将柱形图与折线图进行切换

              magicType: {show: true, type: ['line', 'bar']},
       
            }

        },

    但是当你有五六个图形,还要切换图形的时候要实现就要多写一些代码了,接下来教你,用legend切换还能折柱混合。

    option = {
    title: {
            left: 'left',
            text: '概率',
            show:false
        },
        tooltip: {
            trigger: 'axis',
            formatter:'{a}:{c}',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        grid: {
        show:false,
        top:'30',
        bottom:'60',
        right:'60',
        left:'60'
        },
        legend: {
        show:true,
        selectedMode:'single',   
    //设置显示单一图例的图形,点击可切换
        bottom:10,
        left:50,
        textStyle:{
        color:'#666',
        fontSize:12
        },
        itemGap:20,
            data:['设备一','设备二','设备三'],
             inactiveColor:'#ccc'
        },
        xAxis: [
            {
                type: 'category',
                data: ['济南', '青岛', '烟台', '威海', '潍坊', '东营', '日照',
            '滨州','莱芜','淄博','德州','聊城','临沂','泰安','菏泽','济宁','枣庄'],
                axisPointer: {
                    type: 'shadow'

                },

                        axisTick: {
                    show:true,
                    interval: 0
       },

            }

        ],

    //设置两个y轴,左边显示数量,右边显示概率

        yAxis: [
            {
                type: 'value',
                name: '数量',
                show:true,
               interval: 50,
            },
            {
                type: 'value',
                name: '概率',
                min: 0,
                max: 100,
                interval: 10,
                axisLabel: {
                    formatter: '{value} %'
                }
            }

        ],

    //每个设备分数量、概率2个指标,只要让他们的name一致,即可通过,legeng进行统一的切换

        series: [
            {
                name:'设备一',
                type:'bar',
                data:[900,800,700,680,650,640,600,570,680,650,640,600,570,
                450,400,380,300],
                barWidth : '50%',
                
            },
             {
                name:'设备一',
                type:'line',
                yAxisIndex: 1,   
    //这里要设置哪个y轴,默认是最左边的是0,然后1,2顺序来。
                data:[75,65,85,66,45,55,56,42,78,69,70,36,42,50,65,75,80],
                symbolSize:10,
                itemStyle:{
                normal:{
                color:"#DDA0DD"
                }
               
                }
            },
            {
                name:'设备二',
                type:'bar',
                data:[700,680,650,640,600,570,680,650,640,600,570,
                450,400,380,300,900,800],
                barWidth : '50%',
            },
            {
                name:'设备二',
                type:'line',
                yAxisIndex: 1,
                data:[75,65,85,66,45,55,56,42,78,69,70,36,42,50,65,75,80],
                symbolSize:10,
                itemStyle:{
                normal:{
                color:"#87CEFA"
                }
               
                }
            },
            {
                name:'设备三',
                type:'bar',
                data:[600,570,680,650,640,600,570,
                450,400,380,300,900,800,700,680,650,640,],

                barWidth : '50%',
            },
            {
                name:'设备三',
                type:'line',
                yAxisIndex: 1,
                data:[75,65,85,66,45,55,56,42,78,69,70,36,42,50,65,75,80],
                symbolSize:10,
                itemStyle:{
                normal:{
                color:"#CD5C5C"
                }
               
                }
            }
        ]
    };

    //看下图形样式




    个人观点,欢迎指正

    本人原创,非本人允许禁止转载

    展开全文
  • 背景:想让折线图跟柱形图混合显示,当然其实利用echarts的图形切换功能,可以很容易的... //点击图表可直接将柱形图与折线图进行切换 magicType: {show: true, type: ['line', 'bar']}, } }, 但是当你有五六...

    背景:想让折线图跟柱形图混合显示,当然其实利用echarts的图形切换功能,可以很容易的实现,比如下边的这个代码

    toolbox: {
    top:0,
        feature: {
    
                  //点击图表可直接将柱形图与折线图进行切换
    
          magicType: {show: true, type: ['line', 'bar']},
    
        }
    },
    

    但是当你有五六个图形,还要切换图形的时候要实现就要多写一些代码了,接下来教你,用legend切换还能折柱混合。

    option = {
    title: {
    left: ‘left’,
    text: ‘概率’,
    show:false
    },
    tooltip: {
    trigger: ‘axis’,
    formatter:’{a}:{c}’,
    axisPointer: {
    type: ‘cross’,
    crossStyle: {
    color: ‘#999’
    }
    }
    },
    grid: {
    show:false,
    top:‘30’,
    bottom:‘60’,
    right:‘60’,
    left:‘60’
    },
    legend: {
    show:true,
    selectedMode:‘single’, //设置显示单一图例的图形,点击可切换
    bottom:10,
    left:50,
    textStyle:{
    color:’#666’,
    fontSize:12
    },
    itemGap:20,
    data:[‘设备一’,‘设备二’,‘设备三’],
    inactiveColor:’#ccc’
    },
    xAxis: [
    {
    type: ‘category’,
    data: [‘济南’, ‘青岛’, ‘烟台’, ‘威海’, ‘潍坊’, ‘东营’, ‘日照’,
    ‘滨州’,‘莱芜’,‘淄博’,‘德州’,‘聊城’,‘临沂’,‘泰安’,‘菏泽’,‘济宁’,‘枣庄’],
    axisPointer: {
    type: ‘shadow’

            },
    
                    axisTick: {
                show:true,
                interval: 0
    

    },

        }
    ],
    

    //设置两个y轴,左边显示数量,右边显示概率

    yAxis: [
        {
            type: 'value',
            name: '数量',
            show:true,
           interval: 50,
        },
        {
            type: 'value',
            name: '概率',
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
                formatter: '{value} %'
            }
        }
    ],
    

    //每个设备分数量、概率2个指标,只要让他们的name一致,即可通过,legeng进行统一的切换

    series: [
        {
            name:'设备一',
            type:'bar',
            data:[900,800,700,680,650,640,600,570,680,650,640,600,570,
            450,400,380,300],
            barWidth : '50%',
            
        },
         {
            name:'设备一',
            type:'line',
            yAxisIndex: 1,    //这里要设置哪个y轴,默认是最左边的是0,然后1,2顺序来。
            data:[75,65,85,66,45,55,56,42,78,69,70,36,42,50,65,75,80],
            symbolSize:10,
            itemStyle:{
            normal:{
            color:"#DDA0DD"
            }
            
            }
        },
        {
            name:'设备二',
            type:'bar',
            data:[700,680,650,640,600,570,680,650,640,600,570,
            450,400,380,300,900,800],
            barWidth : '50%',
        },
        {
            name:'设备二',
            type:'line',
            yAxisIndex: 1,
            data:[75,65,85,66,45,55,56,42,78,69,70,36,42,50,65,75,80],
            symbolSize:10,
            itemStyle:{
            normal:{
            color:"#87CEFA"
            }
        }
    ]
    

    };

    展开全文
  • import pandas as pd import numpy as np import matplotlib.pyplot as plt import matplotlib.ticker as mtick #导入百分比 # 遇到数据中有中文的时候,一定要先设置中文字体 ...折线与柱状组合.

    import pandas as pd
    import numpy as np
    import matplotlib.pyplot as plt 
    import matplotlib.ticker as mtick    #导入百分比
    # 遇到数据中有中文的时候,一定要先设置中文字体
    plt.rcParams['font.sans-serif']=['SimHei'] # 用黑体显示中文
    path = 'C:/Users/Administrator/Desktop/playground2/09.折线与柱状组合图.xlsx'
    data = pd.read_excel(path)
    
    x = plt.figure()
    a = x.add_subplot(111)   # 一行一列一个
    a.bar(data.班级,data.销售量,color='red',alpha=0.5,label='销售量')
    a.legend(loc='upper left')
    a.set_ylim([0,12500])
    
    b = a.twinx()   #共用x轴
    b.plot(data.班级,data.毛利率2,color='b',marker='*',label='毛利率2')
    b.legend()
    bfb = mtick.FormatStrFormatter('%.2f%%')
    b.yaxis.set_major_formatter(bfb)
    b.set_ylim([0,100])
    
    for i,j in zip(data.班级,data.毛利率2):
        plt.text(i,j,str(j)+'%')
    plt.show()
    

    在这里插入图片描述

    展开全文
  • Excel2010 柱形图与折线图制表

    万次阅读 2013-08-24 05:46:32
    示例1:数据格式步骤:1、选择A/B/C所在全部数据区域2、插入→ 柱状图→ 二维柱状图3、...5、设计→ 更改图表类型6、在弹出的“更改图表类型”对话框中:选择折线图;结果如下:===================================

    示例1:

    数据格式



    问题:现在要用柱形图表示手机网民数和年增长率,横轴表示年份,纵轴(1)表示手机网民数,纵轴折线图(2)表示年增长率,要做在一个图表中,请问该怎么做?

     

    步骤:

    1、选择A/B/C所在全部数据区域

    2、插入→ 柱状图→ 二维柱状图

    3、在生成的柱状图中选中表示合格率的柱子,单击鼠标右键,选择“设置数据系列格式(F)”

    4、在弹出的“设置数据系列格式”对话框中:选中“次坐标轴(S)” → 关闭;

    5、设计→ 更改图表类型

    6、在弹出的“更改图表类型”对话框中:选择折线图;



    结果如下:



    ==============================================================


    示例2:

    数据格式为



    问题:现在要用柱形图表示合格的数量,横轴表示总数量与月份,纵轴表示合格的数量,折线图表示合格率,要做在一个图表中,请问该怎么做?

     

    步骤:

    1、选择月份、合格、合格率所在区域(A1C4)

    2、插入→ 柱状图→ 二维柱状图

    3、在生成的柱状图中选中表示合格率的柱子,单击鼠标右键,选择“数据系列格式(F)”

    4、在弹出的“设置数据系列格式”对话框中:选中“次坐标轴(S)” → 关闭;

    5、设计→ 更改图表类型

    6、在弹出的“更改图表类型”对话框中:选择折线图;

    7、选中图表中次坐标轴(合格率百分比轴)→ 布局→ 坐标轴→ 次要横坐标轴(S) → 其他次要横坐标轴选项(M) → 关闭。此时,图表下面将出现两个横坐标。

    8、选择图表区域,设计→ 选择数据

    9、在“选择数据源”对话框中选中“合格”系列,鼠标左单击“编辑(T)”;

    10、在弹出的“轴标签”对话框中:选择“总数”数据所在单元格区域($D$2:$D$4);→ 确定;

    11、在“选择数据源”对话框中鼠标左单击“确定”。此时,图表应该基本满足要求。

    12、双击图表中“月份横坐标轴”,在弹出的“设置坐标轴格式”对话框中的“纵坐标轴交叉”选择为“自动(O) ” → 关闭。


    结果如下:




    展开全文
  • 第一步:我们把光标定在EXCEL数据中,然后通过插入选项卡里面的推荐的图表命令,会弹出如下对话框,然后我们选择所有图表中的—组合,EXCEL会自动将里面的数据进行图表类型选择 在这里最关键的是增长率
  • // 添加一组柱形图,如果有多组柱形图数据,则可以多次addDataSet来设置 BarDataSet mildDataSet = new BarDataSet(barMild, ""); // 新建一组柱形图,"LAR"为本组柱形图的Label mildDataSet.setColor(Color....
  • 在微信小程序上使用ECharts添加图表–柱形图与折线图叠加使用 很好用的一个组件[传送门] 现在列举一个示例进行解析 先在json中配置 "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } 在wxml中 ...
  • 二、创建并美化柱形图 1.制作折线柱形符合图表 原数据初始图表: 对指标完成度再设置一个坐标轴: 因为造成了遮挡,右键-更改系列图标类型-使用折线图 通过调整坐标轴,让两个曲线分开: 美化后的...
  • ![图片说明]...!...请教各位大神,chart控件中怎么将stepLine折线柱形的起点开始画,而不是从中间开始,如第二幅所示。横坐标可以自定义设置为第二幅那样吗?麻烦大神们帮下忙,急需~谢谢!
  • 在使用echarts时,切换工具能切换柱形图与折线图,因为我柱形图设置的stack属性的值 是相同的,所以柱形图可以堆叠达到想要的效果,但也因为stack相同,折线图与堆叠了, 然面我并不想折线图堆叠,但两者又是共用一...
  • java 柱形图 饼图 折线图 JFreeChart,里面包含JFreeChart有关的所有jar包,还有我自己写的例子,通俗易懂!
  • Echarts柱状图与折线图的基本使用

    千次阅读 2017-12-18 20:23:15
    Echarts柱形图与折线图的使用
  • java 柱形图 饼图 折线图 JFreeChart,里面包含JFreeChart有关的所有jar包,还有我自己写的例子,通俗易懂!亲测好用,大家快来下载吧,挺不错的一个资源哦!!
  • 这节将会在前面的基础上,创建柱形图和双Y轴折线图,并且使用overlap将两条折线叠加在同一个图表上 1.全局配置项set_global_options() bar=Bar(init_opts=opts.InitOpts(bg_color='rgba(255,249,196,0.2)',width='...
  • //柱状创建函数 public void creatZZT(ZedGraphControl zgc, Dictionary<int, int> dic)  {    const double offset = 10;  // 为每个点加标注  GraphPane myPane = ...
  • 1.柱形图 先来看看效果啦 重要代码如下所示,必须引入echarts.js文件,之后初始化echarts,最终的是修改option中的配置项数据,echarts学习网页,这里面有许多配置项,根据你的需要修改啦 <head> <...
  • 通过 ViewPager Fragment 实现 水平页面滑动分别显示 饼状图、折线图柱形图

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 191
精华内容 76
关键字:

柱形图与折线图