ECharts实战教程

pink老师讲解的ECharts可视化项目。。。

星航夜空的帆舟

6532人浏览 · 2022-06-08 22:04:03

星航夜空的帆舟 · 2022-06-08 22:04:03 发布

ECharts教程

参考博客：pink老师学习之Echarts
注：本人擅长于后端开发，前端不是很熟练。闲暇时间会跟着pink老师的视频敲敲前端代码，收益颇多<^ 。^>

一、ECharts介绍

官网链接：Apache ECharts

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表（折线图、柱状图、散点图、饼图、K线图且支持自定义）。

二、ECharts入门教程

2.1、官方入门教程: 5分钟上手ECharts

本人一般都喜欢下载压缩版js文件，下载地址为: 获取ECharts.min.js （先点击Dist跳转至GitHub，再选择echarts.min.js，点击后右键Raw，选择链接另存为你的项目目录下即可）

入门篇教程中，我们可以知道绘制一个简单的图表需要如下几步:

下载并引入echarts.min.js文件 -------->图表依赖这个js文件
准备一个具备大小的DOM容器 --------->生成的图表会放入这个容器内
初始化echarts实例对象--------------> 通过 echarts.init 方法初始化一个 echarts 实例
指定配置项和数据（option）---------->根据具体需求修改配置选项
将配置项设置给echarts实例对象-------->让echarts对象根据修改好的配置生效

<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

2.2、ECharts的基础配置

官网给出了许多示例：链接 这些都可以直接拿来用，但里面的一些配置需要根据自己的需求来修改，所以我们需要了解ECharts的基础配置。

常用的主要配置:

需要了解的主要配置大致有：series xAxis yAxis grid tooltip title legend color。 详细配置可移步官方配置项参考文档：详细配置 。 也可参考菜鸟教程：移步菜鸟教程

series

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

series: [{
    name: '销量',  // 系列名称
    type: 'bar',  // 系列图表类型
    data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容
}]

xAxis：直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
yAxis：直角坐标系 grid 中的 y 轴
grid：直角坐标系内绘图网格。
title：为图表配置标题
tooltip：配置提示信息
toolbox：工具栏

legend：图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

legend: {
    data: [{
        name: '系列1',
        // 强制设置图形为圆。
        icon: 'circle',
        // 设置文本为红色
        textStyle: {
            color: 'red'
        }
    }]
}

color：调色盘颜色列表
series.stack: 数据堆叠，同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加。 不想堆叠直接删掉stack属性即可。

三、ECharts项目实战

视频教程地址: pink老师之基于ECharts数据可视化项目

3.1、项目效果图:

3.2、项目前期准备：

项目核心：先布好局，之后利用ECharts填充图表。

设计稿是1920px， 采用屏幕自适应

flexible.js : 检测浏览器宽度、修改html文字大小。 项目引入后手动修改源码的var e=i.clientWidth/24; 把屏幕分为 24 等份。 github地址：https://github.com/amfe/lib-flexible
rem单位：页面元素根据 rem 适配大小，配合 cssrem 插件（vscode）。 idea中需安装px2rem插件
root fontsize 就是 html 中 fontsize 的大小。 项目中基准值是 80px，则其数值修改为80
flex 布局：进行页面快速布局。
jQuery.min.js: jQuery版本
px2rem插件的使用:
1. 使用快捷键 alt + d 可以将局部px 转 rem。
2. 还可以使用 ctrl+ alt + d 进行全局转换。

3.3、基础设置知识点

3.3.1、CSS 的 background 属性的缩写顺序

background的值的顺序是background-color，background-image，background-repeat，background-attachment，background-position,background-size。 如果用 background-size,一定要用 / 分隔。

body
{ 
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center/100% 100%; 
}

3.3.2、边框图片 border-image

border-image 是 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat 属性的简写，其中：

border-image-source：定义边框图像的路径；
border-image-slice：定义边框图像从什么位置开始分割（不带单位）；
border-image-width：定义边框图像的厚度（宽度）（带单位: 上、右、下、左）；
border-image-outset：定义边框图像的外延尺寸（边框图像区域超出边框的量）；
border-image-repeat：定义边框图像的平铺方式。

border-image-slice 属性可以接收三种类型的值：

number：数值，用具体数值指定图像分割的位置，数值代表图像的像素位置或向量坐标，不允许负值；
percentage：百分比，相对于图像尺寸的百分比，图像的宽度影响水平方向，高度影响垂直方向；
fill：保留边框图像的中间部分。

