echarts柱状图使用自定义图片填充柱体

这是我的柱状图图片纹理的实现过程的流水账式记录

方法一:

在option.series里面,给每一项配置上图片路径

javascript 复制代码
let Image2 = new Image()
Image2.src = 'src/assets/image/BarChart-line.png'

color: {
    image: Image,
    repeat: 'repeat'
}

出来的效果比较适合整体纹样、颜色没差的图片 ,这样看不出断裂情况,如果图片跟柱体不匹配,容易出现断裂情况,我感觉这个有点像,左上为原点坐标,向下向右平铺图片作为底图,只有柱状图的区域部分会露出下面的图一样。

再找找别的方法

方法二:

后面找到了这个,这个有点像我想要的,用一张图铺满整个bar,当然要是想要重复也可以,大概写了一下,效果如下:

这个好像比上面的更适合我的需求,我自己的代码如下:

javascript 复制代码
<template>
    <div>
        <div ref="customPatternBarChart" style="width: 100%; height: 400px;"></div>
    </div>
</template>
 
<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue'

    const customPatternBarChart = ref(null);
onMounted(() => {
    
        var myChart = echarts.init(customPatternBarChart.value);
        var option;

        option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            borderWidth: 0, // 提示框边框宽度
            textStyle: {
                color: '#fff', // 提示框文字颜色
            }
        },
        legend: {
            data: ['图例1', '图例2'], // 图例的名称,与 series 的 name 对应
            textStyle: {
                color: '#333', // 图例文字颜色
            },
            itemWidth: 20, // 图例图形宽度
            itemHeight: 14, // 图例图形高度
            orient: 'horizontal', // 图例的排列方向,'vertical' 为竖向,'horizontal' 为横向
            top: 'top', // 图例的位置
            left: 'center' // 图例的位置
        },
        series: [
            {
                name: '图例1',
                type: 'pictorialBar',
                symbol: 'image://src/assets/image/BarChart-line2.png',
                data: [10, 21, 54, 34, 23, 41, 15],
                symbolSize: [15, '100%']
            },
            {
                name: '图例2',
                type: 'pictorialBar',
                data: [9, 15, 52, 30, 21, 31, 10],
                symbol: 'image://src/assets/image/BarChart-line1.png',
                symbolSize: [20, '100%'],
                symbolOffset: [20, 0]
            }
        ]
        };

        option && myChart.setOption(option);

});
</script>
 
<style scoped>
div {
    color: aqua;
}
</style>

我是看到有人用循环写出来了一个

也记录一下这篇文章,我是先参考这篇文章才知道要去找'pictorialBar'的

echart自定义图片填充柱状图_echarts柱状图图片填充-CSDN博客

如果后续还需要什么字段,这里缺少的话,可以去echarts看官方文档吧

相关推荐
xjt_09011 分钟前
浅析Web存储系统
前端
foxhuli22939 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear1 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘1 小时前
vue文本插值
javascript·vue.js·ecmascript