良许Linux教程网 干货合集 讲解ECharts 样式设置

讲解ECharts 样式设置

ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts最初由百度团队开源,并于2018年初捐赠给Apache基金会,成为ASF孵化级项目

颜色主题

ECharts4 开始,除了默认主题外,内置了两套主题,分别为 light 和 dark。

使用方式如下:

实例

var chart = echarts.init(dom, 'light');
或者
var chart = echarts.init(dom, 'dark');

尝试一下 » 另外,我们也可以在官方的 主题编辑器 选择自己喜欢的主题下载。

讲解ECharts 样式设置
ECharts 样式设置介绍ECharts 样式设置介绍

目前主题下载提供了 JS 版本和 JSON 版本。 如果你使用 JS 版本,可以将 JS 主题代码保存一个 主题名.js 文件,然后在 HTML 中引用该文件,最后在代码中使用该主题。 比如上图中我们选中了一个主题,将 JS 代码保存为 wonderland.js。

实例



...
// HTML 引入 wonderland.js 文件后,在初始化的时候调用
var myChart = echarts.init(dom, 'wonderland')
// ...

尝试一下 » 如果主题保存为 JSON 文件,那么可以自行加载和注册。

比如上图中我们选中了一个主题,将 JSON 代码保存为 wonderland.json。

实例

//主题名称是 wonderland
$.getJSON('wonderland.json'function (themeJSON) {
   echarts.registerTheme('wonderland', themeJSON)
   var myChart = echarts.init(dom, 'wonderland')
})

尝试一下 »

调色盘

调色盘可以在 option 中设置。

调色盘给定了一组颜色,图形、系列会自动从其中选择颜色。

可以设置全局的调色盘,也可以设置系列自己专属的调色盘。

option = {
   // 全局调色盘。
   color: ['#c23531','#2f4554',style="color: #3366CC;">'#61a0a8''#d48265''#91c7ae','#749f83',  '#ca8622''#bda29a','#6e7074''#546570''#c4ccd3'],
   series: [{
       type'bar',
       // 此系列自己的调色盘。
       color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab''#91ca8c','#f49f42'],
       ...
   }, {
       type'pie',
       // 此系列自己的调色盘。
       color: ['#37A2DA''#32C5E9''#67E0E3''#9FE6B8''#FFDB5C','#ff9f7f''#fb7293''#E062AE''#E690D1''#e7bcf3''#9d96f5''#8378EA''#96BFFF'],
       ...
   }]
}

全局调色盘实例:

实例

series: [{
   type'pie',
   // 此系列自己的调色盘。
   color: ['#ff0000','#00ff00''#0000ff''#9FE6B8''#FFDB5C','#ff9f7f''#fb7293''#E062AE''#E690D1''#e7bcf3''#9d96f5''#8378EA''#96BFFF'],
   ...
}]

直接的样式设置 itemStyle, lineStyle, areaStyle, label, …

直接的样式设置是比较常用设置方式。纵观 ECharts 的 option 中,很多地方可以设置 itemStyle、lineStyle、areaStyle、label 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。

一般来说,ECharts 的各个系列和组件,都遵从这些命名习惯,虽然不同图表和组件中,itemStyle、label 等可能出现在不同的地方。

直接样式设置的另一篇介绍,参见 ECharts 饼图。

高亮的样式:emphasis

在鼠标悬浮到图形元素上时,一般会出现高亮的样式。默认情况下,高亮的样式是根据普通样式自动生成的。

如果要自定义高亮样式可以通过 emphasis 属性来定制:

实例

// 高亮样式。
emphasis: {
   itemStyle: {
       // 高亮时点的颜色
       color: 'red'
   },
   label: {
       show: true,
       // 高亮时标签的文字
       formatter: '高亮时显示的标签内容'
   }
},

尝试一下 »

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

137e00002230ad9f26e78-265x300
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部