echarts的应用

想吃手撕面包

已于 2022-12-03 20:54:48 修改

阅读量790

点赞数 3

文章标签： echarts 前端 javascript

于 2022-12-03 16:49:29 首次发布

本文链接：https://blog.csdn.net/qq_67519713/article/details/128161749

版权

ECharts

1.了解echarts

echarts官网

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

ECharts 特性

丰富的可视化类型: 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
多种数据格式无需转换直接使用: 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，此外还支持输入 TypedArray 格式的数据。
千万数据的前端展现: 通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量。
移动端优化: 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。
多渲染方案，跨平台使用: 支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表。
深度的交互式数据探索: 提供了图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。
多维数据的支持以及丰富的视觉编码手段: 对于传统的散点图等，传入的数据也可以是多个维度的。
动态数据: 数据的改变驱动图表展现的改变。
绚丽的特效: 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。
通过 GL 实现更多更强大绚丽的三维可视化: 在 VR，大屏场景里实现三维的可视化效果。
无障碍访问（4.0+）: 支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问！

2.安装ECharts方式

从 npm 获取

npm install echarts --save

下载后获取（vue项目中可以通过ref获取）

// 引入 ECharts
import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); 
// document.getElementById('main')vue项目中可以通过ref获取this.$refs.main
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

从 GitHub 获取
ECharts地址->
远程仓库地址：https://github.com/apache/echarts.git
从 CDN 获取
跳转下载地址 CDN 获取

3.ECharts的使用方式和配置像

使用echarts时候必须先准备好一个有宽高的盒子
更多配置项…

