首页 > 其他分享 >柱状图

柱状图

时间:2024-06-21 22:42:31浏览次数:20  
标签:const name color 柱状图 fontSize 9AA6B8 type

function (data, params) {
  const myChart = this.myChart;
  const twoYearData = [17, 45, 4, 34, 23, 54]
  const threeYearData = [11, 35, 9, 24, 12, 50]

  const twoYearBarColor = {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      { offset: 0, color: '#00F8FF' }, // %0 处的颜色
      { offset: 1, color: '#17B9BE' }, // %100 处的颜色
    ],
    global: false, // 缺省为 false
  }
  const threeYearBarColor = {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      { offset: 0, color: '#BAFA54' }, // %0 处的颜色
      { offset: 1, color: '#4EDE74' }, // 100% 处的颜色
    ],
    global: false, // 缺省为 false
  }
  // 配置图表选项
  const option = {
    title: {
      text: ''
    },
    tooltip: {},
    legend: {
      textStyle: {
        color: '#E4F0FF',
        fontSize: 14
      }
    },
    xAxis: {
      name: '年',
      nameTextStyle: {
        color: '#9AA6B8',
        fontSize: 16
      },
      type: 'category',
      data: [2020, 2021, 2022, 2023, 2024, 2025],
      axisLine: {
        lineStyle: { // 轴线样式
          type: 'solid',
          color: '#333'
        },
      },
      axisLabel: {
        show: true,
        fontSize: 16,
        textStyle: {
          color: '#9AA6B8',
        }
      },
    },
    yAxis: {
      name: '单位: 人',
      nameTextStyle: {
        color: '#9AA6B8',
        fontSize: 16
      },
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed', // 设置刻度线为虚线个数
        }
      },
      axisLabel: {
        show: true,
        fontSize: 16,
        textStyle: {
          color: '#9AA6B8',
        }
      }
    },
    series: [
      {
        name: '两年制',
        type: 'bar',
        data: twoYearData,
        barWidth: 20,
        itemStyle: {
          color: twoYearBarColor
        }
      },
      {
        name: '三年制',
        type: 'bar',
        data: threeYearData,
        barWidth: 20,
        itemStyle: {
          color: threeYearBarColor
        }
      },
    ]
  }
  return option;
}

 

标签:const,name,color,柱状图,fontSize,9AA6B8,type
From: https://www.cnblogs.com/ladybug7/p/18261628

相关文章

  • Ecahrts竖向柱状图实现自动滚动
     效果如下:1.首先声明一个timer定时器标识lettimer:NodeJS.Timer;//定时器2.再声明窗口展示的数量,yAxisIndex2用来记录当前index已经加了多少,方便再formatter中格式化标题的相关信息constdataZoomEndValue=6;//数据窗口范围的结束数值(一次性展示几个)letyAxis......
  • R:microtable包计算相对丰度堆叠柱状图
    rm(list=ls())setwd("C:\\Users\\Administrator\\Desktop\\New_microtable")#设置工作目录library(microeco)library(magrittr)library(dplyr)library(tibble)feature_table<-read.table('Bac_genus.txt',header=TRUE,row.names=1......
  • 代码随想录算法训练营Day60 | 84.柱状图中最大的矩形 | Python | 个人记录向
    注:今天是代码随想录训练营的最后一天啦!!!本文目录84.柱状图中最大的矩形做题看文章以往忽略的知识点小结个人体会84.柱状图中最大的矩形代码随想录:84.柱状图中最大的矩形Leetcode:84.柱状图中最大的矩形做题无思路。看文章与42.接雨水很像,42.接雨水是找每个......
  • 60天【代码随想录算法训练营34期】第十章 单调栈part03 (84.柱状图中最大的矩形)
    84.柱状图中最大的矩形classSolution:deflargestRectangleArea(self,heights:List[int])->int:s=[0]result=0heights.insert(0,0)heights.append(0)foriinrange(1,len(height......
  • 折线图加柱状图
    在data函数中定义数据myopiaList或从后端接口中拿到数据是个可以实时更新改变的echarts视图myopiaList:[24,50,70];initLineChart(){constmyopiaData=Array.isArray(this.lineChartConfig.series)?this.lineChartConfig.series:[];......
  • amCharts绘制折线图和柱状图混合
    代码案例<!DOCTYPEhtml><html><head><scriptsrc="https://cdn.amcharts.com/lib/5/index.js"></script><scriptsrc="https://cdn.amcharts.com/lib/5/xy.js"></script><scriptsrc=&qu......
  • 封装通用 ECharts 图表组件(四):分格柱状图实现
    在数据可视化的世界中,ECharts以其强大的功能和灵活性,成为了开发者们的首选图表库之一。继我们之前探讨的环形图封装之后,本文将带领大家进入另一个实用且美观的图表类型——分格柱状图的封装实现。分格柱状图简介分格柱状图是一种特殊的柱状图,它通过将每个柱子分割成多个小格......
  • 统计不同文件夹中的文件数量,并绘制相应的柱状图。
    一、数据类型每个文件夹下都是这种文件,虽然可以通过手动数出来了解文件数量,但为了更直观地看到每个文件夹的文件数量,可以使用图表来表示,这样会更加清晰。效果展示:  二、代码实现 importosimportmatplotlib.pyplotaspltfolder_names=['0','1','2','3']......
  • echarts-柱状图翻转 适合排名展示 越小越大,越大越小
    先上效果(折线图也可,看代码中标注*的位置):代码:dataList=[1,2,9,8,10,14,3];//初始数值*dataList1=[];//翻转后的数值*vardd=2;//系数用来防止计算后为0不显示*maxValue=dataList[0];//*maxValue=Math.max(...dataList);//取最大值*[dataList1]......
  • 力扣-84. 柱状图中最大的矩形
    1.题目介绍题目地址(84.柱状图中最大的矩形-力扣(LeetCode))https://leetcode.cn/problems/largest-rectangle-in-histogram/题目描述给定n个非负整数,用来表示柱状图中各个柱子的高度。每个柱子彼此相邻,且宽度为1。求在该柱状图中,能够勾勒出来的矩形的最大面积。 示......