vue中 echarts 自定义主题，切换主题，属性配置

最新推荐文章于 2025-06-19 22:24:43 发布

原创最新推荐文章于 2025-06-19 22:24:43 发布 · 9.6k 阅读

9 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue项目中使用ECharts自定义主题，并详细讲述了从下载官方主题文件，到引用主题文件，解决引用过程中的问题，以及在初始化ECharts时设置主题的方法。同时，还提及了ECharts中颜色渐变的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、获取主题js文件(在echarts官网上下载官方提供的主题，或者自定义主题)

https://echarts.baidu.com/theme-builder/

2、将下载得到的theme js文件引用到页面中

node_model中的主题文件是默认配置，每次更新都会回到初始值

import 'echarts/theme/shine'

自定义存放管理时，报错

主题文件js报错ECharts is not Loaded

把主题 js文件里的root.echarts 改成echarts；然后在该js文件内 import echarts from 'echarts'

转自： https://segmentfault.com/q/1010000013829233

3、主题使用实例:进行初始化时，第二个参数传入主题注册名

<template> 
    <div class="echarts-parent"> 
        <div v-show="!empty" class="echarts"></div>
    </div>
</template>  

<script type="text/javascript" src="js/echarts.min.js" ></script> 
<script> 
let echarts = require('echarts');

import './theme/shine'
export default{ 
    //...
    methods: {
        setChart(){
            if(!this.chart){
                this.chart = echarts.init($(this.$el).find('.echarts')[0], this.theme, {});
                this.chart.showLoading();
            }
            this.chart.setOption(this.option, true);
            this.chart.hideLoading();
        }
    }

}

4.切换主题

watch: {
    theme(val){
        this.chart.showLoading();
        this.chart.dispose();
        this.chart = echarts.init($(this.$el).find('.echarts')[0], this.theme)
        this.setChart() 
    }
}

5. echart 中的颜色渐变

转自： https://blog.youkuaiyun.com/qq_31135027/article/details/79635038

// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: {
    type: 'radial',
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}

// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}