// 准备好有固定宽高的盒子
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  // 初始化echarts
  var myChart = echarts.init(document.getElementById('main')// 获取要初始化的盒子); 
  // 把配置项给实例对象
  myCharts.setOption({
    // color设置我们线条的颜色 注意后面是个数组
    color: ['pink', 'red', 'green', 'skyblue'],
    // 设置图表的标题
    title: {
        text: '折线图堆叠123'
    },
    // 图表的提示框组件 
    tooltip: {
        // 触发方式
        trigger: 'axis'
    },
    // 图例组件
    legend: {
       // series里面有了 name值则 legend里面的data可以删掉
    },
    // 网格配置  grid可以控制线形图 柱状图 图表大小
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        // 是否显示刻度标签 如果是true 就显示 否则反之
        containLabel: true
    },
    // 工具箱组件  可以另存为图片等功能
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    // 设置x轴的相关配置
    xAxis: {
        type: 'category',
        // 是否让我们的线条和坐标轴有缝隙
        boundaryGap: false,
        data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
     // 设置y轴的相关配置
    yAxis: {
        type: 'value'
    },
    // 系列图表配置 它决定着显示那种类型的图表
    series: [
        {
            name: '邮件营销',
            type: 'line',
           
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',

            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'line',
          
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接访问',
            type: 'line',
          
            data: [320, 332, 301, 334, 390, 330, 320]
        }
    ]
};)
</script>

配置项介绍

看到一个博主的配置项更加清晰点击跳转go

xAxis: {
  show: true,                    // 是否显示x轴
  position: 'top',               // x轴的位置  top、bottom
  type: 'category',              // 坐标轴类型 value、category、time、log
  name: '姓名',                   // 坐标轴名称
  nameRotate: 10,                // 坐标轴名字旋转，角度值
  inverse: false,                // 是否是反向坐标轴
  boundaryGap: ['20%', '20%'],   // 坐标轴两边留白策略
  splitNumber: 5,                // 坐标轴的分割段数（预估值）
  zlevel: 100,					//x轴层级（相当于定位中z-index）
  axisLine: {
      show: true,                // 是否显示坐标轴轴线
      symbol: ['none', 'arrow'], // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
      symbolSize: [10, 15],      // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
      lineStyle: {
          color: '#333',         // 坐标轴线线的颜色
          width: '5',            // 坐标轴线线宽
          type: 'solid',         // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
      },
  },
  axisTick: {
      show: true,                // 是否显示坐标轴刻度
      inside: true,              // 坐标轴刻度是否朝内，默认朝外
      length: 5,                 // 坐标轴刻度的长度
      lineStyle: {
          color: '#FFF',         // 刻度线的颜色
          width: 10,             // 坐标轴刻度线宽
          type: 'solid',         // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
      },
  },
  axisLabel: {
      show: true,                // 是否显示刻度标签
      interval: '0',             // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
      inside: true,              // 刻度标签是否朝内，默认朝外
      rotate: 90,                // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从 -90 度到 90 度
      margin: 10,                // 刻度标签与轴线之间的距离
      // formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
      color: '#FFF',             // 刻度标签文字的颜色
      fontStyle: 'normal',       // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
      fontWeight: 'normal',      // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
      fontSize: '20',            // 文字字体大小
      align: 'left',             // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
      verticalAlign: 'left',     // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
      lineHeight: '50',          // 行高
      backgroundColor: 'red',    // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
  },
  splitLine: {
      show: true,                // 是否显示分隔线。默认数值轴显示，类目轴不显示
      interval: '0',             // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
      color: ['#ccc'],           // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
      width: 3,                  // 分隔线线宽
      type: 'solid',             // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
  },
  splitArea: {
      show: true,                // 是否显示分隔区域
      interval: '0',             // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
      areaStyle: {
          color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],    // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色
          opacity: 1,            // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
      },
  },
  data: {
      textStyle: {
          color: '#FFF',         // 文字的颜色
          fontStyle: 'normal',   // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
          fontWeight: 'normal',  // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
          fontSize: '20',        // 文字字体大小
          align: 'left',         // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
          verticalAlign: 'left', // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
          lineHeight: '50',      // 行高
          backgroundColor: 'red',// 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
      },
  },
},
yAxis: {
    show: true,                 // 是否显示 y 轴
    position: 'top',            // y 轴的位置（'top'，'bottom'） 
    type: 'category',           // 坐标轴类型
    nameLocation: 'end',        // 坐标轴名称显示位置
    nameGap: 15,                // 坐标轴名称与轴线之间的距离
    nameRotate: 10,             // 坐标轴名字旋转，角度值
    inverse: false,             // 是否是反向坐标轴
    nameTextStyle: {
        color: '#333',          // 坐标轴名称的颜色
        fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
        fontWeight: 'normal',   // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
        fontSize: '20',         // 文字字体大小
        align: 'left',          // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
        verticalAlign: 'left',  // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
        lineHeight: '50',       // 行高
        backgroundColor: 'red', // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
    },
    axisLine: {
        show: true,             // 是否显示坐标轴轴线
        symbol: ['none', 'arrow'],   // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
        symbolSize: [10, 15],   // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
        lineStyle: {
            color: '#333',      // 坐标轴线线的颜色
            width: '5',         // 坐标轴线线宽
            type: 'solid',      // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        },
    },
    axisTick: {
        show: true,             // 是否显示坐标轴刻度
        inside: true,           // 坐标轴刻度是否朝内，默认朝外
        length: 5,              // 坐标轴刻度的长度
        lineStyle: {
            color: '#FFF',      // 刻度线的颜色
            width: 10,          // 坐标轴刻度线宽
            type: 'solid',      // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        },
    },
    axisLabel: {
        show: true,                 // 是否显示刻度标签
        interval: '0',              // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
        inside: true,               // 刻度标签是否朝内，默认朝外
        rotate: 90,                 // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从 -90 度到 90 度
        margin: 10,                 // 刻度标签与轴线之间的距离
        // formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
        color: '#FFF',              // 刻度标签文字的颜色
        fontStyle: 'normal',        // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
        fontWeight: 'normal',       // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
        fontSize: '20',             // 文字字体大小
        align: 'left',              // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
        verticalAlign: 'left',      // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
        lineHeight: '50',           // 行高
        backgroundColor: 'red',     // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
    },
    splitLine: {
        show: true,                 // 是否显示分隔线。默认数值轴显示，类目轴不显示
        interval: '0',              // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
        color: ['#ccc'],            // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
        width: 3,                   // 分隔线线宽
        type: 'solid',              // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
    },
    splitArea: {
        show: true,                 // 是否显示分隔区域
        interval: '0',              // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
        areaStyle: {
            color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],    // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色
            opacity: 1,             // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
        },
    },
    data: {
        textStyle: {
            color: '#FFF',          // 文字的颜色
            fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
            fontWeight: 'normal',   // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: '20',         // 文字字体大小
            align: 'left',          // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
            verticalAlign: 'left',  // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
            lineHeight: '50',       // 行高 ）
            backgroundColor: 'red', // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
        },
    },
}

4.echarts案例（带中国地图）

需要要用到的js库文件（按照顺序引入）：

flexible.js，用来做屏幕适配
echarts, echarts图表
jquery, jQuery库文件
china, 用来做中国地图
然后在引入自己的js文件

效果图：
在这里插入图片描述

html部分代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据可视化</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<bo dy>
  <!-- 头部的盒子 -->
  <header>
    <h1>数据可视化</h1>
    <div class="showTime"></div>
    <script>
    // 时间格式化/设置头部右边时间格式
      var t = null;
      t = setTimeout(time, 1000); //開始运行
      function time() {
        clearTimeout(t); //清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours(); //获取时
        var m = dt.getMinutes(); //获取分
        var s = dt.getSeconds(); //获取秒
        document.querySelector(".showTime").innerHTML =
          "当前时间：" +
          y +
          "年" +
          mt +
          "月" +
          day +
          "-" +
          h +
          "时" +
          m +
          "分" +
          s +
          "秒";
        t = setTimeout(time, 1000); //设定定时器，循环运行
      }
    </script>
  </header>

  <!-- 页面主体部分 -->
  <section class="mainbox">
    <div class="column">
      <!-- 柱状图1 -->
      <div class="panel bar">
        <h2>柱形图-就业行情</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
      <!-- 柱状图2 -->
      <div class="panel line">
        <h2>折线图-人员变化</h2>
        <div class="chart">图表</div>
      </div>
      <!-- 显示人数模块 -->
      <div class="panel pie">
        <h2>饼形图-年龄分布</h2>
        <div class="chart">图表</div>
      </div>
    </div>
    <div class="column">
      <!-- no模块制作 -->
      <div class="no">
        <div class="no-hd">
          <ul>
            <li>125811</li>
            <li>999999</li>
          </ul>
        </div>
        <div class="no-bd">
          <ul>
            <li>前端需求人数</li>
            <li>市场供应人数</li>
          </ul>
        </div>
      </div>
      <!-- 地图模块 -->
      <div class="map">
        <div class="map1"></div>
        <div class="map2"></div>
        <div class="map3"></div>
        <div class="chart"></div>
      </div>
    </div>
    <div class="column">
      <!-- 1 -->
      <div class="panel bar2">
        <h2>柱形图-技能掌握</h2>
        <div class="chart">图表</div>
      </div>
      <!-- 2 -->
      <div class="panel line2">
        <h2>折线图-播放量</h2>
        <div class="chart">图表</div>
      </div>
      <!-- 3 -->
      <div class="panel pie2">
        <h2>饼形图-地区分布</h2>
        <div class="chart">图表</div>
      </div>
    </div>
  </section>
  <script src="./js/flexible.js"></script>
  <script src="./js/echarts.min.js"></script>
  <script src="./js/jquery.js"></script>
  <script src="./js/china.js"></script>
  <script src="./js/index2.js"></script>
 
</body>

</html>

css部分代码：

// css 初始化
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
/* 声明字体*/
@font-face {
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}
body {
  background: url(../images/bg.jpg) no-repeat top center;
  line-height: 1.15;
}
header {
  position: relative;
  height: 1.25rem;
  background: url(../images/head_bg.png) no-repeat;
  background-size: 100% 100%;
  h1 {
    font-size: 0.475rem;
    color: #fff;
    text-align: center;
    line-height: 1rem;
  }
  .showTime {
    position: absolute;
    right: 0.375rem;
    top: 0;
    line-height: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.25rem;
  }
}

// 页面主体盒子
.mainbox {
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0.125rem 0.125rem 0;
  .column {
    flex: 3;
  }
  .column:nth-child(2) {
    flex: 5;
    margin: 0 0.125rem 0.1875rem;
    overflow: hidden;
  }
  .panel {
    position: relative;
    height: 3.875rem;
    padding: 0 0.1875rem 0.5rem;
    border: 1px solid rgba(25, 186, 139, 0.17);
    margin-bottom: 0.1875rem;
    background: url(../images/line\(1\).png) rgba(255, 255, 255, 0.03);
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }
    .panel-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      &::before {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
    h2 {
      height: 0.6rem;
      color: #fff;
      line-height: 0.6rem;
      text-align: center;
      font-size: 0.25rem;
      font-weight: 400;
      a {
        color: #fff;
        text-decoration: none;
        margin: 0 0.125rem;
      }
    }
    .chart {
      height: 3rem;
      // background-color: springgreen;
    }
  }
}
// no数字模块
.no {
  background: rgba(101, 132, 226, 0.1);
  padding: 0.1875rem;
  .no-hd {
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      width: 30px;
      height: 10px;
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }
    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 30px;
      height: 10px;
      border-right: 2px solid #02a6b5;
      border-bottom: 2px solid #02a6b5;
    }
    ul {
      display: flex;
      li {
        position: relative;
        flex: 1;
        line-height: 1rem;
        font-size: 0.875rem;
        color: #ffeb7b;
        text-align: center;
        font-family: "electronicFont";
        &::after {
          content: "";
          position: absolute;
          top: 25%;
          right: 0;
          height: 50%;
          width: 1px;
          background: rgba(255, 255, 255, 0.2);
        }
      }
    }
  }
  .no-bd {
    ul {
      display: flex;
      li {
        flex: 1;
        text-align: center;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.225rem;
        height: 0.5rem;
        line-height: 0.5rem;
        padding-top: 0.125rem;
      }
    }
  }
}
.map {
  position: relative;
  height: 10.125rem;
  .map1 {
    width: 6.475rem;
    height: 6.475rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../images/map.png);
    background-size: 100% 100%;
    opacity: 0.3;
  }
  .map2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8.0375rem;
    height: 8.0375rem;
    background: url(../images/lbx.png);
    animation: rotate1 15s linear infinite;
    opacity: 0.6;
    background-size: 100% 100%;
  }

  .map3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7.075rem;
    height: 7.075rem;
    background: url(../images/jt.png);
    animation: rotate2 10s linear infinite;
    opacity: 0.6;
    background-size: 100% 100%;
  }
  .chart {
    position: absolute;
    top: 0;
    left: 0;
    // background-color: pink;
    width: 100%;
    height: 10.125rem;
  }
  @keyframes rotate1 {
    form {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  @keyframes rotate2 {
    form {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
}

/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
}

js部分代码：

1.左边柱状图

// 柱状图模块1
(()=> {
  // 实例化对象
  var myChart = echarts.init(document.querySelector('.bar .chart'))
  // 把配置项给实例对象
  myChart.setOption({color: ['#2f89cf'],
  // 鼠标表悬停提示信息
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  // 修改图表的大小
  grid: {
    left: '0%',
    top: '10px',
    right: '0%',
    bottom: '4%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['旅游行业', '教育培训', '游戏行业', '医疗行业', '电商行业', '社交行业', '金融行业'],
      axisTick: {
        alignWithLabel: true
      },
      // 修改刻度标签 相关样式,设置字体大小为12像素
      axisLabel: {
        color: 'rgba(255,255,255,.6) ',
        fontSize: '12'
      },
      // 不显示x坐标轴的样式
      axisLine: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      // 修改刻度标签 相关样式
      axisLabel: {
        color: 'rgba(255,255,255,.6) ',
        fontSize: 12
      },
      // y轴的线条改为了 2像素
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)',
          width: 2
        }
      },
      // y轴分割线的颜色
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      }
    }
  ],
  series: [
    {
      name: '直接访问',
      type: 'bar',
      barWidth: '35%',
      data: [200, 300, 300, 900, 1500, 1200, 600],
      itemStyle: {
        // 修改柱子圆角
        barBorderRadius: 5
      }
    }
  ]})
  //  让图表跟随屏幕自动的去适应
  window.addEventListener('resize', function () {
    myChart.resize()
  })
})();

