Echart小小笔记

最新推荐文章于 2023-11-14 11:16:59 发布

*Atman

最新推荐文章于 2023-11-14 11:16:59 发布

阅读量245

点赞数

编程平台：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>

*Atman

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echart小小笔记

编程平台：webstorm目标：编写一个折现图和地图首先建立一个‘div’标签来展示Echart图表：引入模块化单文件echarts.js：为JavaScript配置echarts在线路径： require.config({ paths:{
复制链接

扫一扫