首页 > 其他分享 >echarts折线图 分段柱形图

echarts折线图 分段柱形图

时间:2023-09-28 10:00:28浏览次数:45  
标签:show color true 柱形图 params 折线图 fontSize data echarts

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {
    textStyle: {
      color: '#D0E6FF',
      fontSize: 30,
      padding: [0, 0, 0, 15]
    },
    top: 35,
    itemWidth: 30,
    itemHeight: 30,
    itemGap: 40
  },
  color: ['#3B98FE', '#00C891', '#FFA448', '#FF6977'],
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: 120,
    containLabel: true
  },
  backgroundColor: '#15187F',
  xAxis: {
    type: 'value',
    offset: 0,
    position: 'top',
    boundaryGap: ['10%', '10%'],

    axisLine: {
      show: true,
      lineStyle: {
        color: '#0068B7'
      }
    },
    axisTick: {
      show: true,
      lineStyle: {
        color: '#0068B7'
      }
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      color: '#8CCDFF',
      fontSize: 28
    }
  },
  yAxis: {
    boundaryGap: true,
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#fff',
      fontSize: 28,
      margin: 20
    },
    type: 'category',
    data: [
      '康复医院',
      '眼科医院',
      '妇产科医院',
      '呼吸内科',
      'F肿瘤医院',
      '消化内科',
      '儿童医院'
    ].reverse(0)
  },
  series: [
    {
      name: '一级',
      type: 'bar',
      stack: 'total',
      barWidth: 36,
      label: {
        show: true,
        color: '#FEFEFE',
        fontSize: 24,
        // lineHeight: 36,
        offset: [0, 2]
        // verticalAlign: 'middle'
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 301, 334, 390, 330, 320]
    },
    {
      name: '二级',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        color: '#FEFEFE',
        fontSize: 24,
        // verticalAlign: 'middle'
        formatter: function (params) {
          // console.log(params)
          if (params.data == 0) {
            return '';
          }
          return params.data;
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 0, 101, 134, 90, 230, 0]
    },
    {
      name: '三级',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        color: '#FEFEFE',
        fontSize: 24,
        // verticalAlign: 'middle'
        formatter: function (params) {
          if (params.data == 0) {
            return '';
          }
          return params.data.value || params.data;
        }
      },

      emphasis: {
        focus: 'series'
      },
      data: [
        220,
        80,
        191,
        234,
        { value: 290, itemStyle: { borderRadius: [0, 18, 18, 0] } },
        330,
        310
      ]
    },
    {
      name: '四级',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        color: '#FEFEFE',
        fontSize: 24,
        // verticalAlign: 'middle'
        formatter: function (params) {
          console.log(params);
          if (params.data == 0) {
            return '';
          }
          return params.data.value || params.data;
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [150, 212, 201, { value: 154 }, 0, 100, 410],
      itemStyle: {
        borderRadius: [0, 18, 18, 0],
        color: ''
      }
    }
  ]
};

 

标签:show,color,true,柱形图,params,折线图,fontSize,data,echarts
From: https://www.cnblogs.com/zeosky-zhe/p/16275831.html

相关文章

  • Springboot+Echarts(五)
    Mybatis-plus操作的多表查询和分页查询今天首先回顾了之前所学的基本的单表增删改查这里想再自己写一遍是为了方便自己以后的开发流程顺利首先创建Springboot项目,选择java8和Springboot2.x.x之后选择Web依赖然后添加依赖<dependency><groupId>com.baomidou<......
  • echarts 响应式自动适应宽度
    beforeMount(){window.addEventListener('resize',this.$_resizeHandler)},beforeDestroy(){window.removeEventListener('resize',this.$_resizeHandler)},  ......
  • 基于Java的大学生汉服租赁网站的设计与实现(亮点:在线支付、ECharts图表展示、完整下单
    大学生汉服租赁网站一、前言二、我的优势2.1自己的网站2.2自己的小程序(小蔡coding)2.3有保障的售后2.4福利三、开发环境与技术3.1MySQL数据库3.2Vue前端技术3.3SpringBoot框架3.4微信小程序四、功能设计4.1主要功能描述五、系统实现5.1前端实现5.1.1汉服租赁5.1.2汉服......
  • pytorch(3-0) 可视化训练误差折线图有
     缺点必须手动点击下关闭才能刷新最新的图,起码不会阻塞训练过程     ###画图训练损失训练精度测试精度importmatplotlib.pyplotaspltimportthreadingimporttimeimportmatplotlib.animationasanimationclassAnimator:def__init__(self......
  • echarts 150种图标path
    echarts150种图标pathleticonArray=['circle',//实心圆'rect',//矩形'roundRect',//圆角矩形'triangle',//三角形'diamond',//菱形'pin',//'arrow',//箭头'path......
  • 关于echarts图表x轴数据隔一个显示,如何让其全部显示
    问题描述能够获取到数据库的数据,但是x轴仅仅显示一半的数据,想要显示全部数据;问题解决将这里改成这样:表示间隔为0然后就能全部显示出来啦:......
  • 使用json+echarts实现数据库数据的可视化
    因为我上次是使用的另外一种方法实现的可视化,对json了解的不够,所以来补充一下这一块的知识点1、新建一个SpringBoot项目2、添加依赖<dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId></dependency><d......
  • Hive的使用以及如何利用echarts实现可视化在前端页面展示(四)---连接idea使用echarts
    说来惭愧,我的javaweb烂得一批,其他步骤我还是很顺利地,这个最简单的,我遇到了一系列问题。只能说,有时候失败也是一种成功吧这一步其实就是正常的jdbc,没什么可说明的,但是关于使用echarts我还是遇到了一些困难,如果有高手能指正一二,感激不尽echarts获取前端数据要使用Ajax,我不会这个语......
  • Hive的使用以及如何利用echarts实现可视化在前端页面展示(三)---hive数据利用sqoop导
    1、安装sqoop我的版本jdk1.8hadoop3.1.3sqoop1.4.6基本上就安装这个版本都没问题,如果是执行连接数据库命令时报错:java.lang.NoClassDefFoundError;报错,在lib下再放一个commons-lang-2.6.jar即可,sqoop安装:Indexof/dist/sqoop(apache.org)commons-lang-2.6.jar下载:commo......
  • Hive的使用以及如何利用echarts实现可视化在前端页面展示(二)---hive部分的实现
    1、利用远程连接器上传csv文件2、进入hive创建表结构:创建一个Hive表的SQL语句:这个表名为 "sales",包含了五个列:day_id、sale_nbr、buy_nbr、cnt 和 round。此表的数据格式为逗号分隔的文本文件,每一行都用逗号分隔字段。createtablesales(day_idstring,sale_nbrstring,b......