2.右边柱状图：

// 柱状图2
(()=> {
  // 每个柱子的颜色
  var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6']
  // 实例化对象
  var myChart = echarts.init(document.querySelector('.bar2 .chart'))
  // 指定配置和数据
    myChart.setOption({
        // 图表位置 距离盒子边界的距离
        grid: {
          top: '10%',
          left: '22%',
          bottom: '10%'
          // containLabel: true
        },
        // 不显示x轴的相关信息
        xAxis: {
          show: false
        },
        yAxis: [
          {
            // 图标类型
            type: 'category',
            inverse: true, // 是否反转数据 （相当于reverse）
            data: ['HTML5', 'CSS3', 'javascript', 'VUE', 'NODE'],
            // 不显示y轴的线
            axisLine: {
              show: false
            },
            // 不显示刻度
            axisTick: {
              show: false
            },
            // 把刻度标签里面的文字颜色设置为白色
            axisLabel: {
              color: '#fff'
            }
          },
          {
            data: [702, 350, 610, 793, 664],
            inverse: true,
            // 不显示y轴的线
            axisLine: {
              show: false
            },
            // 不显示刻度
            axisTick: {
              show: false
            },
            // 把刻度标签里面的文字颜色设置为白色
            axisLabel: {
              color: '#fff'
            }
          }
        ],
        series: [
          {
            name: '条',
            type: 'bar',
            data: [70, 34, 60, 78, 69],
            yAxisIndex: 0, // 相当于html中的z—index用于调节层级
            // 修改第一组柱子的圆角
            itemStyle: {
              // 修改柱子为圆角
              barBorderRadius: 20,
              // 此时的color 可以修改柱子的颜色
              color:  (params)=> {
                // params 传进来的是柱子对象
                // dataIndex 是当前柱子的索引号
                return myColor[params.dataIndex]
              }
            },
            // 柱子之间的距离
            barCategoryGap: 50,
            //柱子的宽度
            barWidth: 10,
            // 显示柱子内的文字
            label: {
              show: true,
              position: 'inside',
              // {c} 会自动的解析为 数据  data里面的数据
              // {a}是系列名
              // {b}：数据名
              // {@xxx} 数据中名为'xxx'的维度的值
              formatter: '{c}%'
            }
          },
          // 
          {
            name: '框',
            type: 'bar',
            barCategoryGap: 50,
            barWidth: 15, //柱子的宽
            yAxisIndex: 1,
            data: [100, 100, 100, 100, 100],
            itemStyle: {
              color: 'none',
              borderColor: '#00c1de',
              borderWidth: 3,
              barBorderRadius: 15
            }
          }
        ]
      
    })
  // 让图表跟随屏幕自动的去适应
  window.addEventListener('resize', function () {
    myChart.resize()
  })
})();

