6. 作业案例之散点图

option = {
    xAxis: {
        type:'value',
        scale:true
    },
    yAxis: {
        type:'value',
        scale:true
    },
    series: [{
        type: 'scatter',
        symbolSize: 20,
        data: [
            [170, 80],
            [164, 51],
            [158, 50],
            [174, 79],
            [184, 90],
            [180, 77],
            [160, 49],
            [177, 84],
            [190, 96],
            [150, 46],
            [169, 47]
        ],
    }]
};

7. 作业案例之柱状图

有了上面的知识，学习柱形图也很简单，有些东西都是通用的，现在来介绍柱形图方面的知识，先看官网的某个案例：https://echarts.apache.org/examples/zh/editor.html?c=bar-tick-align
一看，需要注意的是series里的type和barWidth,其它的上面已经介绍过了，如下图：

bar代表柱形图，line代表折线图，这里要分清，跟bar相关的属性是barWidth，柱形的宽度，不用说，更详细请看下图。

下一个，左右拖动工具：

对于上副图的左右滑动，宽度可能会随着滑动变大，可以用barMaxWidth对其做限制，写在series里，代码如下：

barMaxWidth:"60px", //最大不要超过60%

说到宽度，应该是柱形与柱形之间的距离，有两个名词，一个是barGap和barCategoryGap，第一个是不同series(就是series里面的两个对象)，同一个刻度线上的柱形之间的距离。第二个是同一个series上，柱形与柱形的距离。
最后，如果柱形图的x轴和y轴交换，就变成了条形图，本质上还是柱形图，如图：

8. 作业案例之进度柱状图

网址：https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category

完整代码：

var myColor=["#1089E7","#F57474","#56D0E3","#F8B448","#8B78F6"];
option = {
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        show:false
        /*type: 'value',
        boundaryGap: [0, 0.01]*/
    },
    yAxis: [
        {
            type: 'category',
            data: ['HTML5', 'CSS3', 'JAVASCRIPT', 'VUE', 'NODE', 'JQUERY'],
            axisLine:{
                show:false
            },
            axisTick:{
                show:false
            },
            inverse:true //反向坐标，不然HTML5在最底下
        },
        {
            type: 'category',
            data: [702,350, 610, 793, 664, 700],
            axisLine:{
                show:false
            },
            axisTick:{
                show:false
            },
            inverse:true
        }
    ],
    series: [
        {
            name: '条',
            type: 'bar',
            data: [70, 34, 60, 78, 69, 71],
            itemStyle:{
                normal:{
                    barBorderRadius:10,
                    color:function(params){//params存的是2011年的六个柱子(对象)的索引号
                        //console.log(params);
                        //注意打印出来的params里面有dataIndex属性，index是索引的
                        //意思，从0开始，右图有六个柱子，那么索引就是0~5，
                        //刚好跟上面的myColor的数组索引是一致的，那么就可以来完成
                        //五彩缤纷的柱子了。
                        return myColor[params.dataIndex];
                    }
                },
                
            },
            barCategoryGap:30, //柱子之间的距离,barGap是同一个类型下的柱子的距离
            //barWidth:14 //柱子的宽度
            //图形上的文本标签
            label:{
                normal:{
                    show:true,
                    position:"inside",//inside表示图形内显示
                    formatter:"{c}%"//{c}会自动解析data里面的数据
                }
            },
            yAxisIndex:0
        },
        {
            name: '框',
            type: 'bar',
            data: [100, 100, 100, 100, 100, 100],
            itemStyle:{
                color:"none",
                borderColor:"#00c1de",
                borderWidth:3,
                barBorderRadius:15
            },
            yAxisIndex:1
        }
    ]
};

9. 作业案例之饼图

首先，打开网址：https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut，如图：

完整代码：

