• Echart前端的修饰器，你不来看看吗？

    文章目录


    在这里插入图片描述

    ☀️作者简介：大家好我是言不及行yyds
    🐋个人主页：言不及行yyds的CSDN博客
    🎁系列专栏：【前端】

    在这里插入图片描述

    Echarts

    1.Echarts初认识及基本使用

    1.1Echarts

    ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形 库
    ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

    1.2Echarts的优点

    • 开源免费
    • 功能丰富
    • 社区活跃
    • 多种数据支持
    • 流数据的支持
    • 移动端的优化
    • 跨平台
    • 酷炫的特效
    • 数据的三维可视化

    1.3展示Echarts的一个基本案例

    在这里插入图片描述

    1.4基本使用Echarts

    1.4.1引入echarts文件

    1. npm获取

    npm install echarts --save

    1. .从github上下载

    apache/echarts 项目的 release 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code，解压后 dist 目录下的 echarts.js 即为包含完整 ECharts 功能的文件

    1.4.2项目中使用

    1. 引入Echarts.js文件（将其放在lib文件下）
     <script src="./lib/echarts.min.js"></script>

    • 1
    1. 准备呈现图表的容器
    	<!--可以在这设置容器的宽高-->
 <div id="echarts" style="width:600px;height:600px"></div>

    • 1
    • 2

    也可以直接调用echarts实例对象的resize()方法

    myChart.resize({
  width: 800,
  height: 400
});

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

    • 1
    1. 准备配置项

    这步很关键，我们最终的效果，到底是显示饼图还是折线图，基本上都是由配置项决定的

     var option = {
  xAxis: {
    type: 'category',
    data: ['小明', '小红', '小王']
 },
  yAxis: {
    type: 'value'
 },
  series: [
   {
      name: '语文',
      type: 'bar',
      data: [70, 92, 87],
   }
 ]
}

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

    • 1

    1.5一些基本的配置

    • xAxis
      直角坐标系 中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的
      呈现
    • yAxis
      直角坐标系 中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去
      series 下找数据进行图表的绘制
    • series
      系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据

    2.了解Echarts的几种基本图

    2.1柱状图

    2.1.1实现

    步骤1 ECharts 最基本的代码结构
    步骤2 准备x轴的数据
    步骤3 准备 y 轴的数据
    步骤4 准备 option , 将 series 中的 type 的值设置为: bar

     <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    //1. ECharts最基本的代码结构
    //2. x轴数据:['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    //3. y轴数据:[88, 92, 63, 77, 94, 80, 72, 86]
    //4. 将type的值设置为bar
    var mCharts = echarts.init(document.querySelector("div")) // 初始化echarts实例对象
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] // 准备x轴数据
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86] // 为x轴每一个元素指明数据
    var option = {
      yAxis: {
        type: 'value'
      },
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          data: yDataArr
        }
      ]
    }
    mCharts.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

    在这里插入图片描述

    2.1.2柱状图的一些常见效果

    说到效果的话，我们就需要去配置一些属性。
    关于怎么配置就需要到管网上查看

    1. 标记效果

    标记出图表的最大值和最小值用markPoint属性
    配置在series中
    标记出平均值用到markLine属性，与markPoint同级

    series: [{
  			.........
   markPoint: {
      data: [
          {
              type: 'max', name: '最大值'
          },
	     {
		     type: 'min', name: '最小值'
         }
            ]
       },
    
    markLine: {
      data: [
          {
           type: 'average', name: '平均值'
           }
        ]
     }
   }],

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

    在这里插入图片描述

    1. 显示效果

    如果我们要实现在柱状图中显示数值
    或者设置柱状图的宽度时我们可以使用
    lable，barwidth属性

     series：[ 
 	{ 		
 		.... 
 		label:{
 		show:true//设置是否可见
 		rotate:60//旋转数字角度
 		},
 		barWidth："30%"
 	} 
 	]

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

    在这里插入图片描述

    2.2饼图

    2.1实现步骤

    步骤1 ECharts 最基本的代码结构
    步骤2 准备数据
    步骤3 准备配置项 在 series 下设置 type:pie

    需要注意的是

    • 饼图的数据是由 name 和 value 组成的字典所形成的数组
    • 饼图无须配置 xAxis 和 yAxis
     <script>
    //1. ECharts最基本的代码结构
    //2. 准备数据[{name:???, value:??? },{}]
    //   淘宝: 11231  京东: 22673  唯品会: 6123  1号店: 8989   聚美优品: 6700
    //3. 将type的值设置为pie
    var mCharts = echarts.init(document.querySelector("div"))
    // pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有name和value
    var pieData = [
      {
        name: '淘宝',
        value: 11231
      },
      {
        name: '京东',
        value: 22673
      },
      {
        name: '唯品会',
        value: 6123
      },
      {
        name: '1号店',
        value: 8989
      },
      {
        name: '聚美优品',
        value: 6700
      }
    ]
    var option = {
      series: [
        {
          type: 'pie',
          data: pieData
        }
      ]
    }
    mCharts.setOption(option)
  </script>

    • 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

    在这里插入图片描述

    2.2饼图的一些效果

    1. 显示数值
      lable.show 用于显示文字
      lable.formatter:格式化文字

    2. 南丁格尔图
      南丁格尔图指的是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大
      roseType:‘radius’

    3. 选中效果

      1.selectedMode: ‘multiple’
      选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可
      选 ‘single’ ， ‘multiple’ ，分别表示单选还是多选
      2.selectedOffset: 30 选中扇区的偏移距离

    <script>
    //1. ECharts最基本的代码结构
    //2. 准备数据[{name:???, value:??? },{}]
    //   淘宝: 11231  京东: 22673  唯品会: 6123  1号店: 8989   聚美优品: 6700
    //3. 将type的值设置为pie
    var mCharts = echarts.init(document.querySelector("div"))
    // pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有name和value
    var pieData = [
      {
        name: '淘宝',
        value: 11231
      },
      {
        name: '京东',
        value: 22673
      },
      {
        name: '唯品会',
        value: 6123
      },
      {
        name: '1号店',
        value: 8989
      },
      {
        name: '聚美优品',
        value: 6700
      }
    ]
    var option = {
      series: [
        {
          type: 'pie',
          data: pieData,
          label: { // 饼图文字的显示
            show: true, // 显示文字
            //formatter: 'hehe' // 决定文字显示的内容
            formatter: function(arg){
              // console.log(arg)
              return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
            }
          },
          // radius: ['50%', '75%'] // 第0个元素代表的是內圆的半径 第1个元素外圆的半径
          roseType: 'radius', // 南丁格尔图 饼图的每一个区域的半径是不同的
          // selectedMode: 'single' // 选中的效果,能够将选中的区域偏离圆点一小段距离
          selectedMode: 'multiple',
          selectedOffset: 30
        }
      ]
    }
    mCharts.setOption(option)
  </script>

    • 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

    在这里插入图片描述

    2.3一些通用的配置

    • 给图形设置标题：title
    • 显示提示框：tooltip
    • 工具按钮：toolbox
    • 图列：legend
    <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr1 = [88, 92, 63, 77, 94, 80, 72, 86]
    var yDataArr2 = [93, 60, 61, 62, 85, 79, 92, 30]
    var option = {
    //设置图表的标题
      title: {
        text: '成绩展示',
        textStyle: {
          color: 'red'
        },
      },
      //显示提示框
      tooltip: {
        trigger: 'axis',
        triggerOn: 'click',
        formatter: function(arg){
          return arg[0].name + '的分数是:' + arg[0].data
        }
      },
      toolbox: {
        feature: {
          saveAsImage: {}, // 导出图片
          dataView: {}, // 数据视图
          restore: {}, // 重置
          dataZoom: {}, // 区域缩放
          magicType: {
            type: ['bar', 'line']
          } // 动态图表类型的切换
        }
      },
      legend: { // 图例, 图例中的data数据来源于series中每个对象的name, 图例可以帮助我们对图表进行筛选
        data: ['语文', '数学']
      },
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          data: yDataArr1
        },
        {
          name: '数学',
          type: 'bar',
          data: yDataArr2
        }
      ]
    }
    mCharts.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
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56

    在这里插入图片描述

    3.总结

    1. 关于使用Echarts

    首先需要引入echarts文件，然后创建一个容器，用于呈现图表
    初始化echarts实例对象，配置相关的配置，关于这些配置，在官网上
    都能找到怎么使用，然后就是将配置放在实例化对象中

    1. 关于怎么配置

    首先打开官网，Echarts官网
    点击文档下的配置项手册，在这里面你能找到你想要的配置
    注意每个配置项是对象还是数组。不能配错了，
    还有就是需要注意配置项应该放在哪里

    大家如果觉得还不错的话
    期待能给博主点个赞，关注，评论三连一下
    在这里插入图片描述

  • 相关阅读:
    数据科学必备Python编程基础
    openharmony开源社区快速入门
    2024中国商业医疗险发展研究蓝皮书
    LabVIEW图形化的AI视觉开发平台（非NI Vision）VI简介
    基于JAVA医院住院管理系统计算机毕业设计源码+系统+数据库+lw文档+部署
    一起来学nginx(一)
    JDK17 对es带来的性能提升基准测试报告
    如何系统地自学RPA? RPA要怎么学?
    深度学习手写字符识别：推理过程
    Vue3.0项目——打造企业级音乐App（一）Tab栏、轮播图、歌单列表、滚动组件
  • 原文地址：https://blog.csdn.net/m0_51311990/article/details/124906495