當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

003_颜色主题

發(fā)布時(shí)間：2025/5/22 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 003_颜色主题小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. 最簡(jiǎn)單的更改全局樣式的方式, 是直接采用顏色主題(theme)。

2. ECharts5除了一貫的默認(rèn)主題外, 還內(nèi)置了'dark'主題。

3. dark主題例子

3.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>dark主題</title><script type="text/javascript" src="echarts.js"></script></head><body><div id="main" style="width: 600px; height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom, 初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'), 'dark');// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {// 為圖表配置標(biāo)題title: {text: 'dark主題'},// 配置提示信息tooltip: {},// 圖例組件legend: {data: ['銷量']},// 配置要在X軸顯示的項(xiàng)xAxis: {data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']},// 配置要在Y軸顯示的項(xiàng)yAxis: {},// 系列列表series: [{name: '銷量', // 系列名稱type: 'bar', // 系列圖表類型data: [5, 20, 36, 10, 10, 20] // 系列中的數(shù)據(jù)內(nèi)容}]};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);</script></body> </html>

3.2. 效果圖

4. 編輯主題

4.1. 其他的主題, 沒(méi)有內(nèi)置在ECharts中, 需要自己加載。可以使用主題編輯器, 自己編輯主題, 然后下載下來(lái)使用。

4.2. 主題編輯器地址: https://echarts.apache.org/zh/theme-builder.html, 下載vintage主題。

4.3. 下載JS版本?

4.4. 下載完成后是vintage.js。如果保存為UMD格式的JS文件, 文件內(nèi)部已經(jīng)做了自注冊(cè), 直接引入JS即可。?

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>vintage主題</title><script type="text/javascript" src="echarts.js"></script><script type="text/javascript" src="vintage.js"></script></head><body><div id="main" style="width: 600px; height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom, 初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'), 'vintage');// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {// 為圖表配置標(biāo)題title: {text: 'vintage主題'},// 配置提示信息tooltip: {},// 圖例組件legend: {data: ['銷量']},// 配置要在X軸顯示的項(xiàng)xAxis: {data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']},// 配置要在Y軸顯示的項(xiàng)yAxis: {},// 系列列表series: [{name: '銷量', // 系列名稱type: 'bar', // 系列圖表類型data: [5, 20, 36, 10, 10, 20] // 系列中的數(shù)據(jù)內(nèi)容}]};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);</script></body> </html>

4.5. 效果圖

4.6. 如果主題保存為JSON文件, 則需要自行加載和注冊(cè), 例如:?

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

總結(jié)

以上是生活随笔為你收集整理的003_颜色主题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。