echarts实现柱状图纹理填充及背景纹理填充效果

麦兜_冰夕

已于 2023-02-21 16:37:37 修改

阅读量3k

点赞数

分类专栏： echart 数据可视化文章标签： echarts 前端 javascript echart柱状图渐变纹理填充

于 2023-02-21 16:21:24 首次发布

本文链接：https://blog.csdn.net/lyn1772671980/article/details/129144592

版权

本文介绍了如何利用echarts 4.3.0版本实现柱状图的纹理填充和背景渐变效果。通过多层柱状图的叠加，结合渐变和纹理填充技术，创建出独特的视觉体验。具体实现中，采用渐变柱状图与象形柱状图的叠加来形成亮色窄柱，并利用象形柱状图确保背景柱状图的高度一致和宽度扩大，以达到纹理填充的效果。

摘要由CSDN通过智能技术生成

要实现以上效果，有三点需要注意：

柱状图纹理填充
柱状图纹理背景渐变
柱状图背景

【实现思路】：多层柱状图叠加实现如上效果；

渐变+纹理填充柱状图：由渐变柱状图+象形柱状图叠加实现亮色窄的
柱状图背景纹理填充：由象形柱状图实现，每个柱子的数据取所有数据的最大值，使得背景柱状图高度一致，宽度比亮色柱状图宽

废话不多说，直接上代码:

<template>
  <div class="content">
    <div id="barChart"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  name: 'stateOfEnterprises',
  data() {
    return {
      list: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.$nextTick(() => {
        this.createEcharts()
      })
    },
    // 创建柱状图
    createEcharts() {
      const option = {
        gri