2023年1月4日 Echarts第3章学习笔记：在网页中插入折线图、饼状图和柱状图

文章结构概览

• • • 零.准备和说明

      • • 1.最终页面效果

    • 2.资源地址

      • 一.网页布局
      • • 1.网页结构分析

    • 2.其他准备

    • 3.完整代码

    • • index.html
      • css/index.scss

    • 4.效果

    • 5.知识点

    • • 5.1.伪类选择器:after 和 :before 选择器以及 content 属性

      • • 示例
        • counter-increment 函数的使用

      • 5.2.z-index 属性的应用

      • • 示例: 若为图片设置 z-index:-1，则其将位于文字之后显示

      • 5.3.animate 动画与关键帧 @keyframe 的结合运用

      • • 示例
        • animation 属性值包括：动画持续时间、延迟时间、关键帧名称、运动方式、执行次数、结束状态及动画顺序等参数；

      • 二.Echarts 图表的嵌入实现

      • • 1.Echarts 图表引入后的 index.html 页面结构展示

    • 2.index.js 文件中实现左右两侧各三个 Echarts 图表及中央地图模