关注分享主机优惠活动
国内外VPS云服务器

分步说明如何使用 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 数据源。

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

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

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

未经允许不得转载:主机频道 » 分步说明如何使用 echarts 和 SovitChart 创建渐变颜色直方图(echarts 直方图的不同颜色设置)。

评论 抢沙发

评论前必须登录!