ECharts——初步使用 Bar渐变色设置

最新推荐文章于 2025-10-28 16:08:29 发布

原创最新推荐文章于 2025-10-28 16:08:29 发布 · 6.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

前端开发专栏收录该内容

9 篇文章

订阅专栏

本文介绍了ECharts的基本概念，并通过一个简单的柱状图Bar实例展示了如何使用ECharts。通过分析代码和理解option、xAxis、yAxis及series等关键参数，实现了同一数据的两组表现，特别强调了在鼠标悬浮时柱状图的渐变色变化效果。

1.了解ECharts

ECharts简介：http://echarts.baidu.com/echarts2/doc/about.html
ECharts主页：http://echarts.baidu.com/index.html
ECharts文档：http://www.echartsjs.com/option.html#title
ECharts实例：http://echarts.baidu.com/examples/#chart-type-line

2.尝试ECharts

>实际做一个柱状图Bar

1.先找一个最简单的实例：http://echarts.baidu.com/examples/editor.html?c=bar-simple 实例中给出的JavaScript代码：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

解析一下：

option：可以理解为外层容器，关于图像组件的参数等等都在里面申明定义。在后面会有一个myChart.setOption(option);这样的语句将其放到选定的容器中。（没错，这句话给出的代码里面并没有）

xAxis：文档解释>>直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。可以理解为设置X轴的对象，里面有很多相关的方法。

yAxis：文档解释>>直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。

series：系列列表。每个系列通过 type 决定自己的图表类型。这个参数可以说是图标多样化的重中之重，里面可以放N多的数据，以组成一张图表。如果你要在一张表里面展示两组数据，那么series的表现就是：[{},{}]，三组就是：[{},{},{}]。所以。。。

其他的二级的参数自己看文档就好了。

2.让这个实例在自己的电脑上展示：

下载实例>>分析JavaScript代码>>展示

代码如下：

<!DOCTYPE html>
<html style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
  <script type="text/javascript">
    /*基础版本*/
    var dom = document.getElementById("container"); //获取容器节点
    var myChart = echarts.init(dom); //将获取到的节点放进ECharts中的全局变量myChart中
    var app = {};
    option = null;
    /*-----------------示例给出的代码-----------------*/
    option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }]
    };
     /*-----------------示例给出的代码-----------------*/
    //将option放到全局变量myChart中
    if (option && typeof option === "object") {
      myChart.setOption(option, true);
    }
  </script>
</body>

</html>

明显的，在实例给出的代码上下都有额外的代码，用处已经配置。然后再看看文档，看下其他的实例就可以做出比较简单的图表了。

3.做一个同一种数据的，两组表现的图标：【效果图】当鼠标悬浮时渐变色会的顺序会发生改变：

全部代码：（发出来只是用作参考）

<!DOCTYPE html>
<html style="height:100%;width:100%;">

<head>
  <meta charset="utf-8">
  <title>BarTest</title>
  <!--导入echarts文件  -->
  <script src="../js/echarts.js"></script>
</head>

<body style="margin:0px;height:100%;width:100%;">
  <!--为echarts创建一个容器  -->
  <div id="main" style="width:100%;height:100%"></div>
  <!--编写echarts图标代码  -->
  <script type="text/javascript" charset="utf-8">
    var myChart = echarts.init(document.getElementById("main")); //选定容器
    var app = {};
    option = {
      title: {
        text: '月度消费一览',
      },
      xAxis: {
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '柱形图',
        type: 'bar',
        data: [200, 450, 120, 280, 370, 180, 120, 210, 300, 390],
        barWidth: '20%',//柱子显示的宽度
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,//渐变色在下面修改，这里是透明度
              [{
                  offset: 0,
                  color: '#f1ff50'
                },
                {
                  offset: 0.5,
                  color: '#d0e205'
                },
                {
                  offset: 1,
                  color: '#f8ffa7'
                }
              ]
            )
          },
          emphasis: {//悬浮的渐变色在这里
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [{
                  offset: 0,
                  color: '#d0e205'
                },
                {
                  offset: 0.7,
                  color: '#f8ffa7'
                },
                {
                  offset: 1,
                  color: '#f1ff50'
                }
              ]
            )
          }
        },
        /*显示柱子数据*/
        label: {
          normal: {
            show: true,
            //数据在柱子头部加载
            position: 'top',
            textStyle: {
              color: '#FF5F5F',
              fontSize: 14,
            }
          }
        },
      }, {
        data: [200, 450, 120, 280, 370, 180, 120, 210, 300, 390],
        type: 'line',
        itemStyle: {
          color: '#FFC568',
          borderColor: '#FFFFFF',
          borderWidth: 5,
          symbol: 'circle',
          showSymbol: true,
        },
      }]
    };

    if (option && typeof option === "object") {
      myChart.setOption(option, true);
    }
  </script>
</body>

</html>

因为是百度出的，所以文档阅读起来不会很难。总之，简单粗暴。

以上，基本就可以做一些简单的图标了。