【HZHE001】黄子涵学习Echarts


快速上手

获取 Apache ECharts

在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js,点击并保存为 echarts.js 文件。

引入 Apache ECharts

在刚才保存 echarts.js 的目录新建一个 HZHE001.html 文件,内容如下:





    
    
    
    
    



   



打开这个 HZHE001.html,你会看到一片空白。

但是不要担心,打开控制台确认没有报错信息,就可以进行下一步。

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 之后,添加:


  
  

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。





    
    
    
    黄子涵学习Echarts
    



    
    

实例效果

HZHE001.html的效果