用过几次,但是有点不长记性,为了防止长期不用又忘了,就在此做个记录。
1、进入官网。echarts的官网地址:echarts官网地址
1.1、打开官网,进入官方实例,有很多图表可供使用:
1.2、选择你需要的那一款点开(此处以我最近写的一个折线图为例):
左边区域是用来配置参数、修改样式的,可以直接在网页上修改你的数据、样式,这样效果比较明显;也可以复制到你的编辑器中慢慢修改,因为网页上的没有保存,万一点到该网站别的页面,再回来你修改的代码可能就没了。
2、创建html文件
首先建一个html文件,写一个div,并给一个id名,引入官方的echarts.js的文件,并另建一个js文件,也引入进来:
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站用户量与访问量关系图</title>
</head>
<body>
<div id="echartBox" style="width:1000px;height:800px"></div>
</body>
<script src="jquery-3.1.0.min.js" type="text/javascript" ></script>
<script src="echarts.min.js" type="text/javascript"></script>
<script src="siteEchart.js" type="text/javascript"></script>
</html>
3、编写js文件,引入option
将修改好的option数据引用到刚刚新建的js文件中,引用option的关键就是两步,一个是使用初始化echarts.init(),一个显示图表myChart.setOption(option)。代码中的option我就隐藏了,代码如下:
效果图示例:
至此,一个简单的图表就完成了,当然中间很多样式参数的修改我这里就没有完善了,可以根据需要及官方api进行详细修改。