最近因为项目需要用到图形，所以在网上搜了一下，发现echarts很实用，我们做网站/应用的时候，很多需要数据统计报表,接下来就分享一下我的第一个echarts
首先你需要下载开发包，建议去官网http://echarts.baidu.com/下载，选择需要的版本，开发环境建议选择源代码版本，该版本包含了常见的警告和错误提示。
1、下载ECharts源码，我这里下载的是2.2.7版本的，如果不知道哪下载，百度一下ECharts，然后就能看到官网了。
2、下载后，可以看到build文件夹，如果不是为了调测，可以直接使用dist文件夹下的。echarts.js和echarts-all.js区别在于后者已经把map.js打包进去了。如果网站上不用map，应该使用echarts.js，这样因为文件小能减少加载时间。
3、把build下的文件拷贝到你想要放的工程目录中，我拷贝进来后把dist改成了echarts
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="./echarts/echarts-all.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title : {
text : 'ECharts 入门示例'
},
tooltip : {},
legend : {
data : [ '销量' ]
},
xAxis : {
data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]
},
yAxis : {},
series : [ {
name : '销量',
type : 'bar',
data : [ 5, 20, 36, 10, 10, 20 ]
} ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>效果图如下：
第一个echarts就完成啦。
629
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
