9.26 数据可视化

数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律。

常见的数据可视化库

Echarts

Echarts是百度前端团队做的基于html5-canvas的开源图表绘制组件

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。 ECharts 遵循 Apache-2.0 开源协议，免费商用。

ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。 Echarts又被称为可视化图表，其实就是一个做图表的插件获取数据：https://datav.aliyun.com/portal/school/atlas/area_selector

这一类的插件比较多，比如：

D3.js 目前web端评价最高的Javascript可视化工具库（入手难）
Echarts.js 百度出品的一个开源Javascript数据可视化库
AntV 蚂蚁金服全新一代数据可视化解决方案等等
Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
ichartjs是一款优秀的国产开源插件，作者是王鹤，使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。

五分钟上手Echarts

官网 - 下载 - 五分钟上手Echarts

步骤：

下载并引入echarts.js文件
准备一个具备大小的DOM容器
初始化echarts实力对象
制定配置项和数据（option）
将配置项设置给echarts实例对象

Echarts基础配置

了解配置中每个模块的主要作用即可


需要了解的主要配置：series，xAxis，yAxis，grid，tooltip，title，legend，color

title：设置图表的标题
tooltip：图表的提示框组件
- trigger：触发方式
legend：图例组件
grid：网格配置，grid可以控制线型图，柱状图，图表大小
- containLabel：是否显示刻度标签，如果为true就是现实，否则反之
toolbox：工具箱组件，可以另存为图片等功能
xAxis：设置x轴的相关配置
- boundarGap：是否让我们的线条和坐标轴有缝隙
yAxis：设置y轴的相关配置
series：系列图表配置，他决定着现实哪种类型的图表
color：调色盘颜色列表

经常使用的效果

柱状图 - bar

![[1280X1280 (19).PNG]]

HTML 复制代码

