echarts自定义多根柱子在一起柱状图/条形图

最新推荐文章于 2025-01-14 20:21:54 发布

Bonjours

最新推荐文章于 2025-01-14 20:21:54 发布

阅读量6.5k

点赞数

分类专栏：前端文章标签： echart多柱状图图例标记改变条形图

本文链接：https://blog.youkuaiyun.com/Bonjours/article/details/103677782

版权

本文介绍如何使用ECharts创建包含多个系列的柱状图，详细解析代码配置，包括图例、数据系列、渐变色填充等高级特性，适用于展示金融产品新增情况等复杂数据。

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

先看效果：

与单一柱状图相比，多柱子的多定义了几个series的值，legend值。注意的是：

这东西叫图例标记。是legend下面的参数。

看代码：

<div id="part5" style="width: 100%;height:240px;"></div>

<script src="js/jquery.min.js"></script>
<script src="echarts/dist/echarts.min.js"></script>

<script type="text/javascript">
//第5部分
    var dom5 = document.getElementById("part5");
    var myChart5 = echarts.init(dom5);
    var app5 = {};
    option5 = null;
    app5.title = '金融产品新增情况';

    option5 = {
        t