炫意html5
最早CSS3和HTML5移动技术网站之一

ECharts – 主题

颜色主题

概述

  • ECharts 可以通过主题设置来改变图形元素或者文字的颜色、明暗、大小等。
  • 使用方式如下:
    • 在使用echarts. init创建一个 ECharts 实例时,在第一个参数dom后再添加一个参数“theme”
    • 参数的值为主题的名称。它可以是应用的主题。可以是一个主题的配置对象,也可以是使用已经通过 echarts.registerTheme 注册的主题名称。

内置主题

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

  • 使用默认主题:var chart = echarts.init(dom);
  • 使用主题light:var chart = echarts.init(dom, ‘light’);
  • 使用主题dark: var chart = echarts.init(dom, ‘dark’);

我们来分别举例说明一下:

使用代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src=echarts.min.js></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'), 'light'); // 使用dark 、light或无第二参数
myChart.setOption({
series : [
{
name: '访问来源',
type: 'pie',    // 设置图表类型为饼图
radius: '55%',  // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。
data:[          // 数据数组,name 为数据项名称,value 为数据项值
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
]
}
],
title: {
text:'树懒课堂流量访问来源统计图',
subtext:'纯属虚构',
}
})
</script>
</body>
</html>

使用默认主题

var chart = echarts.init(dom);

效果图如下:

使用主题light

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

效果图:

使用主题dark

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

效果图:

使用主题编辑器

  • 我们也可以在官方的 主题编辑器 选择自己喜欢的主题下载。
  • 网址:https://www.echartsjs.com/theme-builder/

目前主题下载提供了 JS 版本和 JSON 版本

JS 版本

  • 如果你使用 JS 版本,可以将 JS 主题代码保存一个 主题名.js 文件,然后在 HTML 中引用该文件,最后在代码中使用该主题。

比如我们使用上图设置好的主题,将 JS 代码保存为 “树懒课堂.js”

再使用如下代码引入主题

<script src="https://www.shulanxt.com/visualization/echarts/theme-summary/%E6%A0%91%E6%87%92%E8%AF%BE%E5%A0%82.js"></script>

再将使用的主题名称替换为我们下载的主题名称:

      var myChart = echarts.init(document.getElementById('main'), '树懒课堂'); 

配置完成后即可使用主题

效果图如下

完整代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src=echarts.min.js></script>
<script src="https://www.shulanxt.com/visualization/echarts/theme-summary/%E6%A0%91%E6%87%92%E8%AF%BE%E5%A0%82.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'), '树懒课堂'); // dark 可尝试修改为 light
myChart.setOption({
series : [
{
name: '访问来源',
type: 'pie',    // 设置图表类型为饼图
radius: '55%',  // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。
data:[          // 数据数组,name 为数据项名称,value 为数据项值
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
]
}
],
title: {
text:'树懒课堂流量访问来源统计图',
subtext:'纯属虚构',
}
})
</script>
</body>
</html>

JSON 版本

  • 如果主题保存为 JSON 文件,那么可以自行加载和注册。

使用步骤如下:

  • 下载或复制我们配置好的的主题保存至 *.json 文件;
  • 读取该 JSON 文件,并使用 obj = JSON.parse(data) 将其转换成对象;
  • 调用 echarts.registerTheme(‘树懒课堂’, obj) 注册主题;
  • 使用 echarts.init(dom, ‘树懒课堂’) 创建图表,第二个参数即为刚才注册的主题名字。
  • *注意:我们使用了 $.getJSON,所以需要引入 jQuery。

将相关代码替换成如下代码:

$.getJSON('slkt.json', function (themeJSON) {
echarts.registerTheme('slkt',themeJSON)
var myChart = echarts.init(document.getElementById('main'), 'slkt'); 

效果图如下图所示:

炫意HTML5 » ECharts – 主题

Java基础教程Android基础教程