<div id="main" style="width: 900px;height:600px; border:1px solid red;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            // 标题
            title: {
                text: 'ECharts 入门示例',
                show: false,
                left: 'left',
                top: 'bottom',
                textStyle: {
                    color: '#f00',
                    fontSize: 18
                },
                subtext: '副标题'
            },
            // 工具箱
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {
                        show: true,
                        title: 'save as image'
                    }
                }
            },
            // 图例
            legend: {
                //图例的文字要和series中数据的name相同
                data: ['销量']
            },
            // x轴
            xAxis: {
                //类目(category)
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            // 数据
            series: [{
                name: '销量',
                //柱状图
                type: 'bar',
                //数据
                data: [5, 20, 36, 100, 10, 20]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

折线图 - line

HTML 复制代码

<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
  // 指定图表的配置项和数据
  var option = {
    // 图表的标题
    title: {
      text: 'ECharts 入门示例'
    },
    // 图标的工具：保存为图片，还原，数据视图，区域绽放，图表形式的切换
    toolbox: {
      show: true,
      feature: {
        // 保存为图片
        saveAsImage: {
          show: true
        },
        restore: {
          show: true
        },
        dataView: {
          show: true
        },
        dataZoom: {
          show: true
        },
        magicType: {
          type: ['line', 'bar', 'stack', 'tiled']
        }
      }
    },
    // 图示
    legend: {
      data: [{
        name: '销量',
        icon: 'arrow'
      }, '产量']
    },
    // x轴
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "马来", 'pen', 'qun']
    },
    // y轴
    yAxis: {},
    series: [{
      //对应销量这个类目的数据，
      name: '销量',
      type: 'bar', //柱状图
      data: [5, 20, 36, 10, 10, 20, 30, 20, 30]
    }, {
      //对应产量这个类目的数据，
      name: '产量',
      type: 'line', //折线图
      data: [7, 30, 50, 11, 40, 180, 40, 50, 60]
    }]
    };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
</script>

饼形图-pie

![[2f5cce18-fc61-48e1-bf13-0a6896c07dec (1).png]]

HTML 复制代码

<!-- 为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: '某站点用户访问来源',
      subtext: '纯属虚构',
      // 标题的位置
      x: 'center'
    },
    tooltip: {
      trigger: 'item',
      // 参考课件
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      // 垂直放置
      orient: 'vertical',
      left: 'left',
      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [{
      name: '访问来源',
      type: 'pie',
      // 相对于dom的半径
      radius: '70%',
      //相对于dom水平和垂直的位置
      center: ['50%', '60%'],
      data: [{
        value: 335,
        name: '直接访问'
      }, {
        value: 310,
        name: '邮件营销'
      }, {
        value: 234,
        name: '联盟广告'
      }, {
        value: 135,
        name: '视频广告'
      }, {
        value: 1548,
        name: '搜索引擎'
      }]
    }]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
</script>

雷达图 - radar

![[1ae78214-ad10-4aca-8611-144093f82b07.png]]

HTML 复制代码

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 容器 -->
    <div id="chart1" style="width: 400px;height: 400px;border: 1px solid #000; margin-left: 80px;"></div>
  </body>
</html>
<script type="text/javascript">
  // 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
  var chart1 = echarts.init(document.getElementById("chart1"));
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '您跑赢了32%资产相近的客户',
      top: '90%',
      left: '23%',
      textStyle: {
        color: '#666',
        fontSize: 14,
      }
    },
    radar: [{
      radius: 70,
      name: {    // (圆外的标签)雷达图每个指示器名称的配置项。
        formatter: '{value}',
        textStyle: {
          fontSize: 12,
          color: '#A2A5A9'
        }
      },
      nameGap: 15,        // 指示器名称和指示器轴的距离。[ default: 15 ]
      splitNumber: 4,    // (这里是圆的环数)指示器轴的分割段数。[ default: 5 ]
      shape: 'polygon',   // 雷达图绘制类型，支持 'polygon'(多边形) 和 'circle'(圆)。[ default: 'polygon' ]
      axisLine: {    // (圆内的几条直线)坐标轴轴线相关设置
        lineStyle: {
          color: '#fff',   // 坐标轴线线的颜色。
          width: 0,        // 坐标轴线线宽。
          type: 'solid',   // 坐标轴线线的类型。
        }
      },
      splitLine: {        // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
        lineStyle: {
          color: '#313339',    // 分隔线颜色
          width: 2,           // 分隔线线宽
        }
      },
      splitArea: {         // 坐标轴在 grid 区域中的分隔区域，默认不显示。
        show: true,
        areaStyle: {      // 分隔区域的样式设置。
          color: ['rgba(250,250,250,0.9)','rgba(200,200,200,0.3)'],       // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
        }
      },
      indicator: [{text : '收益能力',max:100},
                  {text : '风险控制',max:100},
                  {text : '盘面感知',max:100},
                  {text : '仓位控制',max:100},
                  {text : '选股能力',max:100}]
    }],
    series: [{
      name: '雷达图',    // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
      type: 'radar',      // 系列类型: 雷达图
      itemStyle: {       // 折线拐点标志的样式。
        normal: {      // 普通状态时的样式
          lineStyle: {
            width: 0
          },
          opacity: 0
        },
        emphasis: {      // 高亮时的样式
          lineStyle: {
            width: 0
          },
          opacity: 1
        }
      },
      data: [{        // 雷达图的数据是多变量（维度）的
        name: '女',                 // 数据项名称
        value: [85, 63, 37, 20, 84],        // 其中的value项数组是具体的数据，每个值跟 radar.indicator 一一对应。
        symbol: 'circle',                   // 单个数据标记的图形。
        symbolSize: 5,                      // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
        label: {                    // 单个拐点文本的样式设置
          normal: {
          show: true ,             // 单个拐点文本的样式设置。[ default: false ]
            position: 'top',        // 标签的位置。[ default: top ]
            distance: 3,            // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
            color: '#A2A5A9',          // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
            fontSize: 14,           // 文字的字体大小
            formatter:function(params) {
              return params.value;
            }
          }
        },
        itemStyle: {                // 单个拐点标志的样式设置。
          normal: {
            borderColor: '#285DAD',       // 拐点的描边颜色。[ default: '#000' ]
            borderWidth: 8,                        // 拐点的描边宽度，默认不描边。[ default: 0 ]
          }
        },
        lineStyle: {                // 单项线条样式。
          normal: {
            opacity: 0.5           // 图形透明度
          }
        },
        areaStyle: {                // 单项区域填充样式
          normal: {
            color: '#285DAD'       // 填充的颜色。[ default: "#000" ]
          }
        }
      }
     ]
    }, ]
  };
  // 使用刚指定的配置项和数据显示图表
  chart1.setOption(option)
</script>

散点图 - scatter

![[239fe49a-ca21-4daf-bea2-138890a8cf94.png]]

