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

最新推荐文章于 2024-07-31 14:40:54 发布

原创

最新推荐文章于 2024-07-31 14:40:54 发布 · 6.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#echart多柱状图 #图例标记改变 #条形图

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

先看效果：

与单一柱状图相比，多柱子的多定义了几个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 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
        },
        textStyl