小小林熬夜学编程

这个屌丝很懒，什么也没留下！

热门标签

06-ECharts_echarts.init

作者：小小林熬夜学编程 | 2024-02-21 13:15:31

踩

echarts.init

可视化项目

Apache ECharts

数据可视化

数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。
数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。
数据可视化在我们互联网公司中经常用于通用数据报表，移动端图表，大屏可视化，图编辑等
ECharts.js 百度出品的一个开源 Javascript 数据可视化库

使用技术

完成该项目需要具备以下知识：

div + css 布局
flex 布局
css3动画
css3渐变
css3边框图片
原生js + jquery 使用
rem适配
echarts基础

 CSS3 动画、渐变
 jQuery库+ 原生 JavaScript
 flex布局和 rem 适配方案
 图片边框 border-image
 ES6 模板字符
 ECharts 可视化库等等

ECharts的基本使用

ECharts 使用五步曲

步骤1：下载并引入echarts.js文件---------->图表依赖这个js库
步骤2：准备一个具备大小的DOM容器---------->生成的图表会放入这个容器
步骤3：初始化echarts实例对象----------->实例化echarts对象
步骤4：指定配置项和数据(option)--------->根据具体需求修改配置选项
步骤5：将配置项设置给echarts实例对象--------->让echarts对象根据修改好的配
置生效

文档菜单—配置项手册学echarts关键在于学会查阅文档，根据需求修改配置

Echarts-体验

自己步骤：

下载echarts https://github.com/apache/incubator-echarts/tree/4.5.0
引入echarts dist/echarts.min.js
准备一个具备大小的DOM容器

<div id="main" style="width: 600px;height:400px;"></div>
1

初始化echarts实例对象

echarts.init () 是一个方法

echarts.init () = new Obj( )

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实例对象

setoption 设置

myChart.setOption(option);
1

Echarts-基础配置

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

series
- 系列列表。每个系列通过 type 决定自己的图表类型
- 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
xAxis：直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
yAxis：直角坐标系 grid 中的 y 轴
grid：直角坐标系内绘图网格。
title：标题组件
tooltip：提示框组件
legend：图例组件
color：调色盘颜色列表

数据堆叠，同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加。

代码演示 :

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

grid

如果 left right 为0% , 刻度标签就溢出了 , 此时决定了是否显示刻度标签

  grid: {
    containLabel: true
  },
1
2
3

xAxis

默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

boundaryGap: false // 刻度显示
1

color

线条颜色 , 后面跟数组类型

 legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  }
  
   series: [
    {
      name: 'Email', // name 和 legend 里面的数据对应显示, 包括修改和删除 
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    }
    ]
1
2
3
4
5
6
7
8
9
10
11
12

stack : 数据堆叠

如果给stack 指定不同值或者去掉这个属性则不会发生数据堆叠
如果要直观的显示数据可以直接删除掉
后期要显示数据可以给stack 设置不同的值

01-数据可视化项目适配方案

REM适配

设计稿是1920px
PC端适配：宽度在 1024~1920之间页面元素宽高自适应
1. flexible.js 把屏幕分为 24 等份
2. cssrem 插件的基准值是 80px , 按最大设计稿尺寸划分 (1920)
  
  插件-配置按钮—配置扩展设置–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

02-项目搭建(初始化)

新建相关文件夹
引入相关文件

03-基础布局

效果图： 1920px * 1078px
body 设置背景图，行高1.15
viewport 主体容器，限制最小宽度1024px，与最大宽度1920px，最小高度780px。
- 需要居中显示
- 使用logo.png做为背景图，在容器内显示
- 内间距 88px 20px 0
column 列容器，分三列，占比 3：4：3
- 中间容器外间距 32px 20px 0

04-边框图片

边框图片切割原理：（重要）
把四个角切出去（九宫格的由来），中间部分可以铺排、拉伸或者环绕。

组合写法：

border-image: url("images/border.jpg") 167/20px round;
// 路径 , 裁剪的尺寸 , 图片边框 , 图片边框平铺
1
2

