您的位置：首页 > 其它

Echart小小笔记

2017-07-13 16:58 148 查看
编程平台：webstorm目标：编写一个折现图和地图首先建立一个‘div’标签来展示Echart图表：<div id="main" style="height:400px"></div>
引入模块化单文件echarts.js：<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
为JavaScript配置echarts在线路径：                                             
<script type="text/javascript">
require.config({
paths:{
echarts:'http://echarts.baidu.com/build/dist'
}
});

require(
[
'echarts',
'echarts/chart/bar'//使用柱状图加载bar模块，按需加载。
],function(ec){
//基于准备好的dom，初始化echarts图表
var myChart=ec.init(document.getElementById("main"));

在require内新建一个option变量，用来存储图表的具体内容，然后在后面的代码中调用myChart的setOption()方法来将数据传递进去：
继续加载echarts和所需图表（bar，line,scatter,k,pie,radea,chord,map等），回调函数中初始化图表：
var option = {
------（代码块） //为对象设置具体的数值
}myChart.setOption(option);


折现图中option下的代码块有：

var  option = {    title:{text:"图名",subtext:"纯属虚构"},//正标题和副标题
tooltip:{  show:true,trigger:axis/item}，//鼠标和图表的交互
legend:{data:['销量']},//表名
xAxis:[{type:"category",data:["袜子","裤子","裙子","上衣","鞋子"]}],//横轴
yAxis:[{type:"value"}], //纵轴
series:[{"name":"销量","type":"bar","data":[20,40,30,60,70] ，markpoint:{data:[type:'max',name:'最大值']，markline:
{data:[type:'max',name:'最大值'},smooth:'true',itemStype:{normal:{areaStyle:{type:'default'}}}]//name为表格上方线条的名字，data为线条绘制的数据
 ，markpoint为特殊点绘制，markline为特殊线绘制，smooth是吧折线平缓，itemStype是填充线条颜色的绘制 ，默认线条颜色一样 }; //为echarts对象加载数据

提供一个完整代码例子：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>示例100第一章</title>
</head>
<body>
<div style="margin:100px;min-width:600px;width:100%;height:600px;">
<div id="main" style="height:600px;width:100% !important;padding:5px;overflow: hidden;"></div>
</div><script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
require.config({
paths:{
echarts: 'http://echarts.baidu.com/build/dist'
}
});
require(
['echarts',
'echarts/chart/bar',
'echarts/chart/line'
],
function(ev){
var myChart=ev.init(document.getElementById("main"));
var option={
title:{
text:"排水统计表",
subtext:"蒸发降水排水统计"
},
tooltip:{
show:true,
trigger:"axis"
},
legend:{data:['蒸发量',"降水量","排水量"]},
toolbox:{
show:true,
feature:{
mark:{show:true},
dataView:{show:true,readOnly:true},//数据视图
magicType:{show:true,type:["line","bar"]},
restore:{show:true},
saveAsImage:{show:true}
}
},
xAxis:[{type:"category",data:["一月","二月","三月","四月","五月"]}],
yAxis:[{type:"value"}],
series:[
{   name:"蒸发量",type:"line",data:[20,35,30,35,40],
markPoint:{//标记显示
data:[
{type : 'max', name: '最大值', symbolSize:18},
{type : 'min', name: '最小值'}
]
},
markLine : {//划线
data : [
{type : 'average', name: '平均值
4000
'},
{type : 'max', name: '最大值'}
]
}/*markLine:[
{data:{type:"max",name:"最大值"}},{data:{type:"min",name:"最小值"}}
]*/
/*markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}*/
},
{name:"降水量",type:"bar",data:[50,60,70,55,40],
markPoint:{data:[
{name:"最高",value:70,xAxis:2,yAxis:70},
{name:"最低",value:40,xAxis:4,yAxis:40}
]}},
{name:"排水量",type:"bar",data:[10,20,30,25,30]}
]
};
//为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航