如何在HTML文件中引用Echarts图表实例

第一步
在项目工程目录下建立新的js文件，这里命名为index.js
在HTML文件中引入Echarts的js库和新建的index.js库

    <script src="js/echarts.min.js"></script>
    <script src="js/index.js"></script>

上述引入库的代码放置在body标签中

第二步
在index.js书写相关引入代码，这里给出代码结构

(function(){
    var myChart = echarts.init(document.querySelector(".map .chart"));
    //这里的.map .chart是HTML的div容器的class属性的名称，表示名为map的div容器下的名字为chart的容器, 具体解释在后面

    /*
    这里粘贴Echarts实例中的相关代码
    */

    myChart.setOption(option);
})();

第三步
确保上述的.map .chart与HTML文件中的类名称对应
比如写成.map .chart的形式，那么HTML文件中就必须有结构

<div class="map">
    <div class="chart">
    </div>
</div>

---

当需要引入多个图表时，可以使用多个上述的引入的代码结构，但必须保证每个图表和HTML中div的类名的对应关系

HTML中存放图表的div容器必须有height和width，否则会出现显示方面的问题。