webpack 与Echarts 5 的范例不会用？

最新推荐文章于 2024-08-14 15:58:05 发布

xijieyu

最新推荐文章于 2024-08-14 15:58:05 发布

阅读量539

点赞数

文章标签： echarts webpack 前端

本文链接：https://blog.csdn.net/xijieyu/article/details/121702658

版权

Echarts 5 的使用示例,好像很简单? 就是用不了?

快速上手中的实例很好用,直接复制就能用,但是有个坑.. 如果按照这个方法引入后续的范例，大概率是不成功的！

例如使用npm 安装ercharts, 安装最新的版本后, 按照webpack的使用方式,将Echarts.js打包进index.js 如下

module.exports={
    entry:'./node_modules/echarts/dist/echarts.js',
    output:{
        
        path:'e:/code/websrc/js',
        filename:'index.js'        
    },
    mode:'development'
    
}

webpack -w 以后, 像webpack的教程里,将index引入到html文件中:

<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="./js/index.js"></script>
</head>

js段完全按照范例, 写到html里, 然后打开html, 结果报错不能显示

Uncaught ReferenceError: echarts is not defined
    at t2.html:14

具体原因请官方解释把, 有些解决方案是:

import * as echarts from 'echarts';
import 'echarts-gl';

这里注意了，不要将这两句写到html的<script>段里！

解决办法:

将官方范例放在一个js文件中, 这里我用的是t1.js 在这个js 中import echarts

import * as echarts from 'echarts';
import 'echarts-gl';

var ROOT_PATH =
  'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
……
……
option && myChart.setOption(option);

修改webpack.config.js

module.exports={
    entry:'./js/t1.js',  
    output:{
        
        path:'e:/code/websrc/js',
        filename:'index.js'        
    },
    mode:'development'
    
}

再运行webpack -w重新打包，生成index.js，在html中直接引用index的文件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>w3cschool (www.w3cschool.cn) </title>
    <!-- 引入 echarts.js -->

</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script src="./js/index.js"> </script>
</body>
</html>