• Web 基于ECharts数据可视化

    基于ECharts数据可视化

    代码下载

    Echarts-介绍

    ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

    • 是一个JS插件
    • 性能好可流畅运行PC与移动设备
    • 兼容主流浏览器
    • 提供很多常用图表，且可定制。

    折线图、
    柱状图、
    散点图、
    饼图、
    K线图

    Echarts-体验

    官方教程：快速上手

    • 下载echarts
    • 引入echarts dist/echarts.min.js
    • 准备一个具备大小的DOM容器
    <div id="main" style="width: 600px;height:400px;">div>

    • 1
    • 初始化echarts实例对象
    var myChart = echarts.init(document.getElementById('main'));

    • 1
    • 指定配置项和数据(option)
    var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 将配置项设置给echarts实例对象
    myChart.setOption(option);

    • 1

    基础配置

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

    • series：控制图表
      • type: 类型 (什么类型的图表) 比如 line 是折线 bar 柱形等
      • name: 系列名称，用于tooltip的显示，legend 的图例筛选 变化
      • stack: 数据堆叠。如果设置相同值，则会数据堆叠；如果指定不同值或者去掉这个属性则不会发生数据堆叠。
      • 数据堆叠： 第二个数据值= 第一个数据值 + 第二个数据值，第三个数据值 = 第二个数据值 + 第三个数据值….依次叠加
    • xAxis：直角坐标系 grid 中的 x 轴
      • boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
    • yAxis：直角坐标系 grid 中的 y 轴
    • grid：直角坐标系内绘图网格。
    • title：标题组件
    • tooltip：提示框组件
    • legend：图例组件
    • color：调色盘颜色列表

    演示代码：

    var option = {
            color: ['pink', 'blue', 'green', 'skyblue', 'red'],
            title: {
                text: '我的折线图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['直播营销', '联盟广告', '视频广告', '直接访问']
            },
            grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                // 当刻度标签溢出的时候，grid 区域是否包含坐标轴的刻度标签。如果为true，则显示刻度标签
                // 如果left right等设置为 0% 刻度标签就溢出了，此时决定是否显示刻度标签
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                // 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
                boundaryGap: false,
                data: ['星期一', '星期二', '周三', '周四', '周五', '周六', '周日']
            },
            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]
                }
            ]
        };

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

    数据可视化项目

    使用技术
    • div + css 布局
    • flex 布局
    • css3动画
    • css3渐变
    • css3边框图片
    • 原生js + jquery 使用
    • rem适配
    • echarts基础
    REM适配
    • 设计稿是1920px
    • PC端适配： 宽度在 1024~1920之间页面元素宽高自适应
      1. flexible.js 把屏幕分为 24 等份
      2. cssrem 插件的基准值是 80px ，插件-配置按钮—配置扩展设置–Root Font Size 里面 设置。 但是别忘记重启vscode软件保证生效。
      3. 要把屏幕宽度约束在1024~1920之间有适配，实现代码：
    // 实现rem适配
@media screen and (max-width: 1024px) {
     html {
         font-size: 42.66px !important;
     }
 }

 @media screen and (min-width: 1920px) {
     html {
         font-size: 80px !important;
     }
 }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    基础布局

    略

    概览区域(overview)

    略

    监控区域(monitor)

    切换功能：

    • 绑定 标签页点击 事件
    • 当前容器加active其他容器移除active
    • index对应的内容容器显示其他容器隐藏
      // 切换
 $(".monitor .tabs").on("click", "a", function() {
    $(this).addClass("active").siblings("a").removeClass("active");
    // console.log($(this).index());
    //   选取对应索引号的content
    $(".monitor .content").eq($(this).index()).show().siblings(".content").hide();
  });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    动画功能实现思路：

    • 先克隆列表，追加在后面
    • marquee-view 占满剩余高度，溢出隐藏
      • 绝对定位，top 1.6rem bottom 0
      • 宽度100%，溢出隐藏
    • 使用animation实现动画
    • 使用 translateY 向上位移 50%
    • 动画时间15s，匀速播放，循环执行。

    js代码：

      // 动画
  $(".marquee-view .marquee").each(function() {
    // console.log($(this));
    var rows = $(this).children().clone();
    $(this).append(rows);
  });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    css代码：

    /* 通过CSS3动画滚动marquee */
