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

最新推荐文章于 2025-06-24 16:51:29 发布

梦若辰宇

最新推荐文章于 2025-06-24 16:51:29 发布

阅读量6.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： echarts

本文链接：https://blog.youkuaiyun.com/Jason_A/article/details/84565761

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

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

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 轴需要通过配置