您现在的位置是：网站首页 > 通过CDN引入ECharts文章详情

通过CDN引入ECharts

陈川【 ECharts 】 27229人已围观 7802字

通过CDN引入ECharts

ECharts作为一款强大的数据可视化库，通过CDN引入是最快捷的部署方式之一。这种方式无需本地安装，直接通过script标签引入即可使用，特别适合快速原型开发或简单的项目需求。

CDN引入的优势

无需构建工具：省去npm install或yarn add的步骤
版本管理灵活：可随时切换不同版本
缓存优势：利用公共CDN的缓存机制加速加载
跨域支持：适用于各种环境下的快速集成

主流CDN服务商都提供了ECharts的镜像：

jsDelivr：https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js
cdnjs：https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js
unpkg：https://unpkg.com/echarts@5.4.3/dist/echarts.min.js

基础引入方式

最简单的引入方式是直接在HTML文件中添加script标签：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts CDN示例</title>
    <!-- 引入ECharts核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        // 初始化图表
        var myChart = echarts.init(document.getElementById('main'));
        
        // 指定图表的配置项和数据
        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);
    </script>
</body>
</html>

按需引入模块

虽然CDN方式通常引入完整版ECharts，但也可以通过特定URL实现按需加载：

<!-- 只引入核心模块 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.core.min.js"></script>

<!-- 引入特定图表类型 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/map/js/china.js"></script>

实现按需加载的完整示例：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/extension/bmap.min.js"></script>

<script>
    // 必须先加载百度地图API
    function initChart() {
        var chart = echarts.init(document.getElementById('map-container'));
        
        // 配置项中使用bmap组件
        var option = {
            bmap: {
                center: [116.46, 39.92],
                zoom: 11,
                roam: true
            },
            series: [{
                type: 'scatter',
                coordinateSystem: 'bmap',
                data: [[120, 30, 1], [116.46, 39.92, 2]]
            }]
        };
        
        chart.setOption(option);
    }
    
    // 动态加载百度地图API
    var script = document.createElement('script');
    script.src = 'https://api.map.baidu.com/api?v=3.0&ak=您的百度地图AK&callback=initChart';
    document.head.appendChild(script);
</script>

多版本共存方案

有时项目中需要同时使用不同版本的ECharts，可以通过命名空间隔离实现：

<!-- 引入5.x版本 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<!-- 引入4.x版本 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>

<script>
    // 使用5.x版本
    var chart5 = echarts.init(document.getElementById('chart5'));
    
    // 使用4.x版本
    var chart4 = window.echarts4.init(document.getElementById('chart4'));
</script>

主题定制与扩展

通过CDN也可以方便地引入自定义主题或扩展：

<!-- 引入vintage主题 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/theme/vintage.js"></script>

<script>
    // 使用主题初始化
    var chart = echarts.init(document.getElementById('main'), 'vintage');
</script>

对于扩展插件，如数据工具、GL扩展等：

<!-- 引入GL扩展 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/extension/dataTool.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js"></script>

<script>
    // 3D图表示例
    var chart = echarts.init(document.getElementById('3d-chart'));
    var option = {
        globe: {
            environment: 'auto',
            baseTexture: '/asset/get/s/data-1491837049070-rJZtl7Y6x.jpg',
            heightTexture: '/asset/get/s/data-1491837049070-rJZtl7Y6x.jpg',
            displacementScale: 0.04
        }
    };
    chart.setOption(option);
</script>

性能优化建议

使用gzip版本：部分CDN提供.min.js.gz版本，可进一步减小体积
预加载策略：在页面头部使用<link rel="preload">提前加载资源
异步加载：非关键图表可延迟加载
版本锁定：始终指定完整版本号，避免自动更新导致兼容问题

异步加载示例：

<script>
    function loadECharts(callback) {
        var script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js';
        script.onload = callback;
        document.head.appendChild(script);
    }
    
    loadECharts(function() {
        // ECharts加载完成后初始化图表
        var chart = echarts.init(document.getElementById('async-chart'));
        // ...图表配置
    });
</script>

常见问题解决

跨域问题：确保CDN地址使用HTTPS协议，与页面协议一致

版本冲突：检查是否有其他库也引入了ECharts，可通过console.log(echarts)确认

地图资源加载：中国地图等资源需要额外引入，注意检查控制台报错

<!-- 解决地图报错 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/map/js/china.js"></script>

响应式处理：窗口变化时需要手动触发resize

window.addEventListener('resize', function() {
    myChart.resize();
});

与其他库的集成

ECharts通过CDN引入后，可以方便地与其他库配合使用：

与jQuery集成：

$(document).ready(function() {
    $('#chart-container').each(function() {
        var chart = echarts.init(this);
        // ...初始化图表
    });
});

与Vue简单配合：

<div id="app">
    <div ref="chart" style="width: 100%; height: 400px;"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
    new Vue({
        el: '#app',
        mounted() {
            this.initChart();
        },
        methods: {
            initChart() {
                const chart = echarts.init(this.$refs.chart);
                // ...图表配置
            }
        }
    });
</script>

高级应用场景

多图表实例管理：

// 图表实例集合
var charts = {};

function initChart(containerId, option) {
    if (!charts[containerId]) {
        charts[containerId] = echarts.init(document.getElementById(containerId));
    }
    charts[containerId].setOption(option);
    
    // 添加窗口resize监听
    window.addEventListener('resize', function() {
        charts[containerId].resize();
    });
}

// 使用示例
initChart('chart1', { /* 配置项 */ });
initChart('chart2', { /* 配置项 */ });

动态数据更新：

// 初始数据
var data = [10, 20, 30, 40, 50];

// 初始化图表
var chart = echarts.init(document.getElementById('dynamic-chart'));
chart.setOption({
    series: [{
        type: 'bar',
        data: data
    }]
});

// 定时更新数据
setInterval(function() {
    data = data.map(function(item) {
        return item + Math.random() * 10 - 5;
    });
    chart.setOption({
        series: [{
            data: data
        }]
    });
}, 2000);

安全注意事项

校验CDN来源：只使用可信的CDN提供商
SRI校验：添加完整性校验防止篡改
备用本地源：CDN不可用时提供fallback方案

带SRI校验的引入示例：

<script 
    src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"
    integrity="sha384-7wA7z7P6E5yS4z7L0p+0fD5w8z5+5g5v5v5v5v5v5v5v5v5v5v5v5v5v5v5v5v5"
    crossorigin="anonymous">
</script>

备用方案实现：

<script>
    function loadECharts() {
        var script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js';
        script.integrity = 'sha384-...';
        script.crossOrigin = 'anonymous';
        script.onerror = function() {
            // CDN加载失败时使用本地版本
            var fallback = document.createElement('script');
            fallback.src = '/local/path/to/echarts.min.js';
            document.head.appendChild(fallback);
        };
        document.head.appendChild(script);
    }
    loadECharts();
</script>

上一篇： ECharts的社区支持与学习资源

下一篇： npm安装与模块化使用