echarts主题样式
下载主题
- 引入echarts主题样式有两种方法：js和json
引入主题
引入js主题文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主题样式</title>
<style>
#main{
margin: 20px;
width: 700px;
height: 500px;
}
</style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js"></script>
//引入样式文件
<script src="./js/walden.js"></script>
<script>
const dom= document.getElementById('main');
// 初始化时加入主题名称
//const myChart = echarts.init(dom,'light');
// const myChart = echarts.init(dom,'dark');
// const myChart = echarts.init(dom,null);
const myChart = echarts.init(dom,'walden');
const option = {
series: [
{
type:'pie',
data:[
{value:20,name:'html'},
{value:10,name:'css'},
{value:30,name:'js'},
{value:40,name:'vue'},
],
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
引入json主题文件
注意：引入json时需要异步读取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主题样式</title>
<style>
#main{
margin: 20px;
width: 700px;
height: 500px;
}
</style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js"></script>
<script src="./js/vintage.js"></script>
<script>
const dom= document.getElementById('main');
/*请求样式文件
* echarts.registerTheme() 基于json数据注册主题
* */
fetch('./lib/wonderland.json')
.then((res) => res.json())
.then(data => {
echarts.registerTheme('wonderland',data);
draw();
});
function draw(){
const myChart = echarts.init(dom,'wonderland');
const option = {
series: [
{
type:'pie',
data:[
{value:80,name:'html'},
{value:10,name:'css'},
{value:30,name:'js'},
{value:40,name:'vue'},
{value:40,name:'canvas'},
],
}
]
};
myChart.setOption(option);
}
</script>
</body>
</html>
版权声明：本文为weixin_44178305原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。