HTML 复制代码

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="box" style="height:400px;width: 800px;padding: 20px"></div>
<script>
  // 获取到这个DOM节点，然后初始化
  var myChart = echarts.init(document.getElementById("box"));
  // app.title = '气泡图';
  var data = [
    [[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,38195258,'Poland',1990],[19349,69.6,147568552,'Russia',1990],[10670,67.3,53994605,'Turkey',1990],[26424,75.7,57110117,'United Kingdom',1990],[37062,75.4,252847810,'United States',1990]],
    [[44056,81.8,23968973,'Australia',2015],[43294,81.7,35939927,'Canada',2015],[13334,76.9,1376048943,'China',2015],[21291,78.5,11389562,'Cuba',2015],[38923,80.8,5503457,'Finland',2015],[37599,81.9,64395345,'France',2015],[44053,81.1,80688545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311050527,'India',2015],[36162,83.5,126573481,'Japan',2015],[1390,71.4,25155317,'North Korea',2015],[34644,80.7,50293439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,38611794,'Poland',2015],[23038,73.13,143456918,'Russia',2015],[19360,76.5,78665830,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321773631,'United States',2015]]
  ];
  //依次为横坐标、纵坐标(-10到10之间)、圆形面积，第三个参数为圆形半径，约定最小为5px,最大值为20
  var data_buy11= [[-6,4,15],[-8,-2,25],[-4,4,35]]; //[[-6,4,20],[-8,-2,15],[-4,4,20]];  //买入上涨区
  var data_buy12= [[2,-4,20]]; //[[2,-4,5]];  //买入下跌区
  var data_sell11= [[-6,4,20],[-8,-2,15]]; //[[-6,4,20],[-8,-2,15] ]; //卖出上涨区
  var data_sell12= [[2,-4,18]]; //[[2,-4,5]];      //卖出下跌区
  var colorList_buy = ['#FB4B4B','#4BB036'];
  var option_pm_sell= {
    splitLine:false,
    grid: {
      borderWidth:0,
      x:40,
      y: 5
    },
    tooltip : {
      trigger: 'axis',
      showDelay : 0,
      axisPointer:{
        type : 'none'
      }
    },
     xAxis : [
      {
        min:-10,
        max:10,
        axisLine:{
          show:false
        } ,
        splitNumber:10,
        type : 'value',
        axisLabel : {
          formatter: '{value} '
        }
      }
    ],
    yAxis : [
      {
        type : 'value',
        min:-10,
        max:10,
        axisLine:{
          show:false
        } ,
        splitNumber:10,
        axisLabel : {
          formatter: '{value} '
        }
      }
    ],
    series : [
      {
        name:'scatter1',
        type:'scatter',
        data: data_sell11,   //依次为横坐标、纵坐标、圆形面积，面积最大值约定为20
        symbol:"circle",
        // itemStyle:itemStyle_sell,
        symbolSize: function (value){
          return value[2];
        }
      },
       {
        name:'scatter2',
        type:'scatter',
        data: data_sell12,
        symbol:"circle",
        // itemStyle:itemStyle_sell,
        symbolSize: function (value){
          return value[2];
        }
      }
    ]
  };
  myChart.setOption(option_pm_sell);

仪表盘 - gauge

![[8520b339-ddd7-49a5-8584-cc8810f8bb39.png]]

HTML 复制代码

<!-- 为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 = {
    toolbox: {
      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; //34.56
    myChart.setOption(option, true);
  }, 2000);
</script>

总结Echarts的使用

引入echarts

HTML 复制代码

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

创建div容器

HTML 复制代码

<div id="box" style="width: 500px;height: 500px;"></div>

设置css样式
使用echarts - 初始化echarts，告诉echarts显示的位置

JavaScript 复制代码

var myChat = echarts.init(document.querySelector('#box'));

使用echarts - 配置option的数据

JavaScript 复制代码

// 不需要自己写，直接复制就可以
从实例的代码中直接复制option的代码

使用echarts - 将option的数据设置给echarts

JavaScript 复制代码

option && myChat.setOption(option);


备注：暂时不能使用完整代码下的echarts.js的引入方式，因为我们的js文件不是一个"包"[文件夹]

词云图

词云图生成器：https://tendcode.com/tool/word-cloud/

词云图插件：https://blog.csdn.net/a736755244/article/details/103596818

![[2046f8c3-ea64-44c0-8fb0-8884db19b049.png]]

水球图

下载：echarts-liquidfill.min.js

链接：https://pan.baidu.com/s/16MaPOXRNHuiEbKyo8h88MA?pwd=2xvc

提取码：2xvc

![[b0eda4c2-cf18-437a-9ca5-8eb590cd26bc.png]]

常用属性

点击图片可查看完整电子表格

1)HTML中引入水球图

HTML 复制代码

<script src='echarts.js'></script>
<script src='echarts-liquidfill.js'></script>

其中这两个文件都可以在官方github项目中dist目录下获取到，echarts、echarts-liquidfill。通过npm引入:

HTML 复制代码

npm install echarts
npm install echarts-liquidfill

**注意:**echarts-liquidfill@3 版本匹配 echarts@5 版本，echarts-liquidfill@2 版本匹配 echarts@4 版本

3)使用

JavaScript 复制代码

const option = {
    series: [{
        type: 'liquidFill',
        data: [0.6]
    }]
};

![[f0b5026a-9002-49bc-a661-d3881ea9d47a.png]]

4)多个波浪效果

JavaScript 复制代码

const option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3]
    }]
};

5)静止的波浪

JavaScript 复制代码

const option = {
    series: [{
        type: 'liquidFill',
        waveAnimation: false, // 波浪效果
        animationDuration: 0, // 静止得波浪
        animationDurationUpdate: 0,
        data: [0.6, 0.5, 0.4, 0.3]
    }]
};

通过设置 waveAnimation 属性为 false，可以实现静止的波浪效果，另外，通过设置 animationDuration 和 animationDurationUpdate 属性的值，可以调整波浪的动画，同样可以实现静止的效果。

![[d78afa54-1797-4cfa-83a9-53f0a19a9d25.png]]

6)静止水面效果

JavaScript 复制代码

const option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        amplitude: 0,
        waveAnimation: 0
    }]
};

![[6c9151f8-7de3-49e8-a0aa-b79474b963bd.png]]

7)其他形状的水球图

