echarts模板
使用!为html来创建一个模板。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入 ECharts 文件 --><script src="echarts.min.js"></script>
</head>
<body><!--准备一个容器--><div id ="main" style="width: 600px;height: 400px;"></div><script type="text/javascript">//创建实例var myChart = echarts.init(document.getElementById('main'));option={}// 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script>
</body>
</html>
编写一个图表的过程
1.先创建html模板。
新建html文件,使用!来进行补全html内容。
2.引入min.js文件。
- 在head头部中引入:
<script src="echarts.min.js"></script>
3.在body中编写代码
1)准备容器。
<!--准备一个容器-->
<div id="main" style="width: 600px;height: 400px;"></div>
2)说明js类型
<script type="text/javascript">
3)创建实例
//创建实例
var myChart = echarts.init(document.getElementById('main'));
4)编写配置
即编写option中的内容
5)使用指定的配置项
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
如何编写option
option即echarts的核心代码,里面包括了图标的类型,数据等等内容,只有option编写的没有问题,才能让图表正确显示。
编写规则
配置项+对象+属性的格式。
如上述代码的title就是配置项,text就是对象,而后面’’ 中的内容就是属性。
而echarts的所有配置项请参考官方文档
echarts配置文档
官方配置文档:Documentation - Apache ECharts
欢迎关注,会更新很多有帮助的文章哦