3.左边折线图

(()=> {
  //  实例化对象
  var myChart = echarts.init(document.querySelector('.line .chart'))
  // 指定配置/配置对象
  myChart.setOption({
    // 通过这个color修改两条线的颜色
    color: ['#00f2f1', '#ed3f35'],
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      // 如果series 对象有name 值，则 legend可以不用写data
      // 修改图例组件 文字颜色
      textStyle: {
        color: '#4c9bfd'
      },
      // 这个10% 必须加引号
      right: '10%'
    },
    grid: {
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      show: true, // 显示边框
      borderColor: '#012f4a', // 边框颜色
      containLabel: true // 包含刻度文字在内
    },
    // x轴
    xAxis: {
      type: 'category',
      boundaryGap: false, // 去除轴内间距,贴紧y轴
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: '#4c9bfd' // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      }
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: '#4c9bfd' // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      },
      splitLine: {
        lineStyle: {
          color: '#012f4a' // 分割线颜色
        }
      }
    },
    series: [
      {
        name: '新增粉丝',
        type: 'line',
        // true 可以让我们的折线显示带有弧度
        smooth: true,
        data:[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      },
      {
        name: '新增游客',
        type: 'line',
        smooth: true,
        data:[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
      }
    ]
  })
  //  让图表跟随屏幕自动的去适应
  window.addEventListener('resize', function () {
    myChart.resize()
  })
})();

4.右边折线模块

(()=> {
  var myChart = echarts.init(document.querySelector('.line2 .chart'))
//  实例对象/配置对象
  myChart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      top: '0%',
      data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
      textStyle: {
        color: 'rgba(255,255,255,.5)',
        fontSize: '12'
      }
    },
    // 表格间距
    grid: {
      left: '10',
      top: '30',
      right: '10',
      bottom: '10',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        // x轴更换数据
        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '26', '28', '29', '30'],
        // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
        axisLabel: {
          textStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: 12
          }
        },
        // x轴线的颜色为   rgba(255,255,255,.2)
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisTick: { show: false },
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        },
        axisLabel: {
          textStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: 12
          }
        },
        // 修改分割线的颜色
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        }
      }
    ],
    series: [
      {
        name: '邮件营销',
        type: 'line',
        smooth: true,
        // 单独修改当前线条的样式
        lineStyle: {
          color: '#0184d5',
          width: '2'
        },
        // 填充颜色设置
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(1, 132, 213, 0.4)' // 渐变色的起始颜色
              },
              {
                offset: 0.8,
                color: 'rgba(1, 132, 213, 0.1)' // 渐变线的结束颜色
              }
            ],
            false
          ),
          shadowColor: 'rgba(0, 0, 0, 0.1)'
        },
        // 设置拐点
        symbol: 'circle',
        // 拐点大小
        symbolSize: 8, // 拐点大小
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false, // true:鼠标不经过也有拐点显示，false鼠标经过显示
        // 设置拐点颜色以及边框
        itemStyle: {
          color: '#0184d5',  // 填充颜色
          borderColor: 'rgba(221, 220, 107, .1)',//边框颜色
          borderWidth: 20 // 边框宽
        },
        // 数据
        data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40]
      },
      {
        name: '联盟广告',
        type: 'line',
        smooth: true,
        lineStyle: {
          normal: {
            color: '#00d887',
            width: 2
          }
        },
        // 第二条线
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(0, 216, 135, 0.4)'
                },
                {
                  offset: 0.8,
                  color: 'rgba(0, 216, 135, 0.1)'
                }
              ],
              false
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)'
          }
        },
        // 设置拐点 小圆点
        symbol: 'circle',
        // 拐点大小
        symbolSize: 5,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: '#00d887',
          borderColor: 'rgba(221, 220, 107, .1)',
          borderWidth: 12
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
        data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20]
      }
    ]
  })
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener('resize', function () {
    myChart.resize()
  })
})()

