echarts自定义图形

原创已于 2023-08-07 09:21:13 修改 · 1.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts

收录于

于 2021-05-20 11:14:52 首次发布

前端专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个使用 ECharts 库实现的图形配置示例，重点展示了如何通过配置选项来展示不同样式的柱状图。包括图例、坐标轴、动画效果等设置，并提供了具体的代码实现。

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

上代码：

option = {
    legend: {
        data: ['pictorialBar', 'bar']
    },
    xAxis: {
        data: ['symbolRepeat: true', 'symbolRepeat: false']
    },
    yAxis: {
        splitLine: {show: false}
    },
    animationEasing: 'elasticOut',
    series: [{
        type: 'pictorialBar',
        symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
        data: [{
            value: 29000,
            symbolRepeat: true,
            symbolSize: [40, 6]
        }, {
            value: 29000,
            symbolSize: [50, '100%']
        }]
    }]
};