Echarts学习

title: Echarts学习
date: 2020-05-12 19:18:37
tags: [css]

什么是数据可视化

数据可视化主要目的:借助于图形化手段，清晰有效地传达与沟通信息。

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

常见的数据可视化库

  • D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
  • ECharts.js 百度出品的一个开源 Javascript 数据可视化库
  • Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
  • AntV 蚂蚁金服全新一代数据可视化解决方案 等等
  • Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

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

接下来学习如何使用Echarts

Echarts学习

什么是echarts

官网地址：https://www.echartsjs.com/zh/index.html

1-Echarts初体验

参考官方教程：五分钟上手ECharts

使用步骤：

1.引入echarts 插件文件到html页面中。

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

2.准备一个具备大小的DOM容器（必须要有宽度和高度）

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

3.初始化echarts实例对象

1
var myChart = echarts.init(document.getElementById('main'));

4.指定配置项和数据(option)

1
2
3
4
5
6
7
8
9
10
11
12
13
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. 将配置项设置给echarts实例对象
1
myChart.setOption(option);

2-Echarts-基础配置

这是要求同学们知道以下配置每个模块的主要作用干什么的就可以了

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

image-20200513100301956

  • series

    • 系列列表。每个系列通过 type 决定自己的图表类型
    • 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。

  • xAxis：直角坐标系 grid 中的 x 轴

    • boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

  • yAxis：直角坐标系 grid 中的 y 轴

  • grid：直角坐标系内绘图网格。

  • title：标题组件

  • tooltip：提示框组件 ，点击图标的特殊点会出现提示消息，如折线图的拐点

  • legend：图例组件（如果series里面的有name值，legend可以省略）

  • toolbox ：工具栏，下载等

  • color：调色盘颜色列表

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

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
option = {
    // 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]
        }
    ]
};

可视化面板案例

应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。

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

  • div + css 布局
  • flex 布局
  • Less
  • 原生js + jquery 使用
  • rem适配
  • echarts基础

1-案例适配方案

  • 设计稿是1920px

    1. flexible.js 把屏幕分为 24 等份

    2. css rem 插件的基准值是 80px

      插件-配置按钮—配置扩展设置–Root Font Size 里面 设置。

      但是别忘记重启vscode软件保证生效

2-案例学习总结

css部分

1 盒子添加方角

如下图给一个盒子添加四个方角

image-20200513175104378
  • 利用panel 盒子 before 和after 制作上面两个角
  • 新加一个盒子before 和after 制作下侧两个角 
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
.panel {
  position: relative;
  height: 3.875rem;
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }
  .panel-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }
    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
  }
}
2 字体图标使用
1
2
3
4
5
6
7
8
9
/* 声明字体*/
@font-face {
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}
/*然后在需要使用的地方使用字体*/
a {
    font-family: 'electronicFont';
}
3 制作动画

顺时针旋转动画

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

  .map2 {
    width: 8.0375rem;
    height: 8.0375rem;
    background-image: url(../images/lbx.png)  no-repeat;
    background-size: 100% 100%;
    opacity: 0.6;
    animation: rotate 15s linear infinite;
    z-index: 2;
  }

  @keyframes rotate {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
}
4 页面约束缩放

使得页面保持在1024px - 1920px之间缩放

1
2
3
4
5
6
7
8
9
10
11
/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
}

echart部分

js语法

当变量都有许多属性，通过属性名：｛｝；包含，每个属性写完要加一个‘ ，’，最后一个属性不需要添加，。

1
2
3
4
5
6
let option = {
    color: ['#2f89cf'],
    tooltip: {
        trigger: 'axis',
    }
 };

由于每一个图表都要初始化一个echarts对象，最后把数据项配置给实例对象。可以使用立即执行函数。

立即执行函数妙用

为了防止变量污染，减少命名冲突，我们可以采取立即执行函数的写法。因为里面的变量都是局部变量。

1
2
3
4
5
6
(function() {
	let myChart = ...
})();
(function() {
	let myChart =...
})();

1-柱状图

两大步骤:

  • 官网找到类似实例， 加入项目的js代码中

  • 根据需求定制图表

根据需求定制