5.左边饼图

// 饼形图1
;(()=> {
  // 实例化对象
  var myChart = echarts.init(document.querySelector('.pie .chart'))
  // 把配置给实例对象
  myChart.setOption({color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab'],
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },

  legend: {
    bottom: '0%',
    // 修改小图标的大小
    itemWidth: 10,
    itemHeight: 10,
    // 修改图例组件的文字为 12px
    textStyle: {
      color: 'rgba(255,255,255,.5)',
      fontSize: '12'
    }
  },
  series: [
    {
      name: '年龄分布',
      type: 'pie',
      // 这个radius可以修改饼形图的大小
      // radius 第一个值是内圆的半径 第二个值是外圆的半径
      radius: ['40%', '60%'],
      center: ['50%', '45%'], // 
      avoidLabelOverlap: false,
      // 图形上的文字
      label: {
        show: false,
        position: 'center'
      },
      // 链接文字和图形的线是否显示
      labelLine: {
        show: false
      },
      data: [
        { value: 1, name: '0岁以下' },
        { value: 4, name: '20-29岁' },
        { value: 2, name: '30-39岁' },
        { value: 2, name: '40-49岁' },
        { value: 1, name: '50岁以上' }
      ]
    }
  ]})
  // 让图表跟随屏幕自动的去适应
  window.addEventListener('resize', function () {
    myChart.resize()
  })
})()

