Vue ECharts設(shè)置主題實(shí)現(xiàn)方法介紹

更新時(shí)間：2022年12月20日 12:10:43 作者：愛學(xué)習(xí)de測試小白

這篇文章主要介紹了Vue ECharts設(shè)置主題，本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言

本篇來學(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高級--主題</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',   // 類目軸
            data: ['測試', '研發(fā)', '產(chǎn)品']
        },
        yAxis: {
            type: 'value' // 數(shù)值軸
        },
        title: {
            text: '崗位',  // 標(biāo)題文本
            link: 'https://blog.csdn.net/IT_heima', // 標(biāo)題超鏈接
            target: 'blank',    // 打開新窗口，  self: 當(dāng)前窗口
            textStyle: {    // 文字樣式
                color: 'pink', // 顏色
                fontWeight: 'bold' // 字體粗細(xì)
            }
        },
        series: [
            {
                name: '崗位',
                type: 'bar',  // 圖表類型  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 文件(以主題名稱命名的js文件)

在 init 方法中使用主題

一般是下載時(shí)自定義的主題名稱(可在下載的主題js文件中找到名稱)

完整代碼

<!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高級--主題</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',   // 類目軸
            data: ['測試', '研發(fā)', '產(chǎn)品']
        },
        yAxis: {
            type: 'value' // 數(shù)值軸
        },
        title: {
            text: '崗位',  // 標(biāo)題文本
            link: 'https://blog.csdn.net/IT_heima', // 標(biāo)題超鏈接
            target: 'blank',    // 打開新窗口，  self: 當(dāng)前窗口
            textStyle: {    // 文字樣式
                color: 'pink', // 顏色
                fontWeight: 'bold' // 字體粗細(xì)
            }
        },
        series: [
            {
                name: '崗位',
                type: 'bar',  // 圖表類型  bar:柱狀圖   line:折線圖   pie:餅圖
                data: [10, 90, 20],
                barWidth: '30%',
                label: {
                    show: true,
                    rotate: 20
                }
            }
        ]
    }
    myCharts.setOption(option)
</script>
</body>
</html>

效果：與預(yù)覽效果一致，類目軸顏色修改為淺綠色