1）图表大小
1
2
3
4
5
6
// 图标位置
  grid: {
    top: "10%",
    left: "22%",
    bottom: "10%"
  },
2）X轴相关

轴线的设计需要单独样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 设置x轴标签文字样式
// x轴的文字颜色和大小
      axisLabel: {
        color: "rgba(255,255,255,.6)",
        fontSize: "12"
      },
 //  x轴样式不显示
 axisLine: {
     show: false
     // 如果想要设置单独的线条样式 
     // lineStyle: {
     //    color: "rgba(255,255,255,.1)",
     //    width: 1,
     //    type: "solid"
    }
 }
3）y轴相关
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//不显示y轴线条
axisLine: {
    show: false
        },
// 不显示刻度
axisTick: {
   show: false
},
//y轴文字的颜色设置为白色  
axisLabel: {
          color: "#fff"
   },
//y轴分隔样式
splitLine: {
   lineStyle: {
  		 color: 'rgba(255, 255, 255, .1)'
   }
}
4）series定制
柱子样式
1
2
3
4
5
6
7
8
9
10
11
series: [{
    name: '直接访问',
    type: 'bar',
    //柱子的宽度
    barWidth: '35%',
    data: [200, 300, 300, 900, 1500, 1200, 600],
    itemStyle: {
        //柱子圆角
        barBorderRadius: 5
    }
}]
柱子颜色

所有柱子的颜色一致，只需设置 color: ['#2f89cf'],,如果需求是每根柱子的颜色不同，那么需要在itemStyle里面设置color属性。

founction里面的params里传进来的是图表中的柱子对象，dataIndex是当前柱子的索引号。

1
2
3
4
5
6
7
8
9
10
//定义一个color数组
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];

itemStyle: {
    barBorderRadius: 20,
    color: function(params) {
        //console.log(params)
        return myColor[params.dataIndex];//读取color
    }
},
图形内文本

例如百分数这种，通过label修改

image-20200514154323654 
1
2
3
4
5
6
7
8
9
data: [70, 34, 60, 78, 69],
label: {
    show: true,
    //在图形内部显示
    position: "inside",
    //文字显示格式 c会自动解析data里面的数据
    formatter: "{c}%"
    fontSize: 10
},
图形重叠

使用yAxisInde，就像z-index一样，数字越大就会覆盖数字小的对象。

1
2
3
4
// 给series  第一个对象里面的 添加 
yAxisIndex: 0,
// 给series  第二个对象里面的 添加 
yAxisIndex: 1,
5）更换对应数据
1
2
3
4
// x轴中更换data数据
 data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
// series 更换数据
 data: [200, 300, 300, 900, 1500, 1200, 600]
6）图表随屏幕自适应
1
2
3
window.addEventListener("resize", function() {
  myChart.resize();
});
image-20200514162846033

完整代码：

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
90
91
92
93
94
95
96
97
98
99
100
101
// 柱状图2
(function() {
  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".bar2 .chart"));
  // 2. 指定配置和数据
  var option = {
    grid: {
      top: "10%",
      left: "22%",
      bottom: "10%"
      // containLabel: true
    },
    // 不显示x轴的相关信息
    xAxis: {
      show: false
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        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,
        // 修改第一组柱子的圆角
        itemStyle: {
          barBorderRadius: 20,
          // 此时的color 可以修改柱子的颜色
          color: function(params) {
            // params 传进来的是柱子对象
            console.log(params);
            // dataIndex 是当前柱子的索引号
            return myColor[params.dataIndex];
          }
        },
        // 柱子之间的距离
        barCategoryGap: 50,
        //柱子的宽度
        barWidth: 10,
        // 显示柱子内的文字
        label: {
          show: true,
          position: "inside",
          // {c} 会自动的解析为 数据  data里面的数据
          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
        }
      }
    ]
  };

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

2-折线图

  • 官网找到类似实例， 适当分析，并且引入到HTML页面中
  • 根据需求定制图表
1）图例组件

颜色必须放在textStyle里面，放在legend里不起作用。

1
2
3
4
5
6
7
// 图例组件
   legend: {
     textStyle: {
       color: '#4c9bfd' // 图例文字颜色
     },
     right: '10%' // 距离右边10%
   },
2）折线图定制

