【Echarts】堆叠条形图的实现！！！快来看看！

程序员文章站 2022-06-01 18:34:41

...

堆叠条形图的实现

先看效果

文件目录

【Echarts】堆叠条形图的实现！！！快来看看！

引入Echarts

通过标签方式直接引入构建好的 echarts 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="../incubator-echarts-5.0.0-alpha.2/dist/echarts.min.js"></script>
</head>
</html>

绘制图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器

<body style="background: black;">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div id="main" style="width: 835px; height: 670px"></div>
</body>

然后就可以通过echarts.init方法初始化一个 echarts 实例并通过setOption方法生成一个堆叠条形图

  <script type="text/javascript">
    // 基于准备好的dom, 初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option)
  </script>

代码步骤拆分

数据源

// 总数
const total = 100
// 数据集
const dataList = [
  {name: '0', value: 50},
  {name: '10-1000', value: 96},
  {name: '1000-10000', value: 30},
  {name: '10000-50000', value: 67},
  {name: '50000-100000', value: 11},
  {name: '100000以上', value: 91}
]

const yKeys = dataList.map((item) => item.name) // y轴刻度标签值
const values = dataList.map((item) => item.value) // y轴每个数据项的值

title

title: {
  text: '我的资产',
  show: true,
  textStyle: {
    color: '#888',
    fontSize: "36",
    fontFamily: "Microsoft YaHei",
    fontWeight: 400
  },
  top: "42",
  left: "40"
}

【Echarts】堆叠条形图的实现！！！快来看看！

legend （不展示）

legend: { // 图例组件展现了不同系列的标记(symbol)，颜色和名字 
  show: false 
}

grid

grid: {   
  left: 190, //grid 组件离容器左侧的距离
  top: 156,
  right: 70,
  bottom: 55
}

【Echarts】堆叠条形图的实现！！！快来看看！

xAxis（直角坐标系 grid 中的 x 轴）

xAxis: {
  max: total, // 坐标轴刻度最大值
  splitLine: { // 坐标轴在grid区域中的分隔线
    show: false
  },
  axisLine: { // 坐标轴轴线相关设置
    show: false
  },
  axisLabel: { // 坐标轴刻度标签的相关设置
    show: false
  },
  axisTick: { // 坐标轴刻度相关设置
    show: false
  }
}

看上图

yAxis（直角坐标系 grid 中的 y 轴）

yAxis: {
  inverse: false, // 是否是反向坐标轴
  data: yKeys, // (数组) 类目数据，在类目轴（type: 'category'）中有效
  axisLine: { // 坐标轴轴线相关设置
    show: false
  },
  axisTick: { // 坐标轴刻度相关设置
    show: false
  },
  axisLabel: { // 坐标轴刻度标签的相关设置
    show: false
  },
  splitLine: { // 坐标轴在grid区域中的分隔线
    show: false
  },
  offset: 13 // Y 轴相对于默认位置的偏移，在相同的 position 上有多个 Y 轴的时候有用
}

部分属性：
【Echarts】堆叠条形图的实现！！！快来看看！

series（系列列表。每个系列通过 type 决定自己的图表类型）

对象一：内部柱子

{ 
  // 内部柱子
  type: 'bar', // 柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型
  barWidth: 25,
  // 不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）
  barGap: '-100%', // 如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%',这在用柱子做背景的时候有用
  legendHoverLink: false, // 是否启用图例 hover 时的联动高亮
  silent: true, // 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
  itemStyle: { // 图形样式
    normal: {
      color: (params) => {
        let colors = [
          '#590DB9',
          '#4520E5',
          '#2610C3',
          '#2B4EFF',
          '#007CDB',
          '#2BD5FF'
        ]
        return colors[params.dataIndex]
      }
    }
  },
  label: { // 图形上的文本标签
    normal: {
      show: true,
      position: 'left',
      formatter: '{b}', // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
      textStyle: {
        fontSize: 24,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 400,
        textAlign: 'right',
        color: '#c2cbf2'
      }
    }
  },
  data: values,
  z:1, // 柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
  animationEasing: 'elasticOut' // 初始动画的缓动效果
}

【Echarts】堆叠条形图的实现！！！快来看看！

对象二：内部切割柱子

{
  // 切割线--切割柱子
  type: 'pictorialBar', // 象形柱图是可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图。往往用在信息图中。用于有至少一个类目轴或时间轴的直角坐标系上
  itemStyle: { // 图形样式
    normal: {
      color: '#061348'
    }
  },
  symbolRepeat: 'fixed', //使图形元素重复，即每个数据值用一组重复的图形元素表示。重复的次数依据 symbolBoundingData 计算得到，即与 data 无关。这在此图形被用于做背景时有用
  symbolMargin: 16, // 图形的两边间隔（『两边』是指其数值轴方向的两边）。可以是绝对数值（如 20），或者百分比值（如 '-30%'），表示相对于自身尺寸 symbolSize 的百分比。只有当 symbolRepeat 被使用时有意义
  symbol: 'rect', // 图形类型 ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
  symbolClip: true, // 是否剪裁图形 true: 图形被剪裁后剩余的部分表示数值大小
  symbolSize: [1,25], // 图形的大小 可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
  symbolPosition: 'start', // 图形的定位位置 'start'：图形边缘与柱子开始的地方内切
  symbolOffset: [1,-1], // 图形相对于原本位置的偏移
  symbolBoundingData: total, // 这个属性是『指定图形界限的值』。它指定了一个 data，这个 data 映射在坐标系上的位置，是图形绘制的界限。也就是说，如果设置了 symbolBoundingData，图形的尺寸则由 symbolBoundingData 决定
  data: values, // 系列中的数据内容数组。数组项通常为具体的数据项
  z: 2,
  animationEasing: 'elasticOut'
 }

【Echarts】堆叠条形图的实现！！！快来看看！

对象三：外部柱子

{ 
  // 外部柱子
  name: '外框',
  type: 'bar',
  barGap: '-100%',
  data: [
    total,
    total,
    total,
    total,
    total,
    total
  ],
  barWidth: 25,
  itemStyle: {
    normal: {
      color: '#171D3E', // 填充色
      label: {
        // 标签显示位置
        show: false
      }
    }
  },
  z: 0
}

【Echarts】堆叠条形图的实现！！！快来看看！

对象四：百分比标签

{
  name: '百分比',
  type: 'bar',
  barGap: '-100%',
  data: values,
  barWidth: 25,
  itemStyle: {
    color: 'transparent'
  },
  label: {
    color: 'transparent',
    normal: {
      show: true,
      position: 'right',
      formatter: '{c}%', // 标签内容格式器 {c} 数值数组
      textStyle: {
        fontSize: 24,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 400,
        textAlign: 'right',
        color: '#fff'
      }
    }
  },
  z: 1
}