水球图不仅能被设定为圆形，也可以被设置为其他形状，如矩形、钻石菱形、箭头型等，也可以设置为包含其容器的形状，甚至可以通过SVG来设定

JavaScript 复制代码

const options = [{
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        shape: 'diamond' // 钻石形状
    }]
}];

![[8e3ba2e5-19e5-4ddf-a30a-5521db04fbb8.png]]

JavaScript 复制代码

const option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.55, 0.4, 0.25],
        radius: '60%',
        outline: {
            show: false
        },
        backgroundStyle: {
            borderColor: '#156ACF',
            borderWidth: 1,
            shadowColor: 'rgba(0, 0, 0, 0.4)',
            shadowBlur: 20
        },
        shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z',
        label: {
            position: ['38%', '40%'],
            formatter: function() {
                return 'ECharts\nLiquid Fill';
            },
            fontSize: 40,
            color: '#D94854'
        }
    }]
};

![[5104cccb-4180-45b3-8b97-2bd57044d32a.png]]

绘制中国地图

注意:需要在服务器环境下预览

获取地图坐标：https://datav.aliyun.com/portal/school/atlas/area_selector

获取飞行信息：https://echarts.apache.org/examples/zh/editor.html?c=geo-lines

效果

![[3952239d-f793-44f8-a906-00767f07cae3.png]]

得到所有城市信息

![[65d15218-5d6e-43ac-98bf-175cd3cfc349.png]]

HTML 复制代码

<!--1. 引入echarts绘制图形，jquery请求数据-->
<script src="./js/echarts.js"></script>
<script src="./js/jquery-1.8.2.js"></script>
<style>
  #box{
    width: 100vw;
    height: 100vh;
  }
</style>
<body>
    <!--2. 创建容器，初始化echarts对象-->
    <div id="box"></div>
</body>
<script>
var myChar = echarts.init(document.querySelector('#box'));
    // 3. 发送ajax请求请求地图数据：https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
    $.ajax({
        type:'get',
        url:'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
        dataType:'json',
        success:function(res){
            // 4. 数据请求成功之后，注册数据
            echarts.registerMap('map', res);
            // 设置option的数据
            var option = {
                geo: [{
                    map: 'map'
                }]
            }
            // 使用option数据
            option && myChar.setOption(option);
        },
        error:function(err){
            console.log(err);
        }
    })
</script>

大屏展示效果都适用echarts做的

![[dd180a5a-d043-4c8a-be50-f40eda317900.png]]

案例

模拟antd效果

案例效果地址：https://preview.pro.ant.design/dashboard/analysis 实现柱状图效果

![[6f8a6ad5-565a-41d1-98ae-854a1c12f5dd.png]]

js 复制代码

<!--引入echarts.js文件-->

<script src="./js/echarts5.3.3.js"></script>

<body>

    <!-- 自定义盒子的宽高 -->

    <div id="box" style="height:600px"></div>

</body>

<script>

    // 1. 初始化echarts对象

    var myChart = echarts.init(document.querySelector('#box'));

    // 2. 配置内容

    var option = {

        // 表头

        tooltip: {

            show:true,

            trigger: 'axis',

            axisPointer: {

                type: 'shadow'

            }

        },

        // 图表网格间距

        grid: {

            left: '3%',

            right: '4%',

            bottom: '3%',

            containLabel: true // grid 区域是否包含坐标轴的刻度标签；默认值为false，不包含刻度

        },

        xAxis: [ // x轴相关的设置

            {

                type: 'category', // x坐标轴类型，value 适合连续形数据；category 类目轴； time 时间轴

                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

                axisTick: { // 坐标轴刻度相关设置

                    alignWithLabel: true, // 刻度线和标签对齐

                    lineStyle:{ // 刻度风格

                        color:'#8c8c8c' // 刻度风格

                    }

                },

                axisLine:{ // 坐标轴轴线相关设置

                    lineStyle:{

                        color:'#8c8c8c' // 坐标轴颜色

                    }

                }

            }

        ],

        yAxis: [ // y轴相关的设置

            {

                type: 'value'

            }

        ],

        series: [ // 表中内容相关的设置

            {

                // showBackground:true, // 是否显示 柱状图的背景颜色；默认为false，不显示

                backgroundStyle:{ // 坐标轴背景颜色

                    color:"#ccc"

                },

                itemStyle:{

                    color:'#6395f9' // 柱状图柱子的颜色

                },

                name: '销量', // 坐标轴名称

                type: 'bar', // 图表类型：line折线图，bar柱状图，pie饼形图

                barWidth: '60%', // 坐标轴的宽度，默认为自适应

                data: [1063, 373, 698, 585, 1117, 570, 314,1178,671,453,388,304] // 数据内容数组

            }

        ]

    };

    // 3. 使用配置项

    option && myChart.setOption(option);

</script>

拖拽窗口控制屏幕改变图像大小

触发拖拽事件：官方文档 - API - echartsInstance - resize

![[0c84df99-9607-402b-8921-2d8c9bcdaeeb.png]]


