博客

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

1. 柱状图纹理填充
2. 柱状图纹理背景渐变
3. 柱状图背景

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

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

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

<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 = {
        grid: {