• ECharts-数据可视化复习（58th）

    在这里插入图片描述
    此项目是根据黑马课程实现的ECharts数据可视化项目
    项目地址： https://gitee.com/destiny-wind/data-visualization.git

    1、Echarts简介

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

    1.ECharts 使用步骤

    1、下载并引入Charts.js文件

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

    • 1

    2、准备一个具备大小的DOM容器

    <body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

    • 1
    • 2
    • 3
    • 4

    3、初始化echarts实例对象

    // 基于准备好的dom，初始化echarts实例
 var myChart = echarts.init(document.getElementById('main'));

    • 1
    • 2

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

    var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

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

    5、将配置项设置给echarts实例对象

    myChart.setOption(option);

    • 1

    2.Echarts基础配置

    1、series（系列）
    每个系列通过 series.type 决定自己的图表类型（图表数据，指定什么类型的图表，可以多个图表重叠）。
    2、xAxis：直角坐标系 grid 中的 x 轴
    3、yAxis：直角坐标系 grid 中的 y 轴
    4、grid：直角坐标系内绘图网格
    5、title：标题组件
    6、tooltip：提示框组件
    7、legend：图例组件
    8、color：调色盘颜色列表
    9、boundaryGap:
    坐标轴两边留白策略，类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，可以保证刻度线和标签对齐。这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
    10、数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。
    在这里插入图片描述

    示例：

    let option = {
			// color设置线条的颜色 注意后面是个数组
        	color: ['pink', 'red', 'green', 'skyblue'],
       		 // 设置图表的标题
		    title: {
		        text: '折线图堆叠123'
		    },
		    // 图表的提示框组件
		    tooltip: {
		    // 触发方式
            trigger: 'axis',
            // 坐标轴指示器，坐标轴触发有效
            axisPointer: {
                type: 'shadow'  // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        // 图例组件
	    legend: {
	       // series里面有了 name值，则 legend里面的data可以删掉
	    },
	    // 网格配置  grid可以控制线形图 柱状图 图表大小
        grid: {
            top: "10%",
            left: "22%",
            bottom: "10%"，
            // 是否显示刻度标签 如果是true 就显示， false则不显示
           containLabel: true
        },
        // 工具箱组件  可以另存为图片等功能
	    toolbox: {
	        feature: {
	            saveAsImage: {}
	        }
	    },
	    // 设置x轴的相关配置
        xAxis: {
            show:false
        },
        // 设置y轴的相关配置
        yAxis: [
            {
                type: 'category',
                inverse: true,
                data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
                //不显示y轴线条
                axisLine: {
                    	show: false
                    	// 如果想要设置单独的线条样式 
					    // lineStyle: {
					     	//    color: "rgba(255,255,255,.1)",
					       //    width: 1,
					       //    type: "solid"
					      //  }
                        },
                // 不显示刻度
                axisTick: {
                show: false
                },
               Y轴的文字颜色和大小
                axisLabel:{
                    color:"#fff"，
                    fontSize: "12"
                }，
                // y 轴分隔线样式
			   splitLine: {
			       lineStyle: {
			          color: "rgba(255,255,255,.1)"
			        }
			   }
            },
            {
                type: 'category',
                inverse: true,
                data: [702, 350, 610, 793, 664],
                //不显示y轴线条
                axisLine: {
                    show: false
                        },
                // 不显示刻度
                axisTick: {
                show: false
                },
                
                axisLabel:{
                    color:"#fff",
                    fontSize:12
                }
            },
        ],
        // 系列图表配置 它决定着显示那种类型的图表
        series: [
            {
                name: 'bar',
                type: 'bar',
                // 柱子之间的距离
                barCategoryGap:50,
                // 修改柱子宽度
                barWidth:10,
                itemStyle:{
                		 // 修改柱子圆角
                        barBorderRadius:20,
                        //给 itemStyle  里面的color 属性设			置一个 返回值函数
                        // params 传进来的是柱子对象
                        color:function(params){
                        // dataIndex 是当前柱子的索引号
                        return myColor[params.dataIndex];
                        } 
                },
                data: [70, 34, 60, 78, 69],
                // 图形上的文本标签
                label:{
                    normal:{
                        show: true,
                        // 图形内显示
                        position: "inside",
                        // 文字的显示格式   {c} 会自动的解析为 数据  data里面的数据
                        formatter: "{c}%"
                    }
                },
                yAxisIndex: 0, //层级关系
            },
            {
                name: 'box',
                type: 'bar',
                barCategoryGap: 50,
                barWidth: 15,
                itemStyle: {
                    color: "none",
                    borderColor: "#00c1de",
                    borderWidth: 3,
                    barBorderRadius: 15
                },
                data: [100, 100, 100, 100, 100],
                yAxisIndex: 1, //层级关系
            }
        ]
    }; 

    • 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
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137

    2、项目步骤

    1、flexible插件内将屏幕改为划分24份

    1920/42=80

      // set 1rem = viewWidth / 10
  function setRemUnit() {
    var rem = docEl.clientWidth / 24;
    docEl.style.fontSize = rem + "px";
  }

  setRemUnit();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    2、cssrem插件基准值修改为80

    在这里插入图片描述

    3、把屏幕宽度约束在1024-1920之间有适配（媒体查询）

    /* 约束屏幕尺寸 */
@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

    4、图片边框

    盒子大小不一，但是边框样式相同，此时就需要边框样式来完成

    border-image

    • 1

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

    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

    5、字体图标

    通过类名调用字体图标
    1、HTML页面引入字体图标中css文件
    2、标签直接调用图标对应类名即可

    6、无缝滚动

    1、先克隆marquee里面所有的行
    2、通过CSS3动画滚动marquee
    3、鼠标经过marquee就停止动画

    animation-play-state:paused;

    • 1

    通过CSS3动画滚动,marquee

    @keyframes move {
	0% {
	}
	100%{
		transform: translateY(-50%);
		}
	}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    调用的时候

    animation: move 15s linear infinite;

    • 1

    7、南丁格尔玫瑰图

    1、先到官网找到类似的图
    2、根据需求修改具体的配置

    在这里插入图片描述

    option = {
  title: {
    text: 'Nightingale Chart',
    subtext: 'Fake Data',
    left: 'center'
  },
  //图形触发
  tooltip: {
    trigger: 'item',
    //格式化提示内容
    formatter: '{a} 
    {b} : {c} ({d}%)'    
  },
  legend: {
    left: 'center',
    top: 'bottom',
    data: [
      'rose1',
      'rose2',
      'rose3',
      'rose4',
      'rose5',
      'rose6',
      'rose7',
      'rose8'
    ]
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Radius Mode',
      type: 'pie',
      radius: [20, 140],
      center: ['25%', '50%'],
      roseType: 'radius',
      itemStyle: {
        borderRadius: 5
      },
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true
        }
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 33, name: 'rose 2' },
        { value: 28, name: 'rose 3' },
        { value: 22, name: 'rose 4' },
        { value: 20, name: 'rose 5' },
        { value: 15, name: 'rose 6' },
        { value: 12, name: 'rose 7' },
        { value: 10, name: 'rose 8' }
      ]
    },
    {
      name: 'Area Mode',
      type: 'pie',
      // 图的半径
      radius: [20, 140],
      center: ['75%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 5
      },
      data: [
        { value: 30, name: 'rose 1' },
        { value: 28, name: 'rose 2' },
        { value: 26, name: 'rose 3' },
        { value: 24, name: 'rose 4' },
        { value: 22, name: 'rose 5' },
        { value: 20, name: 'rose 6' },
        { value: 18, name: 'rose 7' },
        { value: 16, name: 'rose 8' }
      ]
    }
  ]
};

    • 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
  • 相关阅读:
    自定义事件
    记一次Android项目升级Kotlin版本(1.5 -> 1.7)
    Google Chrome如何同步书签
    GoogleTest环境配置以及应用
    分享一个网站实现永久免费HTTPS访问的方法
    Java多线程超级详解(只看这篇就够了)
    如何从零开始系统的学习项目管理？
    7-5python函数-变量的作用域
    【数据结构】单链表之--无头单向非循环链表
    【【萌新编写RiscV之经典计算机组成与设计RISCV书记录 总4】】
  • 原文地址：https://blog.csdn.net/weixin_55608297/article/details/127975306