Echart入门

最新推荐文章于 2024-11-06 22:41:26 发布

Paranoia_yy

最新推荐文章于 2024-11-06 22:41:26 发布

阅读量189

点赞数

分类专栏： HTML 文章标签： echarts 前端

本文链接：https://blog.csdn.net/Paranoia_yy/article/details/127835122

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了如何在Webpack 5环境下正确安装和配置ECharts库，包括修复了移除nodejs核心模块polyfill的问题，并处理了模块找不到错误。关键步骤包括安装node-polyfill-webpack-plugin和修复代码中的误操作。最后给出了完整配置示例。

摘要由CSDN通过智能技术生成

安装npm install echarts --save

运行demo时报错
错误一：在webpack5中移除了nodejs核心模块的polyfill自动引入，所以需要手动引入
解决：安装npm install node-polyfill-webpack-plugin
错误二：Module not found: Error: Can’t resolve 'fs’等
解决：code的时候打错了，vscode自动补全引入express，但我没有npm express，删掉那行代码就好了。

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
module.exports ={
	plugins:
        new NodePolyfillPlugin()
    ]
 }

echart官网文档

// 引入全部，可以看
import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
const block = document.createElement('div');
block.id = 'main';
block.style.cssText="width:500px;height:500px;"
document.body.appendChild(block)
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});