Echart小小笔记

来源：互联网发布：mac双系统win8.1 编辑：程序博客网时间：2024/05/29 14:55

编程平台：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: '平均值'},                                    {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>

阅读全文

0 0