Echarts 快速上手柱状图

2021-11-24 15:03:14 阅读：170 来源： 互联网

标签：bar 快速柱条柱状图宽度 type series data Echarts

最简单的柱状图

柱状图的series typr 为 bar

option = {
    xAxis:{
        data:['a','b','c','d','e']
    },
    yAxis:{

    },
    series:{
        type: 'bar',
        data:[1,2,3,4,5]
    }
}

xAxis：类目型

yAxis：数值型

series：系列（指定数值）

多系列的柱状图

如果要实现多系列，我们可以把原先的字典类型修改为数组类型即可

option:{
    xAxis:{
         data:['a','b','c','d','e'],
    },
    yAxis:{
        
    },
    series:[
    	{
        	type:'bar',
        	data:[1,2,3,4,5]
    	},
        {
            type:'bar',
            data:[5,4,3,2,1]
        }
    ]
}

柱状图样式设置

柱条样式

柱条的样式可以通过 series.itemStyle 设置

一些常用：

柱条的颜色（color）；
柱条的描边颜色（borderColor）、宽度（borderWidth）、样式（borderType）；
柱条圆角的半径（barBorderRadius）；
柱条透明度（opacity）；
阴影（shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY）。

我们可以设置stack属性来实现柱形叠加效果

stack自定义，相当于字典中的key

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e"],
  },
  yAxis: {},
  series: [
    {
      type: "bar",
      data: [1, 2, 3, 4, 5],
      stack: "y",
    },
    {
      type: "bar",
      data: [1, 2, 3, 4, 5],
      stack: "y",
    },
  ],
};

柱条宽度和高度

柱条宽度可以通过 barWidth 设置。比如在下面的例子中，将 barWidth 设为 '20%'，表示每个柱条的宽度就是类目宽度的 20%。

由于这个例子中，每个系列有 5 个数据，20% 的类目宽度也就是整个 x 轴宽度的 4%。

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e"],
  },
  yAxis: {},
  series: [
    {
      type: "bar",
      data: [1, 2, 3, 4, 5],
      stack: "y",
      barWidth: "20%",
    }
  ],
};

另外，还可以设置 barMaxWidth 限制柱条的最大宽度。

对于一些特别小的数据，我们也可以为柱条指定最小高度 barMinHeight，当数据对应的柱条高度小于该值时，柱条高度将采用这个最小高度。

这里的数值参考对象均为整个图表的宽高

在同一坐标系上，此属性会被多个柱状图系列共享。

此属性应设置于此坐标系中最后一个柱状图系列上才会生效，并且是对此坐标系中所有柱状图系列生效。

柱条间距

柱条间距分为两种：

一种是不同系列在同一类目下的距离 barWidth

另一种是类目与类目的距离 barCategoryGap

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e"],
  },
  yAxis: {},
  series: [
    {
      type: "bar",
      data: [1, 2, 3, 4, 5],
      barGap: '20%',
      barCategoryGap: '40%',
    },
    {
      type: "bar",
      data: [1, 2, 3, 4, 5],
    }
  ],
};

在这个例子中，barGap 被设为 '20%'，这意味着每个类目（比如 A）下的两个柱子之间的距离，相对于柱条宽度的百分比。而 barCategoryGap 是 '40%'，意味着柱条每侧空余的距离，相对于柱条宽度的百分比。

通常而言，设置 barGap 及 barCategoryGap 后，就不需要设置 barWidth 了，这时候的宽度会自动调整。如果有需要的话，可以设置 barMaxWidth 作为柱条宽度的上限，当图表宽度很大的时候，柱条宽度也不会太宽。

柱条背景色

有时，我们希望能够为柱条添加背景色。从 ECharts 4.7.0 版本开始，这一功能可以简单地用 showBackground 开启，并且可以通过 backgroundStyle 配置。

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e"],
  },
  yAxis: {},
  series: [
    {
      type: "bar",
      data: [1, 2, 3, 4, 5],
      showBackground: true,
      backgroundColor: {
        color: "rgba(220,220,220,0.8)",
      },
    },
  ],
};

,
series: [
{
type: “bar”,
data: [1, 2, 3, 4, 5],
showBackground: true,
backgroundColor: {
color: “rgba(220,220,220,0.8)”,
},
},
],
};

标签：bar,快速,柱条,柱状图,宽度,type,series,data,Echarts
来源： https://blog.csdn.net/qq_41103843/article/details/121473784

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9