JavaScript window.onresize = function () { myChart.resize(); // 重要的代码 }

缩放屏幕时，图像跟着改变

js 复制代码

<script src="./js/echarts5.3.3.js"></script>

<body>

  <div id="box" style="height:600px"></div>

</body>

<script>

  // 1. 初始化echarts对象

  var myChart = echarts.init(document.querySelector('#box'));

  

  // 2. 配置内容

  var option = {

    // 表头

    tooltip: {

      trigger: 'axis',

      axisPointer: {

        type: 'shadow'

      }

    },

    // 表间距

    grid: {

      left: '3%',

      right: '4%',

      bottom: '3%',

      containLabel: true

    },

    xAxis: [ // x轴相关的设置

      {

        type: 'category',

        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

        axisTick: {

          alignWithLabel: true

        },

        axisLine: {

          lineStyle: {

            color: '#8c8c8c' // #8c8c8c

          }

        },

        axisTick: {

          lineStyle: {

            color: '#8c8c8c'

          }

        }

      }

    ],

    yAxis: [ // y轴相关的设置

      {

        type: 'value'

      }

    ],

    series: [ // 表中内容相关的设置

      {

        // showBackground:true, //柱状图的背景颜色

        backgroundStyle: {

          color: "#ccc"

        },

        itemStyle: {

          color: '#6395f9'

        },

        name: 'Direct',

        type: 'bar',

        barWidth: '60%',

        data: [1063, 373, 698, 585, 1117, 570, 314, 1178, 671, 453, 388, 304]

      }

    ]

  };

  

  // 3. 使用配置项

  option && myChart.setOption(option);

  

  // 4. 拖拽的事件 【重点代码】

  window.onresize = function () {

        myChart.resize(); // 重要的代码

  }

</script>

给图表添加点击事件，显示新的图表

js 复制代码

<script src="./js/echarts5.3.3.js"></script>

</head>

<body>

    <div id="box" style="height:600px"></div>

</body>

<script>

    var month = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

    var data = [1063, 373, 698, 585, 1117, 570, 314, 1178, 671, 453, 388, 304];

    // 1. 初始化echarts对象

    var myChart = echarts.init(document.querySelector('#box'));

    // 2. 配置内容

    function show(month, data) {

        option = {

            // 表头

            tooltip: {

                trigger: 'axis',

                axisPointer: {

                    type: 'shadow'

                }

            },

            // 表间距

            grid: {

                left: '3%',

                right: '4%',

                bottom: '3%',

                containLabel: true

            },

            xAxis: [ // x轴相关的设置

                {

                    type: 'category',

                    data: month,

                    axisTick: {

                        alignWithLabel: true

                    },

                    axisLine: {

                        lineStyle: {

                            color: '#8c8c8c' // #8c8c8c

                        }

                    },

                    axisTick: {

                        lineStyle: {

                            color: '#8c8c8c'

                        }

                    }

                }

            ],

            yAxis: [ // y轴相关的设置

                {

                    type: 'value'

                }

            ],

            series: [ // 表中内容相关的设置

                {

                    // showBackground:true, //柱状图的背景颜色

                    backgroundStyle: {

                        color: "#ccc"

                    },

                    itemStyle: {

                        color: '#6395f9'

                    },

                    name: 'Direct',

                    type: 'bar',

                    barWidth: '60%',

                    data: data

                }

            ]

        };

        return option;

    }

    // 3. 使用配置项

    myChart.setOption(show(month,data));

    // 4. 拖拽的事件

    window.onresize = function () {

        myChart.resize(); // 重要的代码

    }

    var title = ['上旬', '中旬', '下旬'];

    var salse = [

        [300, 200, 600],

        [120, 80, 50],

        [300, 200, 600],

        [300, 200, 600],

        [300, 200, 600],

        [300, 200, 600],

        [300, 200, 600],

        [300, 200, 600],

        [300, 200, 600],

        [300, 200, 600],

        [300, 200, 600],

        [300, 200, 600],

    ];

    // 5. 给图表添加事件【重点代码】

    myChart.on('click', function (params) {

        // 调用新的数据

        myChart.setOption(show(title,salse[params.dataIndex]));

    });

</script>

尝试使用其他可视化图表【g2】

官网地址：https://antv.vision/zh 现在大多数的框架都在建立自己的生态圈

比如：react框架；react起源于Facebook的内部项目，而他下面有一个后台框架，ant-design【简称antd】

Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级后台产品的交互语言和视觉体系。

Ant Design 源自蚂蚁金服体验技术部的后台产品开发，是一套企业级的交互视觉规范，统一后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。

在antd中不仅有后端框架，还有可视化图表，移动端UI组件库，图形化解决方案，图标集等等，antd在正在逐步建立自己的技术生态圈其中g2【属于antv】就是其中实现可视化图表的库，antv是一套集合了各种各样图表的库，可以在使用的时候引入自己需要的图表库，相比于Echarts，Echarts是直接引入所有的图像，文件相对来说比较大使用步骤

下载antv

官网给的链接是暂时没办法使用，可以使用npm进行安装，然后找到对应的g2.js文件


Perl npm install @antv/g2 --save

创建容器，放置g2

html 复制代码

<div id="c1"></div>

使用

js 复制代码

<script src="./g2.js"></script> <script> const data = [ { genre: 'Sports', sold: 275 }, { genre: 'Strategy', sold: 115 }, { genre: 'Action', sold: 120 }, { genre: 'Shooter', sold: 350 }, { genre: 'Other', sold: 150 } ]; // Step 1: 创建 Chart 对象 const chart = new Chart({ container: 'c1', // 指定图表容器 ID width: 600, // 指定图表宽度 height: 300, // 指定图表高度 }); // Step 2: 载入数据源 chart.data(data); // Step 3: 创建图形语法，绘制柱状图 chart.interval().position('genre*sold'); // Step 4: 渲染图表 chart.render(); </script>

注意：这样引入完之后，会报错，找不到Chart 需要在Chart的前面添加上g2

js 复制代码

const chart = new G2.Chart({ 
container: 'container', // 指定图表容器 ID 
width: 600, // 指定图表宽度 
height: 300,// 指定图表高度 
});

地图操作

实现地图操作步骤：有对应的地图数据用地图数据注册地图在geo中应用地图

在echarts中专门提供了操作地图的地图坐标组件

![[773b7510-6363-4a74-bfb0-d1c4c5bff0b6 (1).png]]

echarts提供了如何操作地图的案例

![[d051ac7e-a5ae-40db-99d8-35f30a6116f4.png]]

参考阿里云工具，获取全国坐标位置

HTML 复制代码

<script src="./js/echarts5.3.3.js"></script>
<script src="./js/jquery1.9.1.js"></script>
<style>
  #box{
    height: 800px;
    border: 1px solid #f00;
  }