option = {
    tooltip: {
        trigger: 'item',//axis是针对直角坐标系的，否则，将没有提示框组件
        formatter: '{a} <br/>{b}: {c} ({d}%)'  //这里的{a}在tooltip那里已经讲过了
    },
    legend: {
        orient: 'vertical', //垂直显示
        left: 10,
        //data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],//可以省略，因为可以看
        //series里面的数据
        itemWidth:10,
        itemHeight:10,
        //bottom:10
        textStyle:{
            //color:"red",
            fontSize:"16"
        }
    },
    series: [
        {
            name: '访问来源',
            type: 'pie', //pie表示饼图
            radius: ['50%', '70%'],//直角坐标系是通过grid来修改图表的大小的，那么此处
            //饼图是通过radius来修改饼图大小的，数值的第一个50%表示饼图的内部半径，
            //第二个70%表示外部圆的半径，如右图:
            //如果我把50%改为0%，就成了真正意义上的饼图
            center:["60%","50%"],//这个可以修改饼图的位置，此处为居中
            avoidLabelOverlap: false,
            //avoidLabelOverlap是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。
            label: { //label为标签，就是给每个系列贴上一个标签，别人一看就知道谁谁谁
                show: false, //表示对应的标签一上来是不显示的，要跟下面emphasis里的label做对比
                /*position: 'center'*/ //表示中间显示
            },
            emphasis: {//emphasis这东西，我们在前面都有接触过，
            //在讲散点图也好，series，toolbox这些都有涉及到emphasis，经过对比，
            //它们的共同点都是当鼠标移入到某个item的时候，触发的事件，起到了一种
            //强调的作用，那么右图是不是这个道理呢？当我们移入到饼图的item，也就是
            //外面的哪些圈圈，你一移入，在饼图的外围就会有对应的文字来强调你是"搜索引擎"
            //还是啥的，没错，像这种外围提示信息在鼠标移入的时候就是在emphasis里面配置的，如果我们把
            //它给注释掉的话，鼠标移进去就不会有外围文字的提示信息了，所以，以后遇到emphasis的时候
            //就要注意了，它跟你鼠标移入有关，起到的是一个强调作用。
                label: {
                    show: true,//当鼠标移进去从上面label属性的show为false就是不显示变为显示，如右图的"搜索引擎"
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: { //连接线
                show: true
            },
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
};

接下来是饼形图的升级，叫南丁格尔玫瑰图，网址：https://echarts.apache.org/examples/zh/editor.html?c=pie-roseType

经过了跟普通饼形图的对比，发现南丁格尔玫瑰图多了一个roseType属性，因为有了这个属性，才会呈现出南丁格尔效果。

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        left: 'center',
      /*top: 'bottom',*/
        //data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
    },
    series: [
        {
            name: '半径模式', //是通过圆的半径来表示每一个模块的大小
            type: 'pie',
            radius: [20, 110], //[内圆半径，外圆半径]
            center: ['25%', '50%'],
            roseType: 'radius',//radius表示以半径的形式来展示,这个是重点，可以形成南丁格尔玫瑰图
            label: {
                show: false
            },
            emphasis: {
                label: {
                    show: true
                }
            },
            data: [
                {value: 10, name: 'rose1'},
                {value: 5, name: 'rose2'},
                {value: 15, name: 'rose3'},
                {value: 25, name: 'rose4'},
                {value: 20, name: 'rose5'},
                {value: 35, name: 'rose6'},
                {value: 30, name: 'rose7'},
                {value: 40, name: 'rose8'}
            ]
        },
        {
            name: '面积模式',
            type: 'pie',
            radius: [30, 110],
            center: ['75%', '50%'],
            roseType: 'area',//radius表示以面积的形式来展示
            labelLine:{
                length:100,//length是链接图形的线条
                length2:30  //是与length拼接的那条线，右图中水平的那条线
            },
            data: [
                {value: 10, name: 'rose1'},
                {value: 5, name: 'rose2'},
                {value: 15, name: 'rose3'},
                {value: 25, name: 'rose4'},
                {value: 20, name: 'rose5'},
                {value: 35, name: 'rose6'},
                {value: 30, name: 'rose7'},
                {value: 40, name: 'rose8'}
            ]
        }
    ]
};

10. 跟随屏幕缩放适配

window.addEventListener("resize",function () {
    this.myChart.resize(); //如果不起作用，试着把外层盒子的宽度去掉，不要写固定值
})

11. 学习案例之雷达图

 雷达图又称为蜘蛛网图，将多个纬度的数据量映射到起始于同一个圆心的坐标轴上，结束于圆角边缘，然后将同一组的点使用线连接起来。它适用于多维度数据集，比如游戏人物有多个指标，什么攻击值呀，输出值呀等等这些。表示一个物体在多个纬度之下的综合信息。比如：

上面5个评分，就有5个纬度，5个纬度在雷达图就是5个角，那么我们怎么用雷达图来表示上图的数据呢？网址：https://echarts.apache.org/examples/zh/editor.html?c=radar，打开这个网址，根据它做改造，完成雷达图。

特点：雷达图可以用来分析多个纬度的数据与标准数据的对比情况，通过它不仅可以看到自身的情况指标还可以跟其它人进行对比，比如上述的华为跟中心的对比。

12. 学习案例之仪表盘

 仪表盘主要用在进度把控以及数据范围的监测。比如用汽车仪表盘，用仪表盘来监控商品库存的情况等等，它可以更直观的表现出某个指标的进度或实际情况。网址：https://echarts.apache.org/examples/zh/editor.html?c=gauge，打开该网址，进行改造，代码如下：


完整代码：

option = {
    tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
        {
            name: '库存指标',
            type: 'gauge', //翻译过来叫"测量"，此处代表该图表是仪表盘
            detail: {formatter: '{value}%'},
            startAngle:180,//默认是225，startAngle要大于endAngle
            endAngle:-90, //默认是-45
            splitNumber:2,//如右图0~50,50~100
            data: [
                //一个对象表示一个指针，两个对象就表示两个指针
                {
                    value: 97, 
                    name: '库存量',
                    itemStyle:{ //控制指针的样式
                       /* color:"blue"*/
                    }
                },
                 /*{
                    value: 50, 
                    name: '库存量',
                    itemStyle:{ //控制指针的样式
                        color:"pink"
                    }
                }*/
            ],
            axisTick:{
                show:true,
                splitNumber:10,//0~50分10段,50~100也分为10段，因为上面splitNumber分为了两段，所以每一段又分10段
                length:18,
                lineStyle:{
                    color:"width"
                }
            },
            axisLabel:{
                show:true,
                formatter:function(arg){
                    switch(arg+""){
                        case '0':return "非常弱";
                        case '50':return "弱";
                        case "100":return "强";
                    }
                }
                /*dformatter:function(arg){ //注意这不是formatter，而是dformatter，如果是这样，就只是显示数字
                    switch(arg+""){
                        case '50':return "弱";
                        case "100":return "强";
                    }
                }*/
            },
            /*min:50,
            max:150*/
            //max和min是控制仪表盘的数值范围的，默认是0~100
            splitLine:{//表示分割线，0~50,50~100。那么50哪里就是分割线
                show:true,
                length:50,
                lineStyle:{
                    width:15
                }
            },
            pointer:{
                color:"auto"//auto表示直接去所指向的区域取色
            },
            title:{
                show:true,
                offsetCenter:['-65%',-30]//表示[x,y],这里表示往左偏移百分之65，往上偏移30px
            },
            detail:{
                backgroundColor:"yellow",
                offsetCenter:['-60%',50],
                formatter:"{value}%"
            }
        }
    ]
};

13. 地图(包括疫情实时图，点亮城市)

<script src="js/china.js"></script>

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
           /* width: 900px;*/
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.5.1.js"></script>
<script src="js/china.js"></script>
<div class="box"></div>  <!--有了这个容器，就可以把图表丢在这里面去-->
<script language="javascript">
    //初始化实例对象 echarts.init(dom容器);
    var myChart = echarts.init(document.querySelector(".box"));
    //指定配置项和数据
    // 指定图表的配置项和数据
    option = {
        title:{
            text:"中国疫情实时地图"
        },
        tooltip: {

        },
        series: [
            {
               name:"确诊人数",
               type:"map",
               map:"china",
               label:{
                   //控制对应省份地区的汉字
                   show:true  //默认为false,如果为true，那么地图一渲染包括各个省份的名字也跟随地图一起渲染
                   //既然是控制汉字的，那么像color，fontSize，formatter啊这些它都有，我这里就不列出来了。
               },
               zoom:1, //控制地图的放大缩小，如果你觉得地图有点小，可以使用zoom属性来对它放大，如果值为2，表示2倍放大
               roam:true, //控制滚轮放大缩小
               itemStyle:{ //控制地图版块的
                   areaColor:"pink" //默认色为#eee
               },
               emphasis:{//控制鼠标滑过之后的背景色和字体颜色
                   itemStyle:{
                       areaColor:"#83b5e7" //默认是不是yellow
                   },
               },
               data:[ //用来展示后台给的数据的，里面是如果是每一个对象，那么每个对象都得有name和value

               ]
            }
        ],
        visualMap:[{
            type:"piecewise",  //翻译过来是分段，默认分成5条
            show:true,
            /* splitNumber:4,*/
            pieces:[
                {min:10000},
                {min:1000,max:9999},
                {min:100,max:999},
                {min:10,max:99},
                {min:1,max:9}
            ],
            //align:"right", //这样的话，方块在右边，字在左边，默认是left
            //orient:"horizontal"  //控制是横向显示还是竖向显示
            //showLabel:false  为false表示数字被隐藏了
            inRange:{
                //symbol:"circle"
                symbol:"rect",
                color:["#ffc0b1","#9c0505"]
            },
            itemWidth:20,
            itemHeight:10
        }]
    };
    myChart.setOption(option);
    window.addEventListener("resize",function () {
        this.myChart.resize(); //如果不起作用，试着把外层盒子的宽度去掉，不要写固定值
    })
    $.ajax({
        type: "post",
        url: "https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427",
        dataType: "jsonp",//返回的数据类型格式,jsonp解决跨域问题
        success: function(data){
            var list = data.data.list.map(item=>({name:item.name,value:item.value}));//map是循环遍历方法，我们只要name和value
            option.series[0].data = list;
            myChart.setOption(option);
        },
        error:function(msg){
            console.log(msg);
        }
    });
</script>
</body>
</html>

把上面代码copy到你编辑器就可以了，自己再去改改，效果如下：

可以对照着http://cov.aiiyx.cn来看，它是中国疫情数据可视化图。

练习：利用搜索框输入城市名来点亮城市

通过疫情实时地图，我们基本对地图的相关配置有了了解，再通过一个点亮城市的练习，加深理解，下面是我自己写的代码实现，供大家参考：

项目结构(在前面有网盘链接，供下载)：

完整代码：

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css" target="_blank" rel="external nofollow"   media="all" type="text/css">
    <style>
        .box{
            /* width: 900px;*/
            height: 700px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.5.1.js"></script>
<script src="js/china.js"></script>
<script src="layui/layui.js"></script>
<div class="box"></div>  <!--有了这个容器，就可以把图表丢在这里面去-->
<script language="javascript">
    var diming = "";
    // 一种后台传来的数据带有坐标，一种是前台保存坐标
    var data = [
        {name:'泉州'},
        {name:'厦门'},
        {name:'福州'},
        {name:'延安'},
        {name:'沈阳'},
        {name:'苏州'},
        {name:'杭州'},
        {name:'广州'}
    ];
    // 位置对应的坐标
    var geoCoordMap = {
        "泉州":[118.58,24.93],
        "厦门":[118.1,24.46],
        "福州":[119.3,26.08],
        "延安":[109.47,36.6],
        "沈阳":[123.38,41.8],
        "苏州":[120.62,31.32],
        "杭州":[120.19,30.26],
        "广州":[113.18,23.10]
    };
    // 将{name:xx}处理成{name:xx,value:[x,y]};x,y为横纵坐标
    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord
                });
            }
        }
        return res;
    };
    //初始化实例对象 echarts.init(dom容器);
    var myChart = echarts.init(document.querySelector(".box"));
    var zData = convertData(data);
    var option = {
        backgroundColor: '#404a59',
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                return params.name;
            }
        },
        geo: {
            map: 'china',
            roam:true, //控制滚轮放大缩小
            label: {
                emphasis: {
                    show: false //不显示省份名称
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#fff',
                    borderColor: '#000'
                },
                emphasis: {
                    areaColor: '#f00'
                }
            }
        },
        series: [
            {
                type: 'effectScatter',
                showEffectOn:'render',//默认值是render，控制鼠标移入产生动画
                coordinateSystem: 'geo',
                data: zData,
                // 控制点大小
                symbolSize: function (arg) {
                    layui.use(['form'], function(){
                        var form = layui.form;
                        //监听提交
                        form.on('submit(demo1)', function(data){
                            var city = data.field.title;//输入的城市名
                            diming = city;
                            myChart.setOption(option);
                            return false;
                        });
                    })
                    if(diming==""){
                        return 2;
                    }else{
                        var zuobiao  = geoCoordMap[diming];//根据城市名拿到坐标
                        if(arg.toString() == zuobiao.toString()){
                            return 30;
                        }else{
                            return 2;
                        }
                    }
                },
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    color:"red",
                    emphasis: {
                        borderColor: 'yell',
                        borderWidth: 1
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
</script>
<div style="margin: 10px auto;border: 1px solid red;width: 400px">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">城市：</label>
            <div class="layui-input-block" style="width: 200px">
                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入城市名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">定位</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>

14. echarts涉及到的英文名