在vscode中使用webpack中安装的echarts文件失败，dom获取class名，图表不显示

所有的东西都是新学的，所以遇到了很多问题：

（1）首先，在电脑上已经安装了node的情况下，

在npm中安装echarts：npm install echarts --save

mac系统在最前面加上sudo来获取权限；

然后，就是直接宕下来的代码块：

var echarts = require('echarts');

// 基于准备好的dom，初始化echarts实例
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]
    }]
});
最后，又在vscode中下载了open in brower的插件，之后在浏览器上预览；
结果，什么都没有，出了问题。
在浏览器上查看调出console，提示我require is not defined;
然后百度了下好像是说没在node环境下运行，然后搞了半天也没搞懂；问题暂时搁置了，没解决；
（2）为了测试下不是代码的问题，我重新开始写了一段，由于平时习惯用class名的缘故，我将上文中的id改成了class，结果网页加载不显示图表，换成id，可以；
这就很尴尬了，想不通为啥，问题也没解决。不知道有没有大神帮忙看看到底是什么问题。