把折线修饰为圆滑 series 数据中添加 smooth 为 true

1
2
3
4
5
6
7
8
9
//折线图颜色    
color: ['#00f2f1', '#ed3f35'],
	series: [{
      name:'新增粉丝',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      // 折线修饰为圆滑
      smooth: true,
      }]
3）点击切换折线数据

如下图，点击2020 和 2021 切换数据

image-20200514191419910

以下是后台送过来数据（ajax请求过来的）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var yearData = [
     {
       year: '2020',  // 年份
       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]
         ]
     },
     {
       year: '2021',  // 年份
       data: [  // 两个数组是因为有两条线
            [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
    		[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
         ]
     }
    ];
  • tab栏切换事件
  • 点击2020按钮 需要把 series 第一个对象里面的data 换成 2020年对象里面data[0]
  • 点击2020按钮 需要把 series 第二个对象里面的data 换成 2020年对象里面data[1]
  • 2021 按钮同样道理

完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
  // 点击切换效果
  $(".line h2").on("click", "a", function() {
    // alert(1);
    // console.log($(this).index());
    // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
    // console.log(yearData[$(this).index()]);
    var obj = yearData[$(this).index()];
    option.series[0].data = obj.data[0];
    option.series[1].data = obj.data[1];
    // 需要重新渲染
    myChart.setOption(option);
  });
})();
4）渐变填充折线

通过series里的areaStyle属性来设置填充

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 填充区域
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)"
},
5）拐点显示

当鼠标移上去，拐点出现。

simple，拐点样式

1
2
3
4
5
6
7
8
9
10
11
12
// 设置拐点 小圆点
symbol: "circle",
// 拐点大小
symbolSize: 8,
// 设置拐点颜色以及边框
itemStyle: {
    color: "#0184d5",
    borderColor: "rgba(221, 220, 107, .1)",
    borderWidth: 12
},
// 开始不显示拐点， 鼠标经过显示
showSymbol: false,

3-饼形图

1）图例组件
  • 图例组件在底部并且居中显示
  • 每个图例小图标的宽度和高度 
1
2
3
4
5
6
7
8
9
10
11
12
13
legend: {
     // 距离底部为0%
     bottom: "0%",
     // 小图标的宽度和高度
     itemWidth: 10,
     itemHeight: 10,
     data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
     // 修改图例组件的文字为 12px
     textStyle: {
       color: "rgba(255,255,255,.5)",
       fontSize: "12"
     }
},
2）饼状图图形大小

饼状图水平居中 垂直居中

修改内圆半径和外圆半径为 [“40%”, “60%”]

带有直角坐标系的比如折线图柱状图是 grid修改图形大小，而我们饼形图是通过 radius 修改大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
series: [
      {
        name: "年龄分布",
        type: "pie",
        // 设置饼形图在容器中的位置
        center: ["50%", "50%"],
        //  修改内圆半径和外圆半径为  百分比是相对于容器宽度来说的
        radius: ["40%", "60%"],
        // 不显示标签文字
        label: { show: false },
        // 不显示连接线
        labelLine: { show: false },
      }
    ]
3）南丁格尔玫瑰图
image-20200514213456469
修改显示模式

南丁格尔玫瑰图分半径模式和面积模式，通过 roseType属性修改

1
2
3
4
5
6
series: [
     {
       roseType: "radius", //把饼形图的显示模式改为 半径模式
     }
   ]
 };
牵引线
1
2
3
4
5
6
7
// 引导线调整
labelLine: {
    // 连接扇形图线长
    length: 6,
    // 连接文字线长
    length2: 8
},

Echarts-社区

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

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

Echarts-map使用（扩展）

参考社区的例子：https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (模拟飞机航线)

实现步骤：

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

配置：

  • 修改地图省份背景 #142957 areaColor 里面做修改
  • 地图放大通过 zoom 设置为1.2即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
geo: {
  map: 'china',
  zoom: 1.2,
  label: {
    emphasis: {
      show: false
    }
  },
  roam: false,
  itemStyle: {
    normal: {
      areaColor: 'rgba(20, 41, 87,.6)',
      borderColor: '#0692a4'
    },
    emphasis: {
      areaColor: '#0b1c2d'
    }
  }
},

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家