日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

003_颜色主题

發布時間：2025/5/22 36 豆豆
生活随笔 收集整理的這篇文章主要介紹了 003_颜色主题 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

2. ECharts5除了一貫的默認主題外, 還內置了'dark'主題。

3. dark主題例子

3.1. 代碼

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

3.2. 效果圖

4. 編輯主題

4.1. 其他的主題, 沒有內置在ECharts中, 需要自己加載。可以使用主題編輯器, 自己編輯主題, 然后下載下來使用。

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

4.3. 下載JS版本?

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

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

4.5. 效果圖

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

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

總結

以上是生活随笔為你收集整理的003_颜色主题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。