6.右边饼图

// 饼形图2 地区分布模块
;(()=> {
  var myChart = echarts.init(document.querySelector('.pie2 .chart'))
  myChart.setOption({
    color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      bottom: '0%',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: 'rgba(255,255,255,.5)',
        fontSize: '12'
      }
    },
    series: [
      {
        name: '地区分布',
        type: 'pie',
        radius: ['10%', '70%'],
        center: ['50%', '50%'],
        roseType: 'radius',
        // 图形的文字标签
        label: {
          fontSize: 10
        },
        // 链接图形和文字的线条
        labelLine: {
          // length 链接图形的线条
          length: 6,
          // length2 链接文字的线条
          length2: 8
        },
        data: [
          { value: 20, name: '云南' },
          { value: 26, name: '北京' },
          { value: 24, name: '山东' },
          { value: 25, name: '河北' },
          { value: 20, name: '江苏' },
          { value: 25, name: '浙江' },
          { value: 30, name: '四川' }
        ]
      }
    ]
  })
  // 监听浏览器缩放，图表对象调用缩放resize函数
  window.addEventListener('resize', function () {
    myChart.resize()
  })
})();

5. 中国地图

// 中国地图
(()=> {
  var myChart = echarts.init(document.querySelector('.map .chart'))
  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 XAData = [
    [{ name: '郑州' }, { name: '拉萨', value: 100 }],
    [{ name: '郑州' }, { name: '上海', value: 100 }],
    [{ name: '郑州' }, { name: '广州', value: 100 }],
    [{ name: '郑州' }, { name: '西宁', value: 100 }],
    [{ name: '郑州' }, { name: '银川', value: 100 }],
    [{ name: '郑州' }, { name: '韶关', value: 100 }],
    [{ name: '郑州' }, { name: '长春', value: 100 }],
    [{ name: '郑州' }, { name: '莱芜', value: 100 }],
    [{ name: '郑州' }, { name: '鄂尔多斯', value: 100 }],
    [{ name: '郑州' }, { name: '连云港', value: 100 }],
    [{ name: '郑州' }, { name: '潍坊', value: 100 }],
    [{ name: '郑州' }, { name: '秦皇岛', value: 100 }],
    [{ name: '郑州' }, { name: '湘潭', value: 100 }],
    [{ name: '郑州' }, { name: '兰州', value: 100 }],
    [{ name: '郑州' }, { name: '重庆', value: 100 }],
    [{ name: '郑州' }, { name: '泰安', value: 100 }],
    [{ name: '郑州' }, { name: '海口', value: 100 }],
    [{ name: '郑州' }, { name: '长沙', value: 100 }],
    [{ name: '郑州' }, { name: '贵阳', value: 100 }],
    [{ name: '郑州' }, { name: '东莞', value: 100 }],
    [{ name: '郑州' }, { name: '大连', value: 100 }],
    [{ name: '郑州' }, { name: '乌鲁木齐', value: 100 }],
    [{ name: '郑州' }, { name: '成都', value: 100 }],
    [{ name: '郑州' }, { name: '柳州', value: 100 }],
    [{ name: '郑州' }, { name: '昆明', value: 100 }]
  ]


  var XNData = [
    [{ name: '郑州' }, { name: '北京', value: 100 }],
    [{ name: '上海' }, { name: '郑州', value: 100 }],
    [{ name: '郑州' }, { name: '广州', value: 100 }],
    [{ name: '郑州' }, { name: '西安', value: 100 }],
    [{ name: '郑州' }, { name: '银川', value: 100 }],
  ]


  var YCData = [
    [{ name: '郑州' }, { name: '潍坊', value: 100 }],
    [{ name: '郑州' }, { name: '哈尔滨', value: 100 }],
    [{ name: '上海' }, { name: '郑州', value: 100 }],
    [{ name: '西安' }, { name: '郑州', value: 100 }],
    [{ name: '西宁' }, { name: '郑州', value: 100 }],
    [{ name: '北京' }, { name: '郑州', value: 100 }],
    [{ name: '广州' }, { name: '郑州', value: 100 }],
    [{ name: '成都' }, { name: '郑州', value: 100 }],
    [{ name: '柳州' }, { name: '郑州', value: 100 }]
  ]


  var planePath ='path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
  //var planePath = 'arrow';
  var convertData = function (data) {
    var res = []
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i]


      var fromCoord = geoCoordMap[dataItem[0].name]
      var toCoord = geoCoordMap[dataItem[1].name]
      if (fromCoord && toCoord) {
        res.push({
          fromName: dataItem[0].name,
          toName: dataItem[1].name,
          coords: [fromCoord, toCoord],
          value: dataItem[1].value
        })
      }
    }
    return res
  }


  var color = ['#a6c84c', '#ffa022', '#46bee9'] //航线的颜色
  var series = []
  ;[
    ['西安', XAData],
    ['西宁', XNData],
    ['银川', YCData]
  ].forEach(function (item, i) {
    series.push(
      {
        name: item[0] + ' Top3',
        type: 'lines',
        zlevel: 1,
        effect: {
          show: true,
          period: 6,
          trailLength: 0.7,
          color: 'red', //arrow箭头的颜色
          symbolSize: 3
        },
        lineStyle: {
          normal: {
            color: color[i],
            width: 0,
            curveness: 0.2
          }
        },
        data: convertData(item[1])
      },
      {
        name: item[0] + ' Top3',
        type: 'lines',
        zlevel: 2,
        symbol: ['none', 'arrow'],
        symbolSize: 10,
        effect: {
          show: true,
          period: 6,
          trailLength: 0,
          symbol: planePath,
          symbolSize: 15
        },
        lineStyle: {
          normal: {
            color: color[i],
            width: 1,
            opacity: 0.6,
            curveness: 0.2
          }
        },
        data: convertData(item[1])
      },
      {
        name: item[0] + ' Top3',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          brushType: 'stroke'
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            formatter: '{b}'
          }
        },
        symbolSize: function (val) {
          return val[2] / 8
        },
        itemStyle: {
          normal: {
            color: color[i]
          },
          emphasis: {
            areaColor: '#2B91B7'
          }
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[1].name,
            value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
          }
        })
      }
    )
  })
  var option = {
    tooltip: {
      trigger: 'item',
      formatter: function (params, ticket, callback) {
        if (params.seriesType == 'effectScatter') {
          return '线路：' + params.data.name + '' + params.data.value[2]
        } else if (params.seriesType == 'lines') {
          return params.data.fromName + '>' + params.data.toName + '<br />' + params.data.value
        } else {
          return params.name
        }
      }
    },
    legend: {
      orient: 'vertical',
      top: 'bottom',
      left: 'right',
      data: ['西安 Top3', '西宁 Top3', '银川 Top3'],
      textStyle: {
        color: '#fff'
      },
      selectedMode: 'multiple'
    },
    geo: {
      map: 'china',
      label: {
        emphasis: {
          show: true,
          color: '#fff'
        }
      },
      // 把中国地图放大了1.2倍
      zoom: 1.2,
      roam: true,
      itemStyle: {
        normal: {
          // 地图省份的背景颜色
          areaColor: 'rgba(20, 41, 87,0.6)',
          borderColor: '#195BB9',
          borderWidth: 1
        },
        emphasis: {
          areaColor: '#2B91B7'
        }
      }
    },
    series: series
  }
  myChart.setOption(option)
  // 监听浏览器缩放，图表对象调用缩放resize函数
  window.addEventListener('resize', function () {
    myChart.resize()
  })
})();