拆分写法：

border-image-source: url("images/border.jpg"); 
border-image-slice: 167 167 167 167;
border-image-width: 20px;
border-image-repeat: round;
1
2
3
4

要设置边框图片需要设置边框大小

边框图片的宽度，默认边框的宽度。

border-image-width 需要加单位 ; border-image-slice 不需要加单位

border: 15px solid pink;
1

05-设置公共面板样式

inner 里的内容会显示边框下面 , 为了让inner 显示在panel 中间 , inner 盒子采用定位负的 left top bottom right 的值撑大盒子 , 给一个上下左右内边距隔开

面板 .panel

容器 .inner 内边距是上下24px 左右 36px

/* 公共面板样式  */
.panel {
    // 边框盒子
    position: relative;
    border: 15px solid transparent;
    border-width: .6375rem .475rem .25rem 1.65rem;
    border-image-source: url(../images/border.png);
    border-image-slice: 51 38 20 132;
    margin-bottom: .25rem;
}
.inner {
    // 负值撑开盒子
    position: absolute;
    top: -0.6375rem;
    left: -1.65rem;
    right: -0.475rem;
    bottom: -0.25rem;
    padding: .3rem .45rem;
   
}
.panel h3 {
  font-size: 0.25rem;
  color: #fff;
  font-weight: 400;
}
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

06-概览区域(overview)-布局

07-监控区域(monitor)-布局

监控区域 monitor 大盒子的高度是 480px

结构解释：

.tabs 标签选项加上active激活选项默认激活第一个选项
.content 切换内容加上style="display: block;"显示内容默认激活第一个内容

样式描述：

.inner 容器内间距 24px 0
.tabs 容器内间距 0 36px
- a 容器颜色： #1950c4 内间距：0 27px 字体：18px
- 第一个a容器去除左侧内间距加上右侧2px宽度边框#00f2f1
- 激活的时候颜色白色
.content容器
- 占满剩余高度 flex:1
- 默认隐藏
.head 容器
- 行高 1.05 背景 rgba(255, 255, 255, 0.1) 内间距 12px 36px 颜色 #68d8fe 字体大小 14px
row 容器
- 行高 1.05 内间距 12px 36px 颜色 #68d8ff 字体大小 12px
- .icon-dot 字体图标绝对定位左边0.2rem 透明度0
- 鼠标经过后：背景 rgba(255, 255, 255, 0.1) 透明度1
col容器
- 宽度：1rem 2.5rem 1rem
- 第二个col 一行不换行溢出省略

08-监控区域-效果

立即执行函数用法

JS文件中，会有大量的变量命名，特别是Echarts使用中，需要大量初始化Echarts对象？
为了防止变量名冲突(变量污染）我们采用立即执行函数策略：

(function(){})();
1

注意 : 多个立即执行函数中间必须加分号隔开

切换功能

绑定标签页点击事件
当前容器加active其他容器移除active
index对应的内容容器显示其他容器隐藏

动画功能：

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

无缝滚动原理

先克隆marquee里面所有的行（row）
通过CSS3动画滚动marquee
鼠标经过marquee 就停止动画：

animation-play-state: paused;
1

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

09-点位区域(point)-布局

复制 html 和 css
设置公共样式 h3

10-点位区域-饼图

1. HTML引入图表

// 点位分布统计模块
(function() {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".pie"));
  // 2. 指定配置项和数据
  var option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

    series: [
      {
        name: "面积模式",
        type: "pie",
        radius: [30, 110],
        center: ["75%", "50%"],
        roseType: "area",
        data: [
          { value: 10, name: "rose1" },
          { value: 5, name: "rose2" },
          { value: 15, name: "rose3" },
          { value: 25, name: "rose4" },
          { value: 20, name: "rose5" },
          { value: 35, name: "rose6" },
          { value: 30, name: "rose7" },
          { value: 40, name: "rose8" }
        ]
      }
    ]
  };

  // 3. 配置项和数据给我们的实例化对象
  myChart.setOption(option);
})();

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

