当前位置：首页 > 行业动态 > 正文

Echarts主题CDN如何应用？详细解析CDN主题资源引入方式

admin
行业动态
2025-03-09
8

https:// cdn.jsdelivr.net/npm/echarts/dist/theme/dark.js，https://cdn.jsdelivr.net/npm/echarts/dist/theme/light.js，https://cdn.jsdelivr.net/npm/echarts/dist/theme/macarons.js，https://cdn.jsdelivr.net/npm/echarts/dist/theme/roma.js，https://cdn.jsdelivr.net/npm/echarts/dist/theme/shine.js，https://cdn.jsdelivr.net/npm/echarts/dist/theme/vintage.js，https://cdn.jsdelivr.net/npm/echarts/dist/theme/walden.js，https://cdn.jsdelivr.net/npm/echarts/dist/theme/westeros.js

ECharts Theme CDN 使用指南

一、ECharts简介

ECharts是一款基于JavaScript的数据可视化库，由百度前端技术部开发和维护，它提供了丰富的图表类型和可定制性，广泛应用于网页、移动应用等多种场景中的数据展示。

二、ECharts主题（Theme）

在ECharts中，主题（Theme）用于定义图表的整体样式，包括颜色、字体、布局等，通过应用不同的主题，可以快速改变图表的外观，使其更符合项目需求或品牌风格。

三、使用CDN引入ECharts主题

1. 选择CDN服务

使用CDN（内容分发网络）可以加速资源的加载速度，并减少服务器负担，以下是一些常用的ECharts主题CDN链接：

官方推荐CDN：

+ https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js

+ https://cdn.jsdelivr.net/npm/echarts/theme/macarons.js

其他常用CDN：

+ https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js

+ https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js

2. 引入ECharts库和主题

在HTML文件中，通过<script>标签引入ECharts库和所选主题，使用官方推荐的CDN和“macarons”主题：

<!-引入ECharts主库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-引入ECharts主题 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/theme/macarons.js"></script>

3. 初始化ECharts实例并应用主题

在JavaScript代码中，初始化ECharts实例时指定使用的主题。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'), 'macarons'); // 使用'macarons'主题
// 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

四、自定义主题

如果现有主题不满足需求，可以通过自定义主题来创建独特的图表样式，自定义主题需要创建一个JavaScript对象，包含所需的样式属性，并在初始化ECharts实例时传入该对象。

// 自定义主题
var customTheme = {
    color: ['#ff0000', '#00ff00', '#0000ff'], // 设置图表中使用的颜色
    backgroundColor: 'rgba(255,255,255,0.8)', // 设置背景颜色
    textStyle: {
        fontFamily: 'Arial', // 设置字体样式
        fontSize: 14
    }
};
// 初始化ECharts实例并应用自定义主题
var myChart = echarts.init(document.getElementById('main'), customTheme);