100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > echarts实现柱状图纹理填充及背景纹理填充效果

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

时间:2020-06-29 14:26:21

相关推荐

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

要实现以上效果,有三点需要注意:

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

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

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

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。