欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

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

堆叠条形图的实现

先看效果

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

文件目录

【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】堆叠条形图 的实现!!!快来看看!
【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
}

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