003_颜色主题

最新推荐文章于 2024-08-27 20:05:46 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-08-27 20:05:46 发布

阅读量332

点赞数

分类专栏： Apache ECharts 文章标签： echarts 前端

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/123493913

版权

Apache ECharts 专栏收录该内容

12 篇文章

订阅专栏

1. 最简单的更改全局样式的方式, 是直接采用颜色主题(theme)。

2. ECharts5除了一贯的默认主题外, 还内置了'dark'主题。

3. dark主题例子

3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>dark主题</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'), 'dark');

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: 'dark主题'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['销量']
		        },
		        // 配置要在X轴显示的项
		        xAxis: {
		          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
		        },
		        // 配置要在Y轴显示的项
		        yAxis: {},
		        // 系列列表
		        series: [
		          {
		            name: '销量', // 系列名称
		            type: 'bar', // 系列图表类型
		            data: [5, 20, 36, 10, 10, 20] // 系列中的数据内容
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

3.2. 效果图

4. 编辑主题

4.1. 其他的主题, 没有内置在ECharts中, 需要自己加载。可以使用主题编辑器, 自己编辑主题, 然后下载下来使用。

4.2. 主题编辑器地址: https://echarts.apache.org/zh/theme-builder.html, 下载vintage主题。

4.3. 下载JS版本

4.4. 下载完成后是vintage.js。如果保存为UMD格式的JS文件, 文件内部已经做了自注册, 直接引入JS即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vintage主题</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
		<script type="text/javascript" src="vintage.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'), 'vintage');

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: 'vintage主题'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['销量']
		        },
		        // 配置要在X轴显示的项
		        xAxis: {
		          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
		        },
		        // 配置要在Y轴显示的项
		        yAxis: {},
		        // 系列列表
		        series: [
		          {
		            name: '销量', // 系列名称
		            type: 'bar', // 系列图表类型
		            data: [5, 20, 36, 10, 10, 20] // 系列中的数据内容
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

4.5. 效果图

4.6. 如果主题保存为JSON文件, 则需要自行加载和注册, 例如:

$.getJSON('https://echarts.apache.org/vintage.json', function(themeJSON) {
	echarts.registerTheme('vintage', JSON.parse(themeJSON));
	var chart = echarts.init(dom, 'vintage');
});