ECharts实现动态切换主题样式

ECharts是百度开源的一个JS数据可视化库。通过颜色主题可以轻松实现不同颜色样式的修改，也可以通过调色盘、直接样式设置、高亮样式等方法实现。

ECharts4 开始，除了一贯的默认主题外，新内置了两套主题，分别为 'light' 和 'dark'。使用方法如下：

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

主题可以在主题编辑器里面找到，也可以自己定义主题。如果主题保存为 JSON 文件，那么可以自行加载和注册（参考文档）。

动态修改主题方法如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts主题样式</title><!-- 引入 echarts.js --><script src="./dist/echarts.min.js"></script>
</head>
<body><!--切换主题按钮--><div><h5>利用主题实现，默认有二种，也可自定义主题，或者利用官网提供的主题工具实现</h5><input type="button" value="light" onclick="setLigth()"><input type="button" value="dark" onclick="setDark()"></div><div><h5>调色板，修改默认的样式颜色</h5><input type="button" value="颜色修改" onclick="setColor()"></div><div><h5>直接的样式设置 itemStyle, lineStyle, areaStyle, label等</h5><h5>高亮的样式：emphasis</h5>></div><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><div><a href="https://www.echartsjs.com/zh/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%AE%80%E4%BB%8B">参考文档</a></div></body>
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量']},series: [{name: '销量',type: 'pie',data: [{value: 335, name: '直接访问'},{value: 310, name: '邮件营销'},{value: 274, name: '联盟广告'},{value: 235, name: '视频广告'},{value: 400, name: '搜索引擎'}].sort(function (a, b) { return a.value - b.value; })}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);//动态切换主题function setLigth(){myChart.dispose();  myChart = echarts.init(document.getElementById('main'), 'light');myChart.setOption(option);}function setDark(){myChart.dispose();myChart = echarts.init(document.getElementById('main'), 'dark');myChart.setOption(option);}//设置调色板样色function setColor(){let rcolor = [];for (let i = 0; i <  10; ++i){//随机一个样色rcolor.push("#"+Math.round(Math.random()*0x1000000).toString(16));}let tmpoption = {color: rcolor};myChart.setOption(tmpoption);}</script></html>

ECharts实现动态切换主题样式相关推荐

Android动态切换主题
软件换肤从功能上可以划分三种: 1) 软件内置多个皮肤,不可由用户增加或修改: 最低的自由度,软件实现相对于后两种最容易. 2) 官方提供皮肤供下载,用户可以使用下载的皮肤: 用户可选择下载自己喜欢的 ...
element如何动态切换主题(vite+vue+ts+elementPlus)
前言提示:动态切换主题使用的是css3的var函数现实示例:切换--main-bg-color的值,使用<div style="--main-bg-color:red"& ...
vue动态发布到线上_vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件we ...
vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css,具体实现步骤如下: 1.添加webpack插件,新建文件we ...
vue动态切换css文件_vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件we ...
直播短视频系统开发，动态切换主题色
直播短视频系统开发,动态切换主题色相关的代码: 点击按钮变量存储切换状态: override fun onClick(v: View?) {when (v?.id) {R.id.btn_theme1 ...
一对一直播app源码，Aandroid动态切换主题色
一对一直播app源码,Aandroid动态切换主题色实现的相关代码点击按钮变量存储切换状态: override fun onClick(v: View?) {when (v?.id) {R.id.b ...
webpack插件实现自动抽取css中的主题色样式，并动态切换主题色（element-ui）
项目项目中用了element-ui,有切换主题色的需要.但官方的方式,有几个问题: 1.需要下载整个element-ui的样式css,并替换其中的css样式颜色.文件较大,下载慢且影响性能. 2.只能 ...
vue 一键换肤（切换主题样式）
目录方法一:动态修改全局CSS变量方法二:切换主题CSS文件方法三:切换顶级CSS类名方法一:动态修改全局CSS变量 1. 在全局css文件或 app.vue中定义全局CSS变量 <st ...

ECharts实现动态切换主题样式

ECharts实现动态切换主题样式相关推荐

最新文章

热门文章