Vue ECharts設(shè)置主題實(shí)現(xiàn)方法介紹
前言
本篇來(lái)學(xué)習(xí)下ECharts中如何設(shè)置圖表主題
內(nèi)置主題
ECharts 中默認(rèn)內(nèi)置了兩套主題: light dark
var chart = echarts.init(dom, 'light') var chart = echarts.init(dom, 'dark')
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>ECharts高級(jí)--主題</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script> </head> <body> <div id='app' style="width: 600px;height: 400px"></div> <script> // init方法有兩個(gè)參數(shù), 第一個(gè)參數(shù)代表是一個(gè)dom節(jié)點(diǎn), 第二個(gè)參數(shù), 代表你需要使用哪一套主題 // 默認(rèn)內(nèi)置了兩套主題 , light dark var myCharts = echarts.init(document.getElementById('app'), 'dark') var option = { xAxis: { type: 'category', // 類(lèi)目軸 data: ['測(cè)試', '研發(fā)', '產(chǎn)品'] }, yAxis: { type: 'value' // 數(shù)值軸 }, title: { text: '崗位', // 標(biāo)題文本 link: 'https://blog.csdn.net/IT_heima', // 標(biāo)題超鏈接 target: 'blank', // 打開(kāi)新窗口, self: 當(dāng)前窗口 textStyle: { // 文字樣式 color: 'pink', // 顏色 fontWeight: 'bold' // 字體粗細(xì) } }, series: [ { name: '崗位', type: 'bar', // 圖表類(lèi)型 bar:柱狀圖 line:折線圖 pie:餅圖 data: [10, 90, 20], barWidth: '30%', label: { show: true, rotate: 20 } } ] } myCharts.setOption(option) </script> </body> </html>
效果
自定義主題
主題編輯器地址:https://echarts.apache.org/zh/theme-builder.html
下載主題(保存為js文件)
引入主題 js 文件(以主題名稱(chēng)命名的js文件)
在 init 方法中使用主題
一般是下載時(shí)自定義的主題名稱(chēng)(可在下載的主題js文件中找到名稱(chēng))
完整代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>ECharts高級(jí)--主題</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script> <script src="lib/CustomTheme.js"></script> </head> <body> <div id='app' style="width: 600px;height: 400px"></div> <script> // init方法有兩個(gè)參數(shù), 第一個(gè)參數(shù)代表是一個(gè)dom節(jié)點(diǎn), 第二個(gè)參數(shù), 代表你需要使用哪一套主題 var myCharts = echarts.init(document.getElementById('app'), 'CustomTheme') var option = { xAxis: { type: 'category', // 類(lèi)目軸 data: ['測(cè)試', '研發(fā)', '產(chǎn)品'] }, yAxis: { type: 'value' // 數(shù)值軸 }, title: { text: '崗位', // 標(biāo)題文本 link: 'https://blog.csdn.net/IT_heima', // 標(biāo)題超鏈接 target: 'blank', // 打開(kāi)新窗口, self: 當(dāng)前窗口 textStyle: { // 文字樣式 color: 'pink', // 顏色 fontWeight: 'bold' // 字體粗細(xì) } }, series: [ { name: '崗位', type: 'bar', // 圖表類(lèi)型 bar:柱狀圖 line:折線圖 pie:餅圖 data: [10, 90, 20], barWidth: '30%', label: { show: true, rotate: 20 } } ] } myCharts.setOption(option) </script> </body> </html>
效果:與預(yù)覽效果一致,類(lèi)目軸顏色修改為淺綠色
到此這篇關(guān)于Vue ECharts設(shè)置主題實(shí)現(xiàn)發(fā)介紹的文章就介紹到這了,更多相關(guān)Vue ECharts設(shè)置主題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue.js 中 axios 跨域訪問(wèn)錯(cuò)誤問(wèn)題及解決方法
這篇文章主要介紹了Vue.js 中 axios 跨域訪問(wèn)錯(cuò)誤問(wèn)題及解決方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-11-11vue-cli下的vuex的簡(jiǎn)單Demo圖解(實(shí)現(xiàn)加1減1操作)
這篇文章主要介紹了vue-cli下的vuex的簡(jiǎn)單Demo(實(shí)現(xiàn)加1減1操作),本文圖文并茂給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-02-02基于vue寫(xiě)一個(gè)全局Message組件的實(shí)現(xiàn)
這篇文章主要介紹了基于vue寫(xiě)一個(gè)全局Message組件的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08vue3 學(xué)習(xí)筆記之a(chǎn)xios的使用變化總結(jié)
本篇文章主要旨在幫助正在學(xué)vue3或者準(zhǔn)備學(xué)vue3的同學(xué)了解網(wǎng)絡(luò)請(qǐng)求axios該如何使用,防止接觸了一點(diǎn)點(diǎn)vue3的同學(xué)會(huì)有個(gè)疑問(wèn)。有興趣的小伙伴可以關(guān)注一下2021-11-11VueX學(xué)習(xí)之modules和namespacedVueX詳細(xì)教程
這篇文章主要為大家介紹了VueX學(xué)習(xí)之modules和namespacedVueX詳細(xì)教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06vue如何在項(xiàng)目中調(diào)用騰訊云的滑動(dòng)驗(yàn)證碼
這篇文章主要介紹了vue如何在項(xiàng)目中調(diào)用騰訊云的滑動(dòng)驗(yàn)證碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07