[Echarts] The realization of stacked bar chart! ! ! Come take a look!

Implementation of stacked bar graph

Look at the effect first

Insert picture description here

File Directory

Insert picture description here

Introduce Echarts

Directly import the built echarts file through tags

<!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>

Draw a chart

Before drawing, we need to prepare a DOM container with height and width for ECharts

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

Then you can initialize an echarts instance through the echarts.init method and generate a stacked bar chart through the setOption method

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

Code step split

data source
// 总数
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"
}

Insert picture description here

legend (not shown)
legend: {
    
     // 图例组件展现了不同系列的标记(symbol),颜色和名字 
  show: false 
}
grid
grid: {
    
       
  left: 190, //grid 组件离容器左侧的距离
  top: 156,
  right: 70,
  bottom: 55
}

Insert picture description here

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

Look at the picture above

yAxis (the y axis in the rectangular coordinate system grid)
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 轴的时候有用
}

Some attributes:
Insert picture description here
Insert picture description here

series (series list. Each series determines its own chart type by type)
Object 1: Internal pillar
{
    
     
  // 内部柱子
  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' // 初始动画的缓动效果
}

Insert picture description here

Object 2: Internal cutting column
{
    
    
  // 切割线--切割柱子
  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'
 }

Insert picture description here

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

Insert picture description here

Object 4: Percentage label
{
    
    
  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
}

Insert picture description here
Insert picture description here
Insert picture description here
Insert picture description here

Guess you like

Origin blog.csdn.net/weixin_43352901/article/details/108474293