echarts象形图pictorialBar

只会开发

已于 2022-06-02 16:49:51 修改

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：象形柱图文章标签： echarts

于 2021-08-05 13:23:22 首次发布

本文链接：https://blog.csdn.net/weixin_42274795/article/details/119415765

象形柱图专栏收录该内容

1 篇文章

订阅专栏

本文详细解读了ECharts中象形柱图的使用方法，包括利用图片和形状表示数据的技巧，以及代码实例和实际效果展示。通过实例演示如何通过图形尺寸、数量和颜色变化展现数据特征。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

象形柱图的官方解释

象形柱图在 ECharts 系列中使用series[i]-pictorialBar表示，它利用图片和形状表现数据，具体来说它既可以用图形的长宽变形表现数据，也可以用图形的个数、甚至是图形的颜色、透明度变化表现数据。
在这里插入图片描述

代码实现

var category = ['服务器数（台）', '计算容量（核）', '内存容量（GB）', '存储容量（PB）'];
var barData = [0, ~~(Math.random() * 100), ~~(Math.random() * 100), ~~(Math.random() * 100), ~~(Math.random() * 100)];
var barData = [60, 30, 52, 34, 90];
var lineData = [63, 63, 63, 63, 100]

// console.log(barData)
var option = {
    // backgroundColor: '#0d073d',//背景色
    grid: [{//图形的位置
        left: '10',
        bottom: '20',
        top: 3,
        right: 30
    }],
    xAxis: {
        show: false//是否展示X轴
    },
    yAxis: {
        data: category,
        show: true,
        axisLabel: {
            inside: true,
            verticalAlign: 'middle',
            lineHeight: 150,
            color: '#4488bc',
            fontSize: 8
        },
        axisLine: {
            show: false//不展示刻度
        }
    },
    series: [{ // 外边框
            name: '',
            type: 'pictorialBar',//echarts图的类型
            symbol: 'reat',//内部类型（方块，圆，svg，base64图片）
            barWidth: '3%',
            barMaxWidth: '10%',
            symbolOffset: [70, 0],//柱子的位置
            symbolSize: [130, 20],//size,单个symbol的大小
            itemStyle: {
                normal: {
                    color: '#3f559c'
                }
            },
            z: -180,//图层值
            symbolRepeat: null,//是否重复symbol
            data: [1, 1, 1, 1],
            barGap: 50,//柱子的“粗细”
            barCategoryGap: 0,
            animationEasing: 'elasticOut',

        },
        { // 内边框
            name: '',
            type: 'pictorialBar',
            symbol: 'reat',
            barWidth: '3%',
            barMaxWidth: '20%',
            symbolOffset: [72, 0],
            symbolSize: [125, 18],
            itemStyle: {
                normal: {

                    color: '#0d073d'
                }
            },
            z: -20,
            symbolRepeat: null,
            data: [1, 1, 1, 1],
            barGap: 45,
            barCategoryGap: 0,
            animationEasing: 'elasticOut',

        },

        { // 下层块
            name: '',
            type: 'pictorialBar',
            symbol: 'roundRect',
            barWidth: '3%',
            barMaxWidth: '20%',
            symbolOffset: [75, 0],
            itemStyle: {
                normal: {

                    color: '#1F4683'
                }
            },
            z: -11,
            symbolRepeat: true,
            symbolSize: [6, 16],
            data: lineData,
            barGap: 50,
            barCategoryGap: 0,
            animationEasing: 'elasticOut',

        },

        { // 上层块
            name: '', // blue bar
            type: 'pictorialBar',
            symbol: 'roundRect',
            barWidth: '3%',
            barMaxWidth: 100,
            symbolOffset: [75, 0],
            itemStyle: {
                normal: {
                    barMaxWidth: '20%',
                    barBorderRadius: 100,
                    color: '#6DE8FA',

                }
            },
            symbolRepeat: true,
            symbolSize: [6, 16],
            // symbolClip: true,
            data: barData,
        },
        /* 
         */

    ],

}

实现的效果：
在这里插入图片描述