echart学习心得
2018-07-26 本文已影响86人
你的操作666
首先如何引入echarts框架在上一篇文章中已经说了，引入之后就可以绘制图形了，新手练习的时候是个柱状图，现在来画一下饼图。
首先来讲一下绘制出一个图形（无论是什么图形）都需要的几个要素：
1.首先是在head标签中引入echart库，就像下面这一张图的划红线出来的部分。
捕获.PNG
2.接下来为你的图形创建一块区域，让你的图形在其中显示出来。
捕获.PNG
3现在区域也创建好了，接下来就是图表的初始化
捕获.PNG
这里做一个进阶操作，也是易于理解的
var bingChart = echarts.init(document.getElementById('muu'));
这里面的bingChart，muu都是我自己定义的，初始化函数就这一句，其中bingChart放在后面说，muu是第二部创建那个div区域的ID(看我截图中的main)，这样在一页中有多个图表的话就能区分开了。
4.第四步，设置图表属性
捕获.PNG
这里详细讲一下这些个参数都是代表啥：
name:'访问来源',
//系列名称，如果启用legend，该值将被legend.data索引相关
type:'pie',
//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
radius:'55%',
//这个应该是负责这个饼图占你所创建出来容纳它的div大小比例的，可以改一下参数自己体会一下
data:[
{value:235,name:'视频广告'},
{value:274,name:'联盟广告'},
{value:310,name:'邮件营销'},
{value:335,name:'直接访问'},
{value:400,name:'搜索引擎'}
]
//饼图的数据，这些都是自己填充的，日后肯定要用到从excel或者从数据库中导入，先不管
5.第五步，参数都设置好了，就只剩下
bingChart.setOption(option);
放段完整代码体会一下，这段代码是饼图和柱状图的结合，很有益于日后画多个图表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/echarts.min.js"></script>
<title>Title</title>
</head>
<body>
<div id="muu" style="height: 400px;width: 600px;"></div>
<script type="text/javascript">
var bingChart = echarts.init(document.getElementById('muu'));
option={ <!-- 定义图表函数 -->
series:[
{
name:'访问来源',
type:'pie',
radius:'55%',
data:[
{value:235,name:'视频广告'},
{value:274,name:'联盟广告'},
{value:310,name:'邮件营销'},
{value:335,name:'直接访问'},
{value:400,name:'搜索引擎'}
]
}]
}
bingChart.setOption(option);
</script>
//下面是柱状图
<div id="main" style="height: 400px;width: 600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
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>