</style>
<body>
    <div id="box"></div>
</body>
<script>
    var chart = echarts.init(document.querySelector('#box'));
    $(function(){
        $.ajax({ // 请求坐标数据
            type:'get',
            url:'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
            dataType:'json',
            success:function(res){
                // 注册地图
                echarts.registerMap('china',res); // 注册地图
                // 使用地图
                chart.setOption({
                    geo:{
                        map:'china' // 使用地图
                    }
                });
            }
        })
    })

绘制飞行路线效果

参考地址：https://echarts.apache.org/examples/zh/editor.html?c=geo-lines

HTML 复制代码

<script src="./js/echarts5.3.3.js"></script>
<script src="./js/jquery1.9.1.js"></script>
<style>
{
padding: 0;
margin: 0;
}
</style>
<body>
    <div id="show" style="height: 1000px;"></div>
</body>
<script>
    var geoCoordMap = {
        上海: [121.4648, 31.2891],
        东莞: [113.8953, 22.901],
        东营: [118.7073, 37.5513],
        中山: [113.4229, 22.478],
        临汾: [111.4783, 36.1615],
        临沂: [118.3118, 35.2936],
        丹东: [124.541, 40.4242],
        丽水: [119.5642, 28.1854],
        乌鲁木齐: [87.9236, 43.5883],
        佛山: [112.8955, 23.1097],
        保定: [115.0488, 39.0948],
        兰州: [103.5901, 36.3043],
        包头: [110.3467, 41.4899],
        北京: [116.4551, 40.2539],
        北海: [109.314, 21.6211],
        南京: [118.8062, 31.9208],
        南宁: [108.479, 23.1152],
        南昌: [116.0046, 28.6633],
        南通: [121.1023, 32.1625],
        厦门: [118.1689, 24.6478],
        台州: [121.1353, 28.6688],
        合肥: [117.29, 32.0581],
        呼和浩特: [111.4124, 40.4901],
        咸阳: [108.4131, 34.8706],
        哈尔滨: [127.9688, 45.368],
        唐山: [118.4766, 39.6826],
        嘉兴: [120.9155, 30.6354],
        大同: [113.7854, 39.8035],
        大连: [122.2229, 39.4409],
        天津: [117.4219, 39.4189],
        太原: [112.3352, 37.9413],
        威海: [121.9482, 37.1393],
        宁波: [121.5967, 29.6466],
        宝鸡: [107.1826, 34.3433],
        宿迁: [118.5535, 33.7775],
        常州: [119.4543, 31.5582],
        广州: [113.5107, 23.2196],
        廊坊: [116.521, 39.0509],
        延安: [109.1052, 36.4252],
        张家口: [115.1477, 40.8527],
        徐州: [117.5208, 34.3268],
        德州: [116.6858, 37.2107],
        惠州: [114.6204, 23.1647],
        成都: [103.9526, 30.7617],
        扬州: [119.4653, 32.8162],
        承德: [117.5757, 41.4075],
        拉萨: [91.1865, 30.1465],
        无锡: [120.3442, 31.5527],
        日照: [119.2786, 35.5023],
        昆明: [102.9199, 25.4663],
        杭州: [119.5313, 29.8773],
        枣庄: [117.323, 34.8926],
        柳州: [109.3799, 24.9774],
        株洲: [113.5327, 27.0319],
        武汉: [114.3896, 30.6628],
        汕头: [117.1692, 23.3405],
        江门: [112.6318, 22.1484],
        沈阳: [123.1238, 42.1216],
        沧州: [116.8286, 38.2104],
        河源: [114.917, 23.9722],
        泉州: [118.3228, 25.1147],
        泰安: [117.0264, 36.0516],
        泰州: [120.0586, 32.5525],
        济南: [117.1582, 36.8701],
        济宁: [116.8286, 35.3375],
        海口: [110.3893, 19.8516],
        淄博: [118.0371, 36.6064],
        淮安: [118.927, 33.4039],
        深圳: [114.5435, 22.5439],
        清远: [112.9175, 24.3292],
        温州: [120.498, 27.8119],
        渭南: [109.7864, 35.0299],
        湖州: [119.8608, 30.7782],
        湘潭: [112.5439, 27.7075],
        滨州: [117.8174, 37.4963],
        潍坊: [119.0918, 36.524],
        烟台: [120.7397, 37.5128],
        玉溪: [101.9312, 23.8898],
        珠海: [113.7305, 22.1155],
        盐城: [120.2234, 33.5577],
        盘锦: [121.9482, 41.0449],
        石家庄: [114.4995, 38.1006],
        福州: [119.4543, 25.9222],
        秦皇岛: [119.2126, 40.0232],
        绍兴: [120.564, 29.7565],
        聊城: [115.9167, 36.4032],
        肇庆: [112.1265, 23.5822],
        舟山: [122.2559, 30.2234],
        苏州: [120.6519, 31.3989],
        莱芜: [117.6526, 36.2714],
        菏泽: [115.6201, 35.2057],
        营口: [122.4316, 40.4297],
        葫芦岛: [120.1575, 40.578],
        衡水: [115.8838, 37.7161],
        衢州: [118.6853, 28.8666],
        西宁: [101.4038, 36.8207],
        西安: [109.1162, 34.2004],
        贵阳: [106.6992, 26.7682],
        连云港: [119.1248, 34.552],
        邢台: [114.8071, 37.2821],
        邯郸: [114.4775, 36.535],
        郑州: [113.4668, 34.6234],
        鄂尔多斯: [108.9734, 39.2487],
        重庆: [107.7539, 30.1904],
        金华: [120.0037, 29.1028],
        铜川: [109.0393, 35.1947],
        银川: [106.3586, 38.1775],
        镇江: [119.4763, 31.9702],
        长春: [125.8154, 44.2584],
        长沙: [113.0823, 28.2568],
        长治: [112.8625, 36.4746],
        阳泉: [113.4778, 38.0951],
        青岛: [120.4651, 36.3373],
        韶关: [113.7964, 24.7028]
    };
    var BJData = [
        [{ name: '北京' }, { name: '上海', value: 95 }],
        [{ name: '北京' }, { name: '广州', value: 90 }],
        [{ name: '北京' }, { name: '大连', value: 80 }],
        [{ name: '北京' }, { name: '南宁', value: 70 }],
        [{ name: '北京' }, { name: '南昌', value: 60 }],
        [{ name: '北京' }, { name: '拉萨', value: 50 }],
        [{ name: '北京' }, { name: '长春', value: 40 }],
        [{ name: '北京' }, { name: '包头', value: 30 }],
        [{ name: '北京' }, { name: '重庆', value: 20 }],
        [{ name: '北京' }, { name: '常州', value: 10 }]
    ];
    var SHData = [
        [{ name: '上海' }, { name: '包头', value: 95 }],
        [{ name: '上海' }, { name: '昆明', value: 90 }],
        [{ name: '上海' }, { name: '广州', value: 80 }],
        [{ name: '上海' }, { name: '郑州', value: 70 }],
        [{ name: '上海' }, { name: '长春', value: 60 }],
        [{ name: '上海' }, { name: '重庆', value: 50 }],
        [{ name: '上海' }, { name: '长沙', value: 40 }],
        [{ name: '上海' }, { name: '北京', value: 30 }],
        [{ name: '上海' }, { name: '丹东', value: 20 }],
        [{ name: '上海' }, { name: '大连', value: 10 }]
    ];
    var GZData = [
        [{ name: '广州' }, { name: '福州', value: 95 }],
        [{ name: '广州' }, { name: '太原', value: 90 }],
        [{ name: '广州' }, { name: '长春', value: 80 }],
        [{ name: '广州' }, { name: '重庆', value: 70 }],
        [{ name: '广州' }, { name: '西安', value: 60 }],
        [{ name: '广州' }, { name: '成都', value: 50 }],
        [{ name: '广州' }, { name: '常州', value: 40 }],
        [{ name: '广州' }, { name: '北京', value: 30 }],
        [{ name: '广州' }, { name: '北海', value: 20 }],
        [{ name: '广州' }, { name: '海口', value: 10 }]
    ];
     // 获取目的地坐标方法
    function getCity(city) {
        var cityArr = [];
        for (var i = 0; i < city.length; i++) {
            cityArr.push({
                name: city[i][1].name,
                value: geoCoordMap[city[i][1].name],
                big: city[i][1].value
            })
        }
        return cityArr
    }
    // 获取飞行航线
    function getFrom(city) {
        var getArr = [];
        for (var i = 0; i < city.length; i++) {
            getArr.push({
                fromName: city[i][0].name,
                toName: city[i][1].name,
                coords: [geoCoordMap[city[i][0].name], geoCoordMap[city[i][1].name]]
            });
        }
        return getArr;
    }
    // 飞机的图像
    var path = 'path://M864 736c0-111.6-65.4-208-160-252.9V317.3c0-15.1-5.3-29.7-15.1-41.2L536.5 95.4C530.1 87.8 521 84 512 84s-18.1 3.8-24.5 11.4L335.1 276.1c-9.7 11.5-15.1 26.1-15.1 41.2v165.8C225.4 528 160 624.4 160 736h156.5c-2.3 7.2-3.5 15-3.5 23.8 0 22.1 7.6 43.7 21.4 60.8 11.3 14 26.2 24.6 43.1 30.6 23.1 54 75.6 88.8 134.5 88.8 29.1 0 57.3-8.6 81.4-24.8 23.6-15.8 41.9-37.9 53-64 16.9-6 31.8-16.5 43.1-30.5 13.8-17.2 21.4-38.8 21.4-60.8 0-8.4-1.1-16.4-3.1-23.8L864 736zM512 352c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48z m116.1 432.2c-5.2 3-11.2 4.2-17.1 3.4l-19.5-2.4-2.8 19.4c-5.4 37.9-38.4 66.5-76.7 66.5s-71.3-28.6-76.7-66.5l-2.8-19.5-19.5 2.5c-1 0.1-2.1 0.2-3.3 0.2-4.9 0-9.6-1.3-13.8-3.7-8.7-5-14.1-14.3-14.1-24.4 0-10.6 5.9-19.4 14.6-23.8h231.3c8.8 4.5 14.6 13.3 14.6 23.8-0.1 10.2-5.5 19.6-14.2 24.5z';
     // option单独设置
    var option = {
        // 整个地图盒子的背景
        backgroundColor: '#404a59',
        // 1. 地图
        geo: [{
            map: 'zhongguo',
            label:{
                // show:true,
                emphasis: {
                    show: true,  //开启悬浮事件
                    color: '#404a59',//字体颜色
                }
            },
            itemStyle: {
                areaColor: '#323c48',
                borderColor: '#404a59'
            },
            emphasis: {
                itemStyle: {
                    areaColor: '#fff',// 区域地图颜色
                }
            }
        }],
        series: [
            // 4. 飞机效果
            {
                type: 'lines',
                zlevel: 2,
                symbol: ['none', 'arrow'], // 飞行之前的小三角
                // 线特效的配置
                effect: {
                    show: true,
                    period: 6,
                    color: '#fff',
                    trailLength: 0.7,
                    symbolSize: 15, // 拖尾的粗细
                    symbol: path
                },
                lineStyle: {
                    color: '#fff',
                    width: 0.5,
                    curveness: 0.2
                },
                data: getFrom(GZData)
            },
            // 3. 涟漪效果
            {
                type: "effectScatter", // 涟漪图效果
                coordinateSystem: "geo", // 使用地图方式添加坐标
                symbolSize: function (val, pam) { // 使用回调函数获取涟漪大小
                    return pam.data.big / 8;
                },
                rippleEffect: {
                    brushType: 'stroke' // 涟漪效果是描边还是填充
                },
                label: {
                    show: true, // 是否显示文字提示
                    formatter: '{b}', // 显示的内容进行格式化，默认为哦纬度
                    position: 'right' // 文字显示的位置
                },
                itemStyle: {
                    color: '#fff' // 涟漪颜色
                },
                data: getCity(GZData) // 获取坐标数据
            }
        ]
    }
    // 0. 请求地图数据
    $(function () {
        $.ajax({
            type: 'get',
            url: 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
            dataType: 'json',
            success: function (res) {
                // 1. 注册地图
                echarts.registerMap("zhongguo", res);
                // 2. 初始化对象
                var myChart = echarts.init(document.querySelector('#show'));
                // 3. 绘制图
                myChart.setOption(option);
            },
            error: function (err) {
                console.log(err);
            }
        })
    })
</script>

参考网站：

bootcdn地址：https://www.bootcdn.cn/

echarts案例网站：https://www.isqqw.com/

获取地图数据网站：http://datav.aliyun.com/portal/school/atlas/area_selector

![[812d2bfa-deb2-40bb-9870-48dfa7f86ac0.png]]

作业

实现使用echarts编写车辆管理可视化页面网址:https://www.jq22.com/demo/jqueryechartsclgl202004230915/

使用echarts编写水质检测页面链接：https://www.jq22.com/demo/echartsSzjc202012202211/