2. 定制需求

第一步：参考官方例子，熟悉里面参数具体含义

option = {
    
    // 提示框组件
    tooltip: {
      // trigger 触发方式。  非轴图形，使用item的意思是放到数据对应图形上触发提示
      trigger: 'item',
      // 格式化提示内容：
      // a 代表series系列图表名称  
      // b 代表series数据名称 data 里面的name    
      // c 代表series数据值 data 里面的value   
      // d代表  当前数据/总数据的比例
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    
    // 控制图表
    series: [
      {       
        name: '点位统计', // 图表名称        
        type: 'pie',  // 图表类型
        // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
        // 饼形图半径。 可以是像素。也可以是百分比（ 基于DOM容器大小）第一项是内半径，第二项是外半径（通过它可以实现饼形图大小）
        radius: ['10%', '70%'],   
        center: ['50%', '50%'], // 图表中心位置 left 50%  top 50%  距离图表DOM容器      
        roseType: 'radius',     // radius 半径模式 半径长短，另外一种是 area 面积模式    
        // 数据集 value 数据的值 name 数据的名称
        data: [
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
                {value:20, name:'rose5'},
                {value:35, name:'rose6'},
                {value:30, name:'rose7'},
                {value:40, name:'rose8'}
            ]
        }
    ]
};
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

第二步：按照需求定制

需求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: '山东' },
1
2
3

需求5：字体略小些 10 px ( series对象里面设置 )

饼图图形上的文本标签可以控制饼形图的文字的一些样式。 label 对象设置

需求6：防止缩放的时候，引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )

连接图表 6 px
连接文字 8 px

        // 文字调整
+        label:{
+          fontSize: 10
+        },
+        // 引导线调整
+        labelLine: {          
+          length: 6, // 连接扇形图线长          
+          length2: 8 // 连接文字线长
+        } 
1
2
3
4
5
6
7
8
9

需求7：浏览器缩放的时候，图表跟着自动适配。

// 监听浏览器缩放，图表对象调用缩放resize函数
// resize 是 myChart 对像的方法  
window.addEventListener("resize", function() {
    myChart.resize();
  });
1
2
3
4
5

代码演示