.marquee-view .marquee {
  animation: move 15s linear infinite;
}
@keyframes move {
  0% {
  }
  100% {
    transform: translateY(-50%);
  }
}
/* 3.鼠标经过marquee 就停止动画 */
.marquee-view .marquee:hover {
  animation-play-state: paused;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    点位区域(point)

    ECharts图表实现步骤：

    • 从官方示例中找到类似图表，适当修改，引入到HTML页面中。
    • 按照产品需求，来定制图表。

    需求1：颜色设置

    color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],

    • 1

    需求2：修改饼形图大小 ( series对象)

    radius: ['10%', '70%'],

    • 1

    需求3： 把饼形图的显示模式改为 半径模式

     roseType: "radius",

    • 1

    需求4：数据使用更换（series对象 里面 data对象）

              { value: 20, name: '云南' },
          { value: 26, name: '北京' },
          { value: 24, name: '山东' },
          { value: 25, name: '河北' },
          { value: 20, name: '江苏' },
          { value: 25, name: '浙江' },
          { value: 30, name: '四川' },
          { value: 42, name: '湖北' }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    需求5：字体略小些 10 px ( series对象里面设置 )，饼图图形上的文本标签可以控制饼形图的文字的一些样式。 label 对象设置

    series: [
      {
        name: "面积模式",
        type: "pie",
        radius: [30, 110],
        center: ["50%", "50%"],
        roseType: "radius",
        // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
        label: {
          fontSize: 10
        },
      }
    ]
  };

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 需求6：防止缩放的时候，引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )
      • 连接图表 6 px
      • 连接文字 8 px
                        label: {
                        // 字体
                        fontSize: 10,
                        // 颜色
                        color: 'inherit',
                        // 描边颜色
                        textBorderColor: 'inherit',
                        // 描边宽度
                        textBorderWidth: 0
                    },
                    // 牵引线调整
                    labelLine: {
                        // 连接扇形图线长
                        length: 6,
                        // 连接文字线长
                        length2: 8
                    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    完整JS：

            var pointChart = echarts.init(document.querySelector('.pie'));
        option = {
            // 提示框
            tooltip: {
                // 触发方式。非轴图形，使用item的意思是放到数据对应图形上触发提示
                trigger: 'item',
                // 格式化提示内容：
                // a 代表series系列图表名称  
                // b 代表series数据名称 data 里面的name    
                // c 代表series数据值 data 里面的value   
                // d代表  当前数据/总数据的比例
                formatter: '{a} 
    {b} : {c} ({d}%)'    
            },
            // 控制图表
            series: [
                {
                    // 图表名称
                    name: '点位统计',
                    // 图表类型
                    type: 'pie',
                    // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
                    // 饼形图半径。 可以是像素。也可以是百分比（ 基于DOM容器大小）第一项是内半径，第二项是外半径（通过它可以实现饼形图大小）
                    radius: ['10%', '70%'],
                    // 图表中心位置 left 50%  top 50%  距离图表DOM容器
                    center: ['50%', '50%'],
                    // radius 半径模式，另外一种是 area 面积模式
                    roseType: 'radius',
                    // 颜色
                    color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
                    // 标签文字调整
                    label: {
                        // 字体
                        fontSize: 10,
                        // 颜色
                        color: 'inherit',
                        // 描边颜色
                        textBorderColor: 'inherit',
                        // 描边宽度
                        textBorderWidth: 0
                    },
                    // 牵引线调整
                    labelLine: {
                        // 连接扇形图线长
                        length: 6,
                        // 连接文字线长
                        length2: 8
                    },
                    // 数据集 value 数据的值 name 数据的名称
                    data: [
                        { value: 20, name: "云南" },
                        { value: 26, name: "北京" },
                        { value: 24, name: "山东" },
                        { value: 25, name: "河北" },
                        { value: 20, name: "江苏" },
                        { value: 25, name: "浙江" },
                        { value: 30, name: "四川" },
                        { value: 42, name: "湖北" }
                    ]
                }
            ]
        };
        pointChart.setOption(option);
        // 监听浏览器缩放，图表对象调用缩放resize函数
        $(window).resize(function() {
            pointChart.resize();
        });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    用户统计 (users)

    需求1： 修改柱子的颜色

    // 修改线性渐变色方式 1
color: new echarts.graphic.LinearGradient(
     // (x1,y2) 点到点 (x2,y2) 之间进行渐变
     0, 0, 0, 1,
     [
          { offset: 0, color: '#00fffb' }, // 0 起始颜色
          { offset: 1, color: '#0061ce' }  // 1 结束颜色
    ]
 ),
// 修改线性渐变色方式 2
color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    需求2： 提示框组件放到柱子上触发， 没有阴影等效果

    //提示框组件
tooltip: {
    trigger: 'item',
   // axisPointer: {            // 坐标轴指示器，坐标轴触发有效  这个模块我们此时不需要删掉即可
       // type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
   // }
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    需求3： 修改柱形图表大小， 以及相关网格。

    • 饼形图修改图表大小是通过 series 对象里面的 radius
    • 柱形图修改图标大小是通过 series 对象里面的 grid 对象 left right 等
    • 显示网格 show: true，网格颜色是 borderColor
    // 直角坐标系内绘图网格（区域）
grid: {
   top: '3%',
   right: '3%',
   bottom: '3%',
   left: '0%',
   //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
   containLabel: true,
   // 是否显示直角坐标系网格
   show: true,
   //grid 四条边框的颜色
   borderColor: 'rgba(0, 240, 255, 0.3)'
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    需求4： X 轴调整

    • 柱子在刻度之间
    • 剔除刻度不显示
    • 刻度标签文字颜色 #4c9bfd 通过 axisLabel 对象设置
    • 修改x轴线的颜色 axisLine 里面的 lineStyle
        // 控制x轴
    xAxis: [
      {
        // 使用类目，必须有data属性
        type: 'category',
        // 使用 data 中的数据设为刻度文字
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        // 刻度设置
        axisTick: {
           // true意思：图形和刻度居中中间
           // false意思：图形在刻度之间
           alignWithLabel: false,
           // 不显示刻度
           show: false
        },        
        // x坐标轴文字标签样式设置
        axisLabel: {
          color: '#4c9bfd'
       },
       // x坐标轴颜色设置
       axisLine:{
          lineStyle:{
              color:'rgba(0, 240, 255, 0.3)',
              // width:8,  x轴线的粗细
              // opcity: 0,   如果不想显示x轴线 则改为 0
             }
        }
      }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    需求5： Y 轴调整

    • 剔除刻度不显示
    • Y轴文字颜色 #4c9bfd 通过 axisLabel 对象设置
    • Y轴分割线颜色 splitLine 对象里面 lineStyle 对象设置
        // 控制y轴
    yAxis: [
      {
        // 使用类目，必须有data属性
        type: 'category',
        // 使用 data 中的数据设为刻度文字
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        // 刻度设置
        axisTick: {
           // 不显示刻度
           show: false
        },        
        // y坐标轴文字标签样式设置
        axisLabel: {
          color: '#4c9bfd'
       },
       // y坐标轴颜色设置
        axisLine:{
          lineStyle:{
               color:'rgba(0, 240, 255, 0.3)',
              // width:8,  x轴线的粗细
              // opcity: 0,   如果不想显示x轴线 则改为 0
             }
        },
        // y轴 分割线的样式 
         splitLine: {
            lineStyle: {
                color: 'rgba(0, 240, 255, 0.3)'
            }
         }     
    ],

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    需求6：调整数据，与省略图形定制

    // series
data: [2100,1900,1700,1560,1400,1200,1200,1200,900,750,600,480,240]

    • 1
    • 2
    // xAxis
data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆']

    • 1
    • 2
    • 省略图形
      • 经过图形才显示提示，且省略的柱子不需要提示
      • 图形单独设置颜色
      // 中间省略的数据  准备三项
  var item = {
      name:'',
      value: 1200,
      // 柱子颜色
      itemStyle: {
        color: '#254065'
      },
       // 鼠标经过柱子颜色
      emphasis: {
        itemStyle: {
          color: '#254065'
        }
      },
      // 工具提示隐藏
      tooltip: {
        show: false
        // 或者
        // extraCssText: 'opacity:0'
      },
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
      // series配置data选项在中使用
  data: [2100,1900,1700,1560,1400,item,item,item,900,750,600,480,240],

    • 1
    • 2

    当浏览器缩放的时候，图表也等比例缩放

      window.addEventListener("resize", function() {
    // 让图表调用 resize这个方法
    myChart.resize();
  });

    • 1
    • 2
    • 3
    • 4
    订单区域（order）

    订单区域（order）-效果实现步骤：

    • 提前准备数据
    • 点击后切tab激活样式
    • 点击后切换数据内容
    • 开启定时器动态切换数据
            var data = [
            { orders: '20,301,987', amount: '99834' },
            { orders: '301,987', amount: '9834' },
            { orders: '1,987', amount: '3834' },
            { orders: '987', amount: '834' }
        ]
        var index = 0;
        $('.order .filter').on('click', 'a', function() {
            index = $(this).index();
            $(this).addClass('active').siblings().removeClass();
            $('.order .item h4').eq(0).html(data[index].orders);
            $('.order .item h4').eq(1).html(data[index].amount);
        });
        setInterval(function() {
            index++;
            if (index > 3) index = 0;
            $('.order .filter a').eq(index).click();
        }, 3000);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    销售统计( sales )

    需求1： 修改折线图大小，显示边框设置颜色：#012f4a，并且显示刻度标签。

        // 设置网格样式
    grid: { 
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      show: true,// 显示边框
      borderColor: '#012f4a',// 边框颜色
      containLabel: true // 包含刻度文字在内
    },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    需求2： 修改图例组件中的文字颜色 #4c9bfd， 距离右侧 right 为 10%

     // 图例组件
    legend: {
      textStyle: {
        color: '#4c9bfd' // 图例文字颜色
      },
      right: '10%' // 距离右边10%
    },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    需求3： x轴相关配置

    • 刻度去除
    • x轴刻度标签字体颜色：#4c9bfd
    • 剔除坐标轴线颜色（将来使用Y轴分割线)
    • 轴两端是不需要内间距 boundaryGap
        xAxis: {
      type: 'category',
	  axisTick: {
         show: false // 去除刻度线
       },
       axisLabel: {
         color: '#4c9bfd' // 文本颜色
       },
       axisLine: {
         show: false // 去除轴线
       },
       boundaryGap: false  // 去除轴内间距
    },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    需求4： y轴的定制

    • 刻度去除
    • 字体颜色：#4c9bfd
    • 分割线颜色：#012f4a
        yAxis: {
      type: 'value',
      axisTick: {
        show: false  // 去除刻度
      },
      axisLabel: {
        color: '#4c9bfd' // 文字颜色
      },
      splitLine: {
        lineStyle: {
          color: '#012f4a' // 分割线颜色
        }
      }
    },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    需求5： 两条线形图定制

    • 颜色分别：#00f2f1 #ed3f35
    • 把折线修饰为圆滑 series 数据中添加 smooth 为 true
        color: ['#00f2f1', '#ed3f35'],
	series: [{
      name:'预期销售额',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      // 折线修饰为圆滑
      smooth: true,
      },{
      name:'实际销售额',
      data: [100, 331, 200, 123, 233, 543, 400],
      type: 'line',
      smooth: true,
    }]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    需求6： 配置数据

    // x轴的文字
xAxis: {
  type: 'category',
  data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

    • 1
    • 2
    • 3
    • 4
    // 图标数据
    series: [{
      name:'预期销售额',
      data:  [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      type: 'line',
      smooth: true
    },{
      name:'实际销售额',
      data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],     
      type: 'line',
      smooth: true
      }
    }]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    销售统计( sales )-切换效果实现步骤：

      1. 准备切换需要依赖的数据 4组
      1. 绑定点击事件
      • 切换激活 tab 的样式
      • 切换图表依赖的数据（重新渲染图表）
      1. 开启定时器，进行切换， 鼠标经过sales停止定时器，离开开启定时器

    第一步：准备数据，使用数据

            var data = [
          [
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
          ],
          [
            [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
            [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
          ],
          [
            [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
            [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
          ],
          [
            [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
            [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
          ]
        ];

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
        series: [{
      name:'预期销售额',
      data: data.[0][0],
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#00f2f1'
      }
    },{
      name:'实际销售额',
      data: data.[0][1],
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#ed3f35'
      }
    }]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    第二步：点击后切换

            // 切换
        var index = 0;
        $('.sales .caption').on('click', 'a', function() {
            // 此时要注意这个索引号的问题
            index = $(this).index() - 1;
            // 修改图表1的数据
            option.series[0].data = data[index][0];
            option.series[1].data = data[index][1];
            // 重新设置数据  让图标重新渲染    
            salesChart.setOption(option);

            // 样式
            $(this).addClass('active').siblings('a').removeClass();
        });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    第三步：tab栏自动切换效果

    • 开启定时器每隔3s，自动让a触发点击事件即可
    • 鼠标经过sales，关闭定时器，离开开启定时器
            var timer = null;
        function salesTimer() {
            timer = setInterval(function() {
                index++;
                if (index > 3) index = 0;
                $('.sales .caption a').eq(index).click();
            }, 2000);
        };
        salesTimer();
        // 鼠标经过sales，关闭定时器，离开开启定时器
        $('.sales').hover(function() {
            clearInterval(timer);
        }, function() {
            clearInterval(timer);
            salesTimer();
        });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    自动缩放

     // 当浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function() {
    // 让的图表调用 resize这个方法
    myChart.resize();
  });

    • 1
    • 2
    • 3
    • 4
    • 5
    渠道分布(channel)-雷达图

    需求1： 去掉背景颜色，调整雷达图大小 65%，指示器轴的分割段数为4条（4个圆圈）

    radar:{
    center: ['50%', '50%'],
    // 外半径占据容器大小
    radius: '65%',
    // 指示器轴的分割段数
    splitNumber: 4,
}  

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    需求2： 雷达图分割线设为白色半透明 0.5

     // 坐标轴在 grid 区域中的分隔线（圆圈）
   splitLine: {
        lineStyle: {
           color: 'rgba(255, 255, 255, 0.5)',
           // width: 2,
           // type: 'dashed'
           }
   },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    需求3： 雷达图 坐标轴轴线相关设置(竖线) axisLine

    // 坐标轴轴线相关设置(竖线)axisLine
axisLine: {
       show: true,
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
                // width: 1,
                // type: 'solid'
             }
 },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    需求4： 修饰雷达图文字颜色为 #4c9bfd

    name: {
    // 修饰雷达图文本颜色
     textStyle: {
       color: '#4c9bfd'
     }
},

或者
eries: [
              {
                label: {
                  color: '#4c9bfd'
                },
        ]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    需求5： 修饰 区域填充样式 series 对象

    • 区域填充的背景颜色设置为： rgba(238, 197, 102, 0.6)
     areaStyle: {
     color: 'rgba(238, 197, 102, 0.6)',
},

    • 1
    • 2
    • 3
    • 区域填充的线条颜色为白色
    // 线条样式
  lineStyle: {
         normal: {
              color: '#fff',
              // width: 1
         }
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    需求6： 标记的图形(拐点）设置 注意 series 里面设置

    • 用圆点显示， 拐点的大小设置为 5
    • 小圆点设置为白色
    • 在小圆点上显示相关数据，颜色设置为白色，10像素
    // symbol 标记的样式(拐点），还可以取值'rect' 方块 ,'arrow' 三角等
symbol: 'circle', 
// 拐点的大小  
symbolSize: 5, 
// 小圆点（拐点）设置为白色
itemStyle: {
       color: '#fff'
},
// 在圆点上显示相关数据
label: {
     show: true,
     color: '#fff',
     fontSize: 10
},    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    需求7： 鼠标经过显示提示框组件

    tooltip: {
    show: true,
    // 控制提示框组件的显示位置
    position: ['60%', '10%'],
},

    • 1
    • 2
    • 3
    • 4
    • 5

    需求8： 更换数据

     // 雷达图的指示器 内部填充数据
  indicator: [
        { name: '机场', max: 100 },
        { name: '商场', max: 100 },
        { name: '火车站', max: 100 },
        { name: '汽车站', max: 100 },
        { name: '地铁', max: 100 }
 ],

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    data: [[90, 19, 56, 11, 34]],

    • 1

    整个代码

    // 销售渠道模块 雷达图
(function() {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".radar"));
  // 2.指定配置

  var option = {
    tooltip: {
      show: true,
      // 控制提示框组件的显示位置
      position: ["60%", "10%"]
    },
    radar: {
      indicator: [
        { name: "机场", max: 100 },
        { name: "商场", max: 100 },
        { name: "火车站", max: 100 },
        { name: "汽车站", max: 100 },
        { name: "地铁", max: 100 }
      ],
      // 修改雷达图的大小
      radius: "65%",
      shape: "circle",
      // 分割的圆圈个数
      splitNumber: 4,
      name: {
        // 修饰雷达图文字的颜色
        textStyle: {
          color: "#4c9bfd"
        }
      },
      // 分割的圆圈线条的样式
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255, 0.5)"
        }
      },
      splitArea: {
        show: false
      },
      // 坐标轴的线修改为白色半透明
      axisLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.5)"
        }
      }
    },
    series: [
      {
        name: "北京",
        type: "radar",
        // 填充区域的线条颜色
        lineStyle: {
          normal: {
            color: "#fff",
            width: 1,
            opacity: 0.5
          }
        },
        data: [[90, 19, 56, 11, 34]],
        // 设置图形标记 （拐点）
        symbol: "circle",
        // 这个是设置小圆点大小
        symbolSize: 5,
        // 设置小圆点颜色
        itemStyle: {
          color: "#fff"
        },
        // 让小圆点显示数据
        label: {
          show: true,
          fontSize: 10
        },
        // 修饰我们区域填充的背景颜色
        areaStyle: {
          color: "rgba(238, 197, 102, 0.6)"
        }
      }
    ]
  };
  // 3.把配置和数据给对象
  myChart.setOption(option);
  // 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function() {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    销售进度 (quarter) -饼状图

    需求1：改成半圆，图表大一些，让50%文字在中心。

      var option = {
    series: [
      {
        type: 'pie',
        // 放大图形
        radius: ['130%', '150%'],  
        // 移动下位置  套住50%文字
        center: ['48%', '80%'],   
        label: {
          normal: {
            show: false
          }
        },  
        // 起始角度，支持范围[0, 360]
        startAngle: 180,
        data: [
          { value: 100 }, // 不需要名称
          { value: 100,}, // 不需要名称
          { value: 200, itemStyle: { color: 'transparent' } } // 透明隐藏第三块区域
        ]
      }
    ]
  }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    需求2：鼠标经过无需变大，修改第一段颜色渐变#00c9e0->#005fc1，修改第二段颜色#12274d。

           // 鼠标经过不变大
       hoverOffset: 0,  
        data: [
          {
            value: 100,
            itemStyle: {
              // 颜色渐变#00c9e0->#005fc1
              color: new echarts.graphic.LinearGradient(
                // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "#00c9e0" }, // 0 起始颜色
                  { offset: 1, color: "#005fc1" } // 1 结束颜色
                ]
              )
            }
          },  
        { value: 100, itemStyle: { color: '#12274d' } }, // 颜色#12274d

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    热销排行（top）

    热销排行（top）-效果实现思路：

    • 准备后台返回的真实数据
    • 利用数据渲染各省热销模块 sup 模块 (拼接html格式字符串，进行渲染)
    • 当鼠标进入 tab 的时候
      • 激活当前的tab样式，删除其他tab的样式
      • 渲染各省热销 sub 模块 (拼接html格式字符串，进行渲染)
    • 默认激活第一个tab的效果
    • 开启定时器，按依次切换

    预备 ES6模版字符：

    // 模版字符
var star = {
        name: "刘德华",
        age: 18
      };
//   以前的写法 拼接的时候引号很容易出问题
console.log("我的名字是" + star.name + "我的年龄是" + star.age);
//   ES6 模板字符写法
console.log(`我的名字是${star.name}我的年龄是${star.age}`);
console.log(`${star.name}${star.age}`);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    开始实现：
    第一步：得到后台数据（实际开发中，这个数据通过ajax请求获得）

        var hotData = [
      {
        city: '北京',  // 城市
        sales: '25, 179',  // 销售额
        flag: true, //  上升还是下降
        brands: [   //  品牌种类数据
          { name: '可爱多', num: '9,086', flag: true },
          { name: '娃哈哈', num: '8,341', flag: true },
          { name: '喜之郎', num: '7,407', flag: false },
          { name: '八喜', num: '6,080', flag: false },
          { name: '小洋人', num: '6,724', flag: false },
          { name: '好多鱼', num: '2,170', flag: true },
        ]
      },
      {
        city: '河北',
        sales: '23,252',
        flag: false,
        brands: [
          { name: '可爱多', num: '3,457', flag: false },
          { name: '娃哈哈', num: '2,124', flag: true },
          { name: '喜之郎', num: '8,907', flag: false },
          { name: '八喜', num: '6,080', flag: true },
          { name: '小洋人', num: '1,724', flag: false },
          { name: '好多鱼', num: '1,170', flag: false },
        ]
      },
      {
        city: '上海',
        sales: '20,760',
        flag: true,
        brands: [
          { name: '可爱多', num: '2,345', flag: true },
          { name: '娃哈哈', num: '7,109', flag: true },
          { name: '喜之郎', num: '3,701', flag: false },
          { name: '八喜', num: '6,080', flag: false },
          { name: '小洋人', num: '2,724', flag: false },
          { name: '好多鱼', num: '2,998', flag: true },
        ]
      },
      {
        city: '江苏',
        sales: '23,252',
        flag: false,
        brands: [
          { name: '可爱多', num: '2,156', flag: false },
          { name: '娃哈哈', num: '2,456', flag: true },
          { name: '喜之郎', num: '9,737', flag: true },
          { name: '八喜', num: '2,080', flag: true },
          { name: '小洋人', num: '8,724', flag: true },
          { name: '好多鱼', num: '1,770', flag: false },
        ]
      },
       {
        city: '山东',
        sales: '20,760',
        flag: true,
        brands: [
          { name: '可爱多', num: '9,567', flag: true },
          { name: '娃哈哈', num: '2,345', flag: false },
          { name: '喜之郎', num: '9,037', flag: false },
          { name: '八喜', num: '1,080', flag: true },
          { name: '小洋人', num: '4,724', flag: false },
          { name: '好多鱼', num: '9,999', flag: true },
        ]
      }
    ]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67

    第二步：根据数据渲染各省热销 sup 模块内容

    • 删掉原先自带小li
    • 遍历数据 $.each()
    • 拼接字符串把数据渲染到 li 的span 里面
    • 追加给 .sup 盒子
     var supHTML = "";
  $.each(hotData, function(index, item) {
    // console.log(item);
    supHTML += `
  • ${item.city} ${item.sales} ${item.flag ? "icon-up" : "icon-down"}>
    • `    ;
  });
  $(".sup").html(supHTML);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    第三步：当数据进入 tab 的时候

    • 激活当前的tab样式，删除其他tab的样式
    • 渲染各省热销 sub 模块
      • 注意鼠标进入tab， 只遍历 当前索引号对应的 城市对象里面的 brands
      • 拼接html格式字符串，进行渲染
          var index = 0;
      function render() {
        $('.top .data .sup li').eq(index).addClass('active').siblings('li').removeClass();
        let data = hotData[index];
        $('.top .data .sub').empty();
        $.each(data.brands, function(i, o) {
          let e = $(`
  • ${o.name} ${o.num}${o.flag ? "icon-up" : "icon-down"}>
    • `    );
          $('.top .data .sub').append(e);
        })
      }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    第四步：默认激活第一个tab

      // 所有的LI
  var $lis = $('.province .sup li')
  // 第一个默认激活
  $lis.eq(0).mouseenter()

    • 1
    • 2
    • 3
    • 4

    第五步：开启定时切换

    • 定时器里面 mouseenter 冲突问题的解决方案

      定时器里面不加mousenter 事件，而是直接重新渲染数据就可以(执行鼠标经过事件里面的代码)

      最好把渲染的代码封装到函数里面

          var timer = null;
      function topTimer() {
        timer = setInterval(function() {
          index++;
          if (index >= hotData.length) { index = 0; }
          render();
        }, 2000);
      }
      topTimer();
      $('.top .data .sup').hover(function() {
        clearInterval(timer);
      }, function() {
        clearInterval(timer);
        topTimer();
      });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    Echarts-社区介绍

    社区 就是一些，活跃的echart使用者，交流和贡献定制好的图表的地方。

    在这里可以找到一些基于echart的高度定制好的图表，相当于基于jquery开发的插件，这里是基于echarts开发的第三方的图表。

    Echarts-map使用（扩展）

    参考社区的例子：https://www.makeapie.cn/echarts_content/x0-ExSkZDM.html (模拟飞机航线)

    实现步骤：

    • 第一需要下载china.js提供中国地图的js文件
    • 使用社区提供的配置即可。

    需要修改：

    • 去掉图例组件和标题组件
    • 去掉背景颜色
    • 修改地图省份背景 #142957
    • 地图放大通过 zoom 设置为1.2即可
            geo: {
            map: 'china',
            label: {
                emphasis: {
                    show: true,
                    color:'#fff'
                }
            },
            roam: true,
            //   放大地图
            zoom: 1.2,
            itemStyle: {
              normal: {
                  areaColor: '#142957',
                  borderColor: '#195BB9',
                  borderWidth: 1,
              },
              emphasis: {
                  areaColor: '#2B91B7'
              }
            }
        },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
  • 相关阅读:
    HP惠普暗影精灵10 OMEN Gaming Laptop 16-wf1xxx原厂Win11系统镜像下载
    ubuntu主机之间移植python环境并修改pip指向
    Mac app 公证处理流程
    Stm32_标准库_9_TIM
    HVIDB！人类病毒蛋白互作数据库介绍
    网络安全（黑客）自学
    代码随想录算法训练营第十七天 | LeetCode 110. 平衡二叉树、257. 二叉树的所有路径、404. 左叶子之和
    【学习笔记77】ajax的函数封装
    数据结构-单链表的代码实现
    python输出唐诗 青少年编程电子学会python编程等级考试二级真题解析2021年12月
  • 原文地址：https://blog.csdn.net/jiuchabaikaishui/article/details/133430264