1.官网提供的默认模式修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.js"></script>
<div id= 'echarts' style="width: 800px;height: 800px;"></div>
<script>
const echartsDom = document.getElementById('echarts');
//官网默认提供了dark，light两种模式
//const chart = echarts.init(echartsDom,'你需要的模式');
const chart = echarts.init(echartsDom,'dark');
chart.setOption({
title:{
text:'入门'
},
xAxis:{
data:['视频','音频','档案']
},
yAxis:{},
series:{
type:'bar',
data:[100,200,300]
}
})
</script>
</body>
</html>
dark模式
2.自定义模式修改
修改模式的链接：https://echarts.apache.org/zh/theme-builder.html
设置界面如下：
选择好你需要的样式点下载主题(注意这个主题名称需要用到)，选择js版本复制代码，在你的echarts界面引入
最后修改const chart = echarts.init(echartsDom,'purple-passion');purple-passion替换成你的主题名称
3.切换渲染效果(svg,canvas)
const chart = echarts.init(echartsDom,'purple-passion',{renderer:'svg'})
renderer参数就是用来修改渲染效果，默认是canvas，可以修改为svg。
如果频繁切换数据建议使用canvas，如果是用在大屏建议svg，svg显示效果更好，在大屏不会出现模糊的现象。
3.总体代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.js"></script>
<script src="./theme/theme.js"></script>//复制出来的js单独引入
<div id= 'echarts' style="width: 800px;height: 800px;"></div>
<script>
const echartsDom = document.getElementById('echarts');
//renderer参数就是用来修改渲染效果，默认是canvas，可以修改为svg。
const chart = echarts.init(echartsDom,'purple-passion',{renderer:'svg'});//第二个参数你的主题名称
chart.setOption({
title:{
text:'入门'
},
xAxis:{
data:['视频','音频','档案']
},
yAxis:{},
series:{
type:'bar',
data:[100,200,300]
}
})
</script>
</body>
</html>
效果图