(function () {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".pie"));
  // 2. 指定配置项和数据
  var option = {
    // 一. 提示框组件
    tooltip: {
      trigger: "item", // 移动触发条件
      formatter: "{a} <br/>{b} : {c} ({d}%)", // 格式化提示内容
      // 格式化提示内容：
      // a 代表series系列图表名称
      // b 代表series数据名称 data 里面的name
      // c 代表series数据值 data 里面的value
      // d代表  当前数据/总数据的比例
    },

    // 二. 设置颜色
    color: ["#006cff", "#60cda0", "#ed8884", "#ff9f7f", "#0096ff", "#9fe6b8", "#32c5e9", "#1d9dff"],

    // 三. series系列列表
    series: [
      {
        name: "点位统计", // 图标名称
        type: "pie", // 图标类型
        radius: ["10%", "70%"], // 修改饼形图大小 ( series对象)
        center: ["50%", "50%"], // 修改饼形图位置 ( series对象)
        roseType: "radius", // 饼形图的显示模式改为 半径模式
        // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
        label: {
          fontSize: 10, // 修改文字大小
        },
        // 引导线调整
        labelLine: {
          length: 6, // 连接扇形图线长
          length2: 8, // 连接文字线长
        },

        // 更换数据
        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: "湖北" },
        ],
      },
    ],
  };

  // 3. 配置项和数据给我们的实例化对象
  myChart.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  // resize 是 myChart 对像的方法
  window.addEventListener("resize", function () {
    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

3. 饼图区域总结

11-地图区域 (map) -预留布局

注意第二列（column) 有个外边距（上面 32px 左右 20px 下是 0）

.viewport .column:nth-child(2) {
    flex: 4;
    margin: .4rem .25rem 0;
}
1
2
3
4

12-用户统计 (users) -布局

复制 html 和 css 结构

13-用户统计 (users) -柱状图

引入柱形图

// 1. 实例化对象
// 2. 指定配置和数据
// 3. 把配置给实例对象
// 4. 当我们浏览器缩放的时候，图表也等比例缩放
1
2
3
4

第二步：按照需求修改

需求1：修改柱子的颜色

// 修改线性渐变色方式 1
color: new echarts.graphic.LinearGradient(
     // (x1,y1) 点到点 (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
24

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

//提示框组件
tooltip: {
    trigger: 'item',   // 触发类型  经过轴触发axis  经过柱子触发item
   // axisPointer: {            // 坐标轴指示器，坐标轴触发有效  这个模块我们此时不需要删掉即可
       // type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
   // }
},
1
2
3
4
5
6
7

需求3：修改柱形图表大小，以及相关网格。
- 饼形图修改图表大小是通过 series 对象里面的 radius
- 柱形图修改图标大小是通过 series 对象里面的 grid 对象 left right 等
- 显示网格 show: true，网格颜色是 borderColor

    // 直角坐标系内绘图网格（区域）
    grid: {
      left: "0%", // 网格距离 上右下左 的距离
      right: "3%",
      bottom: "3%",
      containLabel: true, // 溢出是否包含文本
      show: true, // 是否显示直角坐标系网格
      borderColor: "rgba(0, 240, 255, 0.3)", //grid 四条边框的颜色 , 前提show 为true
    },
1
2
3
4
5
6
7
8
9

需求4： X 轴调整
- 柱子在刻度之间
- 剔除刻度不显示
- 刻度标签文字颜色 #4c9bfd 通过 axisLabel 对象设置
- 修改x轴线的颜色 axisLine 里面的 lineStyle

        // 1.刻度设置
        axisTick: {
          alignWithLabel: true, // true意思：图形在刻度中间 ,false意思：图形在刻度之间
          show: false, // 不显示刻度
        },

        // 2.x坐标轴文字标签样式设置
        axisLabel: {
          color: "#4c9bfd",
        },

        // 3.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

需求5： Y 轴调整
- 剔除刻度不显示
- Y轴文字颜色 #4c9bfd 通过 axisLabel 对象设置
- Y轴分割线颜色 splitLine 对象里面 lineStyle 对象设置

    yAxis: [
      {
        // 1.刻度设置
        axisTick: {
          show: false, // 不显示刻度
        },

        // 2.y坐标轴文字标签样式设置
        axisLabel: {
          color: "#4c9bfd",
        },

        // 3.y坐标轴颜色设置
        axisLine: {
          lineStyle: {
            color: "rgba(0, 240, 255, 0.3)",
            // width:8,  x轴线的粗细
            // opcity: 0,   如果不想显示x轴线 则改为 0
          },
        },

        // 4.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

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

        // x 轴的柱形图数据 // xAxis
        data: ["上海", "广州", "北京", "深圳", "合肥", "", "......", "", "杭州", "厦门", "济南", "成都", "重庆"],
1
2

// series 柱形图数据
data: [2100,1900,1700,1560,1400,1200,1200,1200,900,750,600,480,240]
1
2

省略图形
- 经过图形才显示提示，且省略的柱子不需要提示 ( 提取变量 )
- 图形单独设置颜色

var item = {
    name: "",
    value: 1200,
    // 柱子颜色
    itemStyle: {
      color: "#254065",
    },
    // 鼠标经过柱子颜色
    emphasis: {
      itemStyle: {
        color: "#254065",
      },
    },
    // 鼠标经过工具提示隐藏
    tooltip: {
      extraCssText: "opacity:0",
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// series配置data选项在中使用
data: [2100,1900,1700,1560,1400,item,item,item,900,750,600,480,240],
1
2

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

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

柱形图线条样式总结

核心原理：series 对象里面的data数组,里面的每一个数据影响每一个柱形。
重要的是，data数组里面除了直接写数字，还可以是对象。
直接把data里面对应的数据修改为需求配置的对象即可。

14-订单区域（order）-布局

复制 html 和 css 结构

15-销售统计( sales )-布局

复制 html 和 css 结构

16-销售统计( sales )-线形图

实现步骤：

寻找官方的类似示例，给予分析, 引入到HTML页面中
按照需求来定制它。

**第一步：**寻找官方的类似示例，给予分析。

// 销售统计模块
(function () {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".line"));

  // 2. 指定配置和数据
  var option = (option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["Email", "Union Ads"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["Mon", "Tue"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "Email",
        type: "line",
        stack: "Total",
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: "Union Ads",
        type: "line",
        stack: "Total",
        data: [220, 182, 191, 234, 290, 330, 310],
      },
    ],
  });

  // 3. 把配置给实例对象
  myChart.setOption(option);

  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function () {
    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

**第二步：**按照需求来定制它。

需求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',
      data: ["周一", "周二"],
	  axisTick: {
         show: false // 去除刻度线
       },
       axisLabel: {
         color: '#4c9bfd' // 文本颜色
       },
       axisLine: {
         show: false // 去除轴线
       },
       boundaryGap: false  // 去除轴内间距
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

需求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
如果series 里面设置了name，此时图例组件的data可以省略

data: [“邮件营销”, “联盟广告”]

    color: ['#00f2f1', '#ed3f35'],
        
	series: [{
      name:'预期销售额',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',      
      smooth: true,  // 折线修饰为圆滑
      },{
      name:'实际销售额',
      
      type: 'line',
      smooth: true,
    }]
1
2
3
4
5
6
7
8
9
10
11
12
13

需求6：配置数据

复制// x轴的文字和// 图标数据

总结：现在给的是年份数据，还需要切换效果。

点击年显示data 对应的数据[data]

17-销售统计( sales )-切换效果

销售统计模块切换原理

核心原理：

series 里面的data 数据决定着折线的显示
当我们点击不同的tab标签，就让 series 里面的data调用不同的数据即可。
我们现在只准备了年的数据，还需要准备季度、月和周的数据

实现步骤：

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

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

  var data = {
    year: [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
    ],
    quarter: [
      [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
      [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
    ],
    month: [
      [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
      [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
    ],
    week: [
      [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 里面修改 data 数据

    series: [{
      name:'预期销售额',
      data: data.year[0],
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#00f2f1'
      }
    },{
      name:'实际销售额',
      data: data.year[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

第二步：点击后切换

  // 切换
  $('.sales').on('click', '.caption a', function(){
    // 样式
    $(this).addClass('active').siblings().removeClass('active')
    // currData 当前对应的数据  
    // this.dataset.type 标签上的data-type属性值，对应data中的属性
    // obj[k]
    // data["year"]
    var currData = data[this.dataset.type] ?
    // 修改图表1的数据
    option.series[0].data = currData[0]
    // 修改图表2的数据                  
    option.series[1].data = currData[1]
    // 重新设置数据  让图标重新渲染                 
    myChart.setOption(option)
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

开启定时器每隔3s，自动让a触发点击事件即可
鼠标经过sales，关闭定时器，离开开启定时器

var as = $(".sales .caption a");
  var index = 0;
  var timer = setInterval(function() {
    index++;
    if (index >= 4) index = 0;
    as.eq(index).click();
  }, 1000);
  // 鼠标经过sales，关闭定时器，离开开启定时器
  $(".sales").hover(
    function() {
      clearInterval(timer);
    },
    function() {
    // 开启之前先清除定时器
      clearInterval(timer);
      timer = setInterval(function() {
        index++;
        if (index >= 4) index = 0;
        as.eq(index).click();
      }, 1000);
    }
  );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

自动缩放

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

18-渠道区域&销售进度-布局

复制 html 和 css 样式

19-渠道分布(channel)-雷达图

第一步：参考类似实例：

第二步：按照需求来定制它

需求1：去掉背景颜色，调整雷达图大小 65%

radar:{
    center: ['50%', '50%'],
    // 外半径占据容器大小
    radius: '65%',
}  
1
2
3
4
5

需求2：指示器轴的分割段数为4条（4个圆圈）

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

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

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

需求4：雷达图坐标轴轴线相关设置(竖线) 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

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

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

需求6：修饰区域填充样式 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

需求7：标记的图形(拐点）设置注意 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

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

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

需求9：更换数据

 // 雷达图的指示器 内部填充数据
  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
89

20-销售进度 (quarter) -饼状图

实现步骤：

寻找官方的类似示例，给予分析,引入到HTML页面中
按照需求来定制它。

第一步：参考官方示例：https://www.echartsjs.com/examples/zh/editor.html?c=pie-doughnut

// 销售模块 饼形图 半圆形 设置方式
(function() {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".gauge"));
  // 2. 指定数据和配置
  var option = {
    series: [
      {
        name: "销售进度",
        type: "pie",
        radius: ["50%", "70%"],
        //是否启用防止标签重叠策略
        // avoidLabelOverlap: false,
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [{ value: 100 }, { value: 100 }, { value: 200 }]
      }
    ]
  };
      // 3. 把数据和配置给实例对象
  myChart.setOption(option);
})();
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

第二步：进行定制

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

  var option = {
    series: [
      {
        type: "pie", // 饼形图
        radius: ["130%", "150%"], // 放大半圆图形
        center: ["48%", "80%"], // 移动半圆位置  套住50%文字
        // avoidLabelOverlap: false,  //是否启用防止标签重叠策略
        label: {
          normal: {
            show: false  // 线隐藏
          }
        },          
        startAngle: 180, startAngle: 180, // 半圆的起始角度，支持范围[0, 360] 不是旋转角度
        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

需求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）-布局

复制 html 和 css

22-热销排行（top）-效果

实现思路：

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

预备知识：

扩展知识：ES6模版字符

`${表达式}` //模板字符串使用反钩号 `` 而且允许自由换行
1

开始实现：

第一步：得到后台数据（实际开发中，这个数据通过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 += `<li><span>${item.city}</span><span> ${item.sales} <s class=
    ${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;
     // 三元表达式 item.flag
  });
  // 数据渲染
  $(".sup").html(supHTML);
1
2
3
4
5
6
7
8
9

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

激活当前的tab样式，删除其他tab的样式
渲染各省热销 sub 模块
- 注意鼠标进入tab，只遍历当前索引号对应的城市对象里面的 brands
- 拼接html格式字符串，进行渲染

// 3.鼠标进入激活样式
// 事件委托 动态生成的未来的元素 使用普通的也可以
$(".province .sup").on("mouseenter", "li", function () {
  $(this).addClass("active").siblings().removeClass("active");
  var index = $(this).index();
  var obj = hotData[index]; // 当前对应的城市
  var brands = obj.brands; // 找到的就是鼠标移入的城市对应的品牌种类
  // console.log(obj);
  // console.log(brands);

  // 开始遍历数组
  var subHTML = "";
  $.each(brands, function (index, item) {
    console.log(item);
    subHTML += `<li><span>${item.name}</span><span>${item.num}<s class="${item.flag ? "icon-up" : "icon-down"}"></s></span></li>`;
    // 把生成的6个小li 字符串给 subdom 盒子
    $(".sub").html(subHTML);
  });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

// 所有的LI
var lis = $(".province .sup li");
// 第一个默认激活
lis.eq(0).mouseenter();
1
2
3
4

第五步：开启定时切换

// 开启定时切换;
var index = 0;
var timer = setInterval(function () {
  index++;
  if (index >= 5) index = 0;
  lis.eq(index).mouseenter();
}, 2000);
$(".province .sup").houver(
  function () {
    // 鼠标经过
    clearInterval(timer);
  },
  function () {
    // 鼠标离开
    clearInterval(timer);
    timer = setInterval(function () {
      index++;
      if (index >= 5) index = 0;
      lis.eq(index).mouseenter();
    }, 2000);
  }
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

封装 render 渲染函数

  // 这个函数需要传递当前元素进去
  function render(currentEle) {
    currentEle
      .addClass("active")
      .siblings()
      .removeClass();
    // 拿到当前城市的品牌对象
    // console.log($(this).index());
    // 可以通过hotData[$(this).index()] 得到当前的城市
    // console.log(hotData[$(this).index()]);
    // 我们可以通过hotData[$(this).index()].brands 拿到的是城市对象的品牌种类
    // console.log(hotData[$(this).index()].brands);
    // 开始遍历品牌数组
    var subHTML = "";
    $.each(hotData[currentEle.index()].brands, function(index, item) {
      // 是对应城市的每一个品牌对象
      // console.log(item);
      subHTML += `<li><span>${item.name}</span><span> ${item.num}<s class=
    ${item.flag ? "icon-up" : "icon-down"}
    ></s></span></li>`;
    });
    // 把生成的6个小li字符串给 sub dom盒子
    $(".sub").html(subHTML);
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

定时器调用函数

// 开启定时切换;
var index = 0;
var timer = setInterval(function () {
  index++;
  if (index >= 5) index = 0;
    // lis.eq(index).mouseenter();
  render(lis.eq(index));
}, 2000);
$(".province .sup").hover(
  function () {
    // 鼠标经过
    clearInterval(timer);
  },
  function () {
    // 鼠标离开
    clearInterval(timer);
    timer = setInterval(function () {
      index++;
      if (index >= 5) index = 0;
        // lis.eq(index).mouseenter();
      render(lis.eq(index));
    }, 2000);
  }
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

鼠标移入调用

// 3.鼠标进入激活样式
// 事件委托 动态生成的未来的元素 使用普通的也可以
$(".province .sup").on("mouseenter", "li", function () {
  $(this).addClass("active").siblings().removeClass("active");
  index = $(this).index();
  render($(this));
}
1
2
3
4
5
6
7

23-Echarts-社区介绍

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

24-Echarts-map使用（扩展）

参考社区的例子：https://www.makeapie.com/editor.html?c=xD4a1EBnvW (模拟飞机航线)

实现步骤：

第一需要下载china.js提供中国地图的js文件
第二个因为里面代码比较多，我们新建一个新的js文件 myMap.js 引入
使用社区提供的配置即可。

需要修改：

去掉图例组件和标题组件
去掉背景颜色
修改地图省份背景 #142957
地图放大通过 zoom 设置为1.2即可

    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: false,
      itemStyle: {
        normal: {
          areaColor: '#142957',
          borderColor: '#0692a4'
        },
        emphasis: {
          areaColor: '#0b1c2d'
        }
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

总结：这例子是扩展案例，大家以后可以多看看社区里面的案例。

25-总结

总结：实现一个需求，需要去推导，具备推导的能力需要练习，时间问题。

重点模块

监控模块 , 销售模块 , 排行模块

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/124015

06-ECharts_echarts.init

可视化项目

数据可视化

使用技术

ECharts的基本使用

ECharts 使用五步曲

Echarts-体验

初始化echarts实例对象

Echarts-基础配置

01-数据可视化项目适配方案

02-项目搭建(初始化)

03-基础布局

04-边框图片

05-设置公共面板样式

06-概览区域(overview)-布局

07-监控区域(monitor)-布局

08-监控区域-效果

立即执行函数用法

切换功能

动画功能：

无缝滚动原理

09-点位区域(point)-布局

10-点位区域-饼图

1. HTML引入图表

2. 定制需求

3. 饼图区域总结

11-地图区域 (map) -预留布局

12-用户统计 (users) -布局

13-用户统计 (users) -柱状图

柱形图线条样式总结

14-订单区域（order）-布局

15-销售统计( sales )-布局

16-销售统计( sales )-线形图

17-销售统计( sales )-切换效果

销售统计模块切换原理

18-渠道区域&销售进度-布局

19-渠道分布(channel)-雷达图

20-销售进度 (quarter) -饼状图

21-热销排行（top）-布局

22-热销排行（top）-效果

23-Echarts-社区介绍

24-Echarts-map使用（扩展）

25-总结