Echarts中主题的使用

1,887 阅读1分钟

Echarts中主题的使用

一、直接下载并且使用主题

​ 1. 官网下载主题

官网主题地址:echarts.apache.org/zh/download…

​ 2. 引入

<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   	<!-- 引入主题地址 -->
    <script src="dark.js"></script>
</head>

​ 3. 初始化主题

var myChart = echarts.init(document.getElementById('tyt_main'),'dark')

二、点击链接切换主题

​ 1. 官网下载主题

官网主题地址:echarts.apache.org/zh/download…

​ 2. 引入

<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   	<!-- 引入主题地址 -->
    <script src="dark.js"></script>
</head>

​ 3. 点击事件修改主题

<body>
	<div id="main" style="width:900px;height:600px;"></div>
	<a href="javascript:void(0)" onclick="changeTheme('dark')">dark</a>
</body>

<script>
	function changeTheme(theme){
		myChart.clear()
		myChart = echarts.init(document.getElementById('main'),theme);
		myChart.setOption(option)
	}
</script>