7-31 工作计划：实现折线图，柱状图，饼图等基本图形。
折线图柱状图并存，提示框，图例，工具箱，最值平均值的使用。
完成情况：已完成.
8-1工作计划：
学习并实现K线图的分布，本地数据的展示，如证券的折线图。
7-31效果展示：折线图和柱状图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--首先引入echarts插件-->
<script type="text/javascript" src="../js/echarts.min.js"></script>
</head>
<body>
<!--为Echarts建立一个固定高宽的DOM-->
<div id="main" style= "width:900px;height: 600px;"></div>
<script type="text/javascript">
<!--基于建立好的DOM，进行Echarts初始化-->
var mychart = echarts.init(document.getElementById('main'));
//设置展现的图配置项和数据
var option = {
//该展示图的标题
title: {
text: 'ECharts入门展示',
subtext:'子标题吕泽坤',
left:'40',
borderColor:'#ccc',
borderWidth:'2',
textStye:{
fontsize:20,
}
},
//工具箱，下载箭头保存图片
toolbox: {
show :true,//是否显示
feature: {
saveAsImage:{
show :true,
title:'保存图片'
},
restore:{
show:true,
title:'还原',
},
dataView:{
show:true,
title:'数据视图'
},
dataZoom:{
show:true,
zoom:'区域缩放',
back:'区域还原缩放'
},
magicType:{
show:true,
type:['line','bar'],
title:{line:'切换为折线图',bar:'切换为柱状图'}
},
}
},
//提示框的添加
tooltip:{
trigger: 'axis'//坐标轴触发。axis多用于柱状图折线图。
},
//图例
legend: {
data: ['销量','产量'],
},
//x轴
xAxis: {
data:['篮球','足球','网球','橄榄球','棒球','冰球']
},
//Y轴
yAxis: {
},
//数据
series:[{
name:'销量',
type:'bar',
data:[5,10,30,25,24,27],
markPoint:{
//这里用的是V3.x版本，才能出现点击最大值，V4.x没有显示最大值。多条折线
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值',symbol:'arrow'}
]
},
markLine:{
data:[
{type:'average',name:'平均值',}
]
}
},
{
name: '产量',
type: 'line',
data: [7, 30, 50, 11, 40, 80]
}
]
};
//使用上面指定的配置资源和数据显示图表
mychart.setOption(option);
</script>
</body>
</html>
饼状图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/echarts.min.js" ></script>
</head>
<body>
<div id = "main" style="width:900px;height:600px"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option= {
title:{
text:'测试饼图',
subtext:'小标题',
x:'center'
},
tooltip:{
trigger:'item',
formatter:"<a><br/>{b}: {c}({d}%)",
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series:[{
name:'范文来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
仪表图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/echarts.min.js" ></script>
<title></title>
</head>
<body>
<div id ="main" style="width：900px;height: 600px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip:{
formatter:"{a} <br/> {b}:{c}%"
},
toolbx:{
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '业务指标',
type: 'gauge',
detail: {formatter:'{value}%'},
data: [{value: 32, name: '完成率'}]
}
]
};
myChart.setOption(option)
setInterval(function () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart.setOption(option, true);
},2000);
</script>
</body>
</html>
问题与总结：
- 基本的工具栏：saveAsImage：保存图片，restore:还原；dataView:数据视图，dataZoom：
Zoom是区域缩放，back是区域还原;magicType:是图形的切换。
- tooltip是提示框；axis是用于折线，柱状图的提示框。Item适用于的饼图等提示框
- 利用markLine和markPoint记性标记最大最小平均值。Arrow,pin等可用来表示图标的方向上下。
- 出现错误：主要与漏写符号，在多折线提示内容时候，提示框无法显示最大值，平均值等。即在鼠标滑过最大值处时候，没有显示该最大值得内容。原因：ecahrts.min.js的版本高，采用V3.x版本。
- 饼图中formatter:"<a><br/>{b}: {c}({d}%)",用来显示提示框的内容。也可显示其他形状的图形。多折线时候可以进行相关的{a0},{b0},{c0},{d0}区分。
legend: {orient: 'vertical',来显示图标的排列方式。