Echarts 图表开发四大步骤详解

Nick Peng

于 2020-02-22 18:21:57 发布

阅读量2.8k

点赞数 3

分类专栏： Echarts 文章标签： Echarts图表开发四大步数据可视化

本文链接：https://blog.youkuaiyun.com/PY0312/article/details/104447960

版权

文章目录

一、引入Echarts
二、初始化Echarts实例
三、准备展示数据Data
四、设定图表配置项Option
五、图表展示最终效果
六、完整实例代码及解析

好文章 记得收藏+点赞+关注额！！！

---- Nick.Peng

一、引入Echarts

引入 Echarts.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.js"></script>
</head>
<body>
</body>
</html>

二、初始化Echarts实例

在 body 中给Echarts指定 Dom 的大小
初始化一个 Echarts 实例，如下

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
    </script>
</body>