多柱状图

最新推荐文章于 2022-10-16 15:18:03 发布
最新推荐文章于 2022-10-16 15:18:03 发布
阅读量572 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41375318/article/details/107841751
版权

多 柱 状 图 多柱状图 多柱状图

selectedMode: 'single',


axisLabel:{
      color:"white",
  },

option = {
    legend: {
        //selectedMode: 'single',
        data: ['个性化健康', '市场护理', '政府供给', '娱乐康复','心理咨询', '床位数', '社区服务', '8'],
       
    },
    xAxis: {
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        
    {
        name: "个性化健康",
        barWidth : 8,
        data: [20, 200, 150, 80, 70, 110, 130,15,4,316,21,33],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    },
    
    
    {
        name: "市场护理",
        barWidth : 8,
        data: [10, 200, 150, 80, 70, 110, 130,25,54,36,121,33],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    },
    
        {
        name: "政府供给",
        barWidth : 8,
        data: [120, 100, 150, 80, 70, 110, 130,125,25,136,21,33],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    },
    
    {
        name: "娱乐康复",
        barWidth : 8,
        data: [150, 200, 150, 180, 170, 110, 10,225,54,36,221,331],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    },
    {
        name: "心理咨询",    
        barWidth : 8,
        data: [128, 200, 50, 80, 70, 110, 130,125,254,36,211,313],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    },
    {
        name: "床位数",    
        barWidth : 8,
        data: [120, 20, 150, 80, 70, 110, 30,125,254,36,121,33],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    },
    {
        name: "社区服务",   
        barWidth : 8,
        data: [120, 200, 150, 80, 70, 10, 130,125,254,316,121,33],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    },
    {
        name: "8",  
        barWidth : 8,
        data: [120, 20, 150, 80, 70, 110, 30,125,254,36,21,33],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    },
    
    
    ]
};

在这里插入图片描述

多柱状图单选模式

option = {
    legend: {
        selectedMode: 'single',
        data: ['个性化健康', '市场护理', '政府供给', '娱乐康复','心理咨询', '床位数', '社区服务', '8'],
       
    },
    xAxis: {
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        
    {
        name: "个性化健康",
        barWidth : 8,
        data: [20, 200, 150, 80, 70, 110, 130,15,4,316,21,33],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    },
    
    
    {
        name: "市场护理",
        barWidth : 8,
        data: [10, 200, 150, 80, 70, 110, 130,25,54,36,121,33],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    },
    
        {
        name: "政府供给",
        barWidth : 8,
        data: [120, 100, 150, 80, 70, 110, 130,125,25,136,21,33],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    },
    
    {
        name: "娱乐康复",
        barWidth : 8,
        data: [150, 200, 150, 180, 170, 110, 10,225,54,36,221,331],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    },
    {
        name: "心理咨询",    
        barWidth : 8,
        data: [128, 200, 50, 80, 70, 110, 130,125,254,36,211,313],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    },
    {
        name: "床位数",    
        barWidth : 8,
        data: [120, 20, 150, 80, 70, 110, 30,125,254,36,121,33],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    },
    {
        name: "社区服务",   
        barWidth : 8,
        data: [120, 200, 150, 80, 70, 10, 130,125,254,316,121,33],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    },
    {
        name: "8",  
        barWidth : 8,
        data: [120, 20, 150, 80, 70, 110, 30,125,254,36,21,33],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    },
    
    
    ]
};

在这里插入图片描述

option = {
    title: {
        text: '',
        subtext: ''
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['2011年', '2012年']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ['助餐', '助洁', '助浴', '助医', '助行', '健康指导','康复护理','代办']
    },
    series: [
        {
            name: '2011年',
            type: 'bar',
            data: [182, 249, 294, 70, 144, 630,220,332]
        },

    ]
};

在这里插入图片描述

option = {
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['一星', '二星', '三星', '四星', '五星'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390]
        }
    ]
};

在这里插入图片描述

option = {
    title: {
        text: '总评星趋势'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['制度建设', '服务能力', '服务实施', '投诉管理', '硬件评价']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['前七月', '前六月', '前五月', '前四月', '前三月', '前二月', '前一月']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '制度建设',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [1, 1, 1, 3, 9, 0, 2]
        },
        {
            name: '服务能力',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [2, 1, 1, 4, 0, 3, 3]
        },
        {
            name: '服务实施',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [1, 1, 1, 3, 9, 0, 2]
        },
        {
            name: '投诉管理',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [1, 1, 1, 3, 9, 0, 2]
        },
        {
            name: '硬件评价',
            type: 'line',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            areaStyle: {},
            data: [1, 1, 1, 3, 9, 0, 2]
        }
    ]
};

在这里插入图片描述

