要实现以上效果,有三点需要注意:
- 柱状图纹理填充
- 柱状图纹理背景渐变
- 柱状图背景
【实现思路】:多层柱状图叠加实现如上效果;
- 渐变+纹理填充柱状图 :由渐变柱状图+象形柱状图叠加实现亮色窄的
- 柱状图背景纹理填充:由象形柱状图实现,每个柱子的数据取所有数据的最大值,使得背景柱状图高度一致,宽度比亮色柱状图宽
废话不多说,直接上代码:
<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