分步说明如何使用 echarts 和 SovitChart 创建渐变颜色直方图（echarts 直方图的不同颜色设置）。

总结：在开发应用程序时，美工人员经常会使用特殊的样式来设计一些图表，这增加了前端开发人员的开发量。 下图是作者在开发时要求的一个带有渐变效果的柱子。 今天的Chart就在这里讲解一下如何原生使用以及如何使用图表开发工具来实现。

在开发Web应用程序时，艺术家经常会以特殊的样式设计一些图形，但这对于。前端。 开发商。 开发量将会增加。 下图是作者在开发过程中要求的带有渐变效果的直方图。

今天，echarts 我们将向您展示如何在本机使用它以及如何使用 SovitChart 图表开发工具来实现这一目标。

示例源码下载地址：http://www.sovitjs.com/article_list.html?articleType =2

方法一：echarts原生API开发

第一步：echarts官方JS库用于网页或封装SovitChart 提供的 js 库。 这里使用SovitChart提供的封装的js库。

第 2 步：创建一个用于对齐图表的 div容器定义：这里div的ID命名为chart_bar_1

第三步：在js中调用echarts官方API实现柱状图。

上面三张图是echarts官方API。 各个API的含义请查看官方API。 这里的第三张图片是实现渐变颜色最重要的。 每列都是单独设置的。

如果希望数据是动态的，调用后台接口获取数据，然后设置对应的数据地区。

方法二：开发SovitChart图表开发工具

第一步：登录SovitChart官方后台马苏。 ，在使用图表服务创建您自己的项目下，单击要输入的项目并转到我的图表。单击“+”在“表格”选项卡中创建图表：“带渐变颜色的条形图”：

创建完成后，点击【渐变颜色直方图】和一个空的透明面板。

第 2 步：选择直方图并编辑直方图属性。

在第三个选项卡“图表仓库”中找到直方图，选择并点击基本直方图。 默认直方图是这样的基本图形：

第 3 步：通过在属性面板中编辑属性来设置直方图样式

如果将数据系列中的系列数更改为 2，则直方图将包含两列。 展开“标题”属性以更改标题文本和颜色，并展开“X”和“Y 轴”属性以更改 X 轴。 图例样式和颜色（例如 Y 轴）用于设置图例的显示文本和颜色。

最后也是最重要的事情。 第一步是独自一人使用特殊样式设置渐变颜色：

第 4 步：通过在数据面板中编辑数据源，将动态数据添加到图表中。 当前示例使用 JSON 数据源。

关于绑定数据源将在另一篇文章中详细介绍。

设置完成后，点击发布并选择发布。 已发布的图表可以直接访问或在您自己的项目页面上引用。

在网页上引用具有以下效果：