*Major*
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts-多柱子柱状图
牛栏山矿泉水
06-06 1456
1、问题背景 利用ECharts制作一个多柱子柱状图，其中数据源模拟动态获取 2、实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-多柱子柱状图</title> <link rel="
多组柱状图_【R】ggplot2绘制多组柱状图
weixin_34734156的博客
01-08 8677
有时候我们需要对多组的不同情况得到的数据进行展示如下图：代码如下：# 安装并加载相关软件包#install.packages("reshape2")#install.packages("ggplot2")#install.packages("tidyr")library("reshape2")library("tidyr")library(ggplot2)# 选择要绘图的csv文件fil...
python中用matplotlib画多个并列的柱状图（展示3种图）
热门推荐
weixin_44293949的博客
03-09 3万+
首先如果柱状图中有中文，比如X轴和Y轴标签需要写中文，解决中文无法识别和乱码的情况，加下面这行代码就可以解决了： **plt.rcParams['font.sans-serif'] = ['SimHei'] # 解决中文乱码** 下面展示画三个并列的柱状图： import matplotlib import matplotlib.pyplot as plt import numpy as np labels = ['G1', 'G2', 'G3', 'G4', 'G5'] men_means =
使用Echarts实现动态柱状图
huhuhuja
10-30 6502
效果图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">
多个分类 柱状图.rar
10-22
多个分类 柱状图，图表实现轴分两类，多类展示，用echar无解，可用hightechart,真抱歉，隔这么久分享，希望你们用得到
matplotlib:1、同位置多柱状图 2、堆叠柱状图绘制 3、水平柱状图 4、水平同位置多柱状图
weixin_65544554的博客
10-16 3105
同一x轴位置绘制多个柱状图，主要通过调整柱状图的宽度和每个柱状图x轴的起始位置。底部x标签的位置未居中。
多色PPT柱状图
07-16
<br> <br> 这是六张多色PPT柱状图，5张扁平化，1张立体柱状图，.PPTX格式；
多色柱状图PPT模板
03-20
这是六张多色PPT柱状图，5张扁平化，1张立体柱状图，.PPTX格式；
Echarts多柱状图练习demo
06-14
Echarts多柱状图 （柱子类型分类） 本地数据练习demo
echarts柱状图
11-11
里面包含了echarts的柱状图和饼状图的一些动态获取数据的demo属于一个简洁明了的小demo方便参考，如果需要其他的功能，介意自己努力练习
多系列柱状图php动态
12-10
柱状图之多系列 php实现的多系列柱状图 mysql数据库的动态展示 php图形框架兼容性良好
中多个柱子的柱状图_Excel图表怎么制作柱状图？大神手把手教你
weixin_29153859的博客
01-11 1万+
不论是在我们的工作还是学习中，Excel图表我们都经常会用到。一般的图表制作方法大家应该都知道，那么大家知道Excel图表怎么制作柱状图吗？下面小编为大家介绍制作柱状图的具体方法。感兴趣的小伙伴可以学习一下。一、插入柱状图选中Excel中的数据，然后在“插入”界面中点击“图表”栏的“查看所有图表”按钮。在“所有图表”中点击“柱状图”，然后选择一个柱状图点击“确定”就可以了。二、设置图表标题格式编辑...
echarts - 多柱子柱状图
记得笑的博客
12-17 3552
效果图： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;echarts-多柱子柱状图&lt;/title&gt; &lt;style&gt; body, html { width:
笔记：Echarts - 多柱子柱状图
qq_39108466的博客
11-03 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-多柱子柱状图</title> <link rel="stylesheet" href="css/chart.common.css"> <style> body, html { width: 10
多条柱状图图
weixin_34223655的博客
12-13 226
Activity:package com.example.barchar;import java.util.ArrayList;import java.util.List;import android.os.Bundle;import android.app.Activity;import android.graphics.Color;import android.util....
ECharts双柱图
woderuiggya的博客
12-22 635
<div id="myChart" :style="{ width: '500px', height: '400px' }"></div> js里面 drawManyBar(container, titleName, legendData, xData, seriesDatas) { var ticket = this.$echarts.init(document.getElementById("myChart")); var ticketOption = { .
多次多个对比对象的柱状图
Gunther的博客
11-10 4032
p1=[1,1,1]; p2=[2,2,2]; p3=[3,3,3]; y=[p1',p2',p3']; c=bar(y); color=[1,0,0;0,1,0;0.9,0.9,0.2]; for i=1:3 set(c(i),'FaceColor',color(i,:)); end pos=get(gcf,'Position'); scale=1.2...
echarts 多个柱状图
山外小楼
05-10 5501
loopEcharts(time,data,data2,data3){ let Ehcarts=echarts.init(document.getElementById("loopEchart")) let option={ backgroundColor:'', color:["#FF2160","#E8E637","#30B1FB"], tooltip: { trigger: 'axis', ...
matplotlib 画并排柱状图（多列柱状图）
pp2373886592的博客
05-04 4378
matplotlib没有画多列柱状图的代码，也没有人写函数，于是自己写了一个 使用时，将x_labels替换为横坐标的刻度，y为嵌套多个小列表的大列表，y中每个列表代表一个系列柱状图 其中gap必须为整数 其余参数含义可见代码函数注释 import matplotlib.pyplot as plt def ParallelBar(x_labels, y, labels=None, colors=None, width = 0.35, gap=2): ''' 绘制并排柱状图 :par
echarts 多层柱状图
最新发布
09-15
ECharts可以通过设置多个柱状图系列来实现多层柱状图。每个系列可以代表一个层级，通过设置不同的x轴和y轴数据来实现。 首先，你需要创建一个基本的柱状图模板，然后根据你的需求设置多个柱状图系列。以下是一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值