border-image-repeat 属性用来设置如何填充使用 border-image-slice 属性分割的图像边框，例如平铺、拉伸等等，该属性的语法格式如下：

border-image-repeat：[ stretch | repeat | round | space ]{1,2}

语法说明如下：

stretch：将被分割的图像使用拉伸的方式来填充满边框区域；
repeat：将被分割的图像使用重复平铺的方式来填充满边框区域，当图像碰到边界时，超出的部分会被截断；
round：与 repeat 关键字类似，不同之处在于，当背景图像不能以整数次平铺时，会根据情况缩放图像；
space：与 repeat 关键字类似，不同之处在于，当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。

border-image-repeat 属性能够接受 1~2 个参数值：

如果提供两个参数，那么第一个参数将用于水平方向，第二个将用于垂直方向；
如果只提供一个参数，那么将在水平和垂直方向都应用该值。

或者使用相对定位和绝对定位再结合 ::before 和 ::after会出四角角标。

3.3.3、flex布局页面

<!--页面主体 -->
<section class="viewport">
    <div class="column">
        <!-- 公用样式 -->
        <div class="panel line">
            <h2>柱形图-横向 </h2>
            <div class="chart"><!-- 数据图--></div>
            <!-- 角标 -->
            <div class="panel-footer"></div>
        </div>
    </div>

    <div class="column"></div>

    <div class="column">
        <div class="panel bar"></div>
    </div>
</section>
<style>
/*页面主体*/
.viewport {
    display: flex;
    min-width: 12.8rem;
    max-width: 24rem;
    margin: 0 auto;
    padding: 0.125rem 0.125rem 0;
    min-height: 9.75rem;
}

.viewport .column {
    flex: 3;
}

.viewport .column:nth-child(2) {
    flex: 4;
    margin: 0.125rem 0.1875rem 0;
    overflow: hidden;
}
</style>

3.3.4、flex布局li

.viewport .no .no-hd {
    position: relative;
    border: 1px solid rgba(25, 186, 13, 0.17);
}

.viewport .no .no-hd::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 30px;
    height: 10px;
    border-top: 2px solid #02A6B5;
    border-left: 2px solid #02A6B5;
}

.viewport .no .no-hd::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
    right: 0;
    bottom: 0;
}

.viewport .no .no-hd ul {
    display: flex;
}

.viewport .no .no-hd ul li {
    position: relative;
    flex: 1;
    line-height: 1rem;
    font-size: 0.675rem;
    color: #FFEB7B;
    text-align: center;
    font-family: "electronicFont", serif;
}

.viewport .no .no-hd ul li::after {
    content: "";
    position: absolute;
    top: 25%;
    right: 0;
    height: 50%;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
}

3.4、折线图实例

需求1：更换图例组件文字颜色 rgba(255,255,255,.5) 文字大小为12

legend: {
    textStyle: {
        color: '#4c9bfd'
    },
    right: '10%'
},

需求2：修改图表大小

grid: {
    left: '3%',
    top: '20%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
    show: true,
    borderColor: '#012f4a',
},

需求3： x轴相关配置

刻度去除
x轴刻度标签字体颜色：#4c9bfd
剔除x坐标轴线颜色（将来使用Y轴分割线)
轴两端是不需要内间距 boundaryGap

    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
	  axisTick: {
         show: false // 去除刻度线
       },
       axisLabel: {
         color: '#4c9bfd' // 文本颜色
       },
       axisLine: {
         show: false // 去除轴线
       },
       boundaryGap: false  // 去除轴内间距
    },

需求4： y轴的定制

刻度去除
字体颜色：#4c9bfd
分割线颜色：#012f4a

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

需求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,
    }]

需求6：配置数据

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

// 图标数据
    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
      }
    }]

需求7：新增需求点击 2020年 2021年数据发生变化

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

 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 按钮同样道理

3.5、使用echarts完成中国省市区县镇地图展示

参考博客地址：点击学习

3.6、Echarts-map使用（扩展）

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

实现步骤：

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

需要修改：

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

 geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: false,
      itemStyle: {
        normal: {
          areaColor: '#142957',
          borderColor: '#0692a4'
        },
        emphasis: {
          areaColor: '#0b1c2d'
        }
      }
    },