Echarts.js折线图⽣成
Echarts是“开源”的,提供了创建多种多样的图表。包括折线图、坐标系、散点图等等之类的这⾥就不⼀⼀列举了。⼤家可以去查看
随便点开⼀个,⾥⾯是部分源码
左边是主要源码,右边是效果图
注意:只在script中写左边代码是不能显⽰的,只需要加两⾏代码就⾏了,后⾯会讲。
那么如何下载echarts.js
1 打开点击下载->点击在线定制
2 之后进⾏选择打包的图表(这⾥我是全选了)
3 点击下载即可
4 之后稍等⼏分钟等待打包成功。echarts.min.js就下载成功了
接下来就是简单的⼀个Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/echarts.min.js" ></script>
<title></title>
</head>
<body>
<!-- 为ECharts准备⼀个具备⼤⼩(宽⾼)的Dom -->
<div id="main" ></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.ElementById('main'));
// 指定图表的配置项和数据
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {如何下载javascript
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
// 使⽤刚指定的配置项和数据显⽰图表。
myChart.setOption(option);
</script>
</body>
</html>
需要加⼊:
1:获取到指定div进⾏初始化 var myChart = echarts.ElementById(‘main’)); 2:将指定的配置项和数据显⽰图标中
myChart.setOption(option);之后就可以显⽰了。
⼤体的效果就可以这样了。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论