要实现以上效果,有三点需要注意:
柱状图纹理填充柱状图纹理背景渐变柱状图背景
【实现思路】:多层柱状图叠加实现如上效果;
渐变+纹理填充柱状图 :由渐变柱状图+象形柱状图叠加实现亮色窄的柱状图背景纹理填充:由象形柱状图实现,每个柱子的数据取所有数据的最大值,使得背景柱状图高度一致,宽度比亮色柱状图宽
废话不多说,直接上代码:
<template><div><div></div></div></template><script>import echarts from echartsexport default {name: stateOfEnterprises,data() {return {list: []}},created() {this.init()},methods: {init() {this.$nextTick(() => {this.createEcharts()})},// 创建柱状图createEcharts() {const option = {grid: {