2021-04-17数据可视化第一天

一、Echarts的使用

（1）下载并在页面引入Echarts的js文件
https://github.com/apache/incubator-echarts/tree/4.5.0

（2）准备一个具有大小的DOM容器
（3）初始化Echarts实例对象

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

（4）指定配置项和数据：到官网复制代码

var option = { ... };

（5）将配置项和数据赋值给Echarts实例对象

myChart.setOption(option);

二、修改配置项和数据

基础配置：
（1）title：标题组件
（2）tooltip：提示框组件（鼠标经过图表时）

// 提示框组件
    tooltip: {
      // trigger 触发方式。  非轴图形，使用item的意思是放到数据对应图形上触发提示
      trigger: 'item',
      // 格式化提示内容：
      // a 代表series系列图表名称  
      // b 代表series数据名称 data 里面的name    
      // c 代表series数据值 data 里面的value   
      // d代表  当前数据/总数据的比例
      formatter: "{a} 
{b} : {c} ({d}%)"
    },

（3）legend：图例组件（顶部）
（4）toolbox：工具栏（下载）
（5）grid：直角坐标系内绘图网格。

属性left、right、top、bottom：grid距离父级容器的距离。
属性containLabel：当值为true时，grid区域包含坐标值部分，当left值为0%时坐标值不会溢出父级容器。

网格边框颜色：grid 配置：
show: true,
borderColor: "rgba(0, 240, 255, 0.3)"

（6）color：调色盘颜色列表

// 修改线性渐变色方式 1
color: new echarts.graphic.LinearGradient(
     // (x1,y2) 点到点 (x2,y2) 之间进行渐变
     0, 0, 0, 1,
     [
          { offset: 0, color: '#00fffb' }, // 0 起始颜色
          { offset: 1, color: '#0061ce' }  // 1 结束颜色
    ]
 ),

（7）xAxis：直角坐标系 grid 中的 x 轴

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

（8）yAxis：直角坐标系 grid 中的 y 轴

X轴和Y轴线条颜色：
xAxis/yAxis配置：
axisLine: {
lineStyle: {
color: "green"
}
}
坐标轴分割线颜色：
xAxis/yAxis配置：
splitLine: {
lineStyle: {
color: 'red' }
}

（9）series: 系列列表

type: 类型 (什么类型的图表) 比如 line 是折线 bar 柱形等
name: 系列名称，用于tooltip的显示，legend 的图例筛选变化
stack: 数据堆叠。如果设置相同值，则会数据堆叠。
数据堆叠：第二个数据值= 第一个数据值 + 第二个数据值
第三个数据值 = 第二个数据值 + 第三个数据值…. 依次叠加
如果给stack 指定不同值或者去掉这个属性则不会发生数据堆叠

// 控制图表
    series: [
      {
        // 图表名称
        name: '点位统计',
        // 图表类型：饼形图
        type: 'pie',
        // 饼形图半径。 可以是像素（不加引号）。也可以是百分比（ 基于DOM容器大小，必须加【】引号】）
        //第一项是内半径，第二项是外半径（通过它可以实现饼形图大小）
        radius: ['10%', '70%'],
        // 图表中心位置 left 50%  top 50%  距离图表DOM容器
        center: ['50%', '50%'],
        // radius 半径模式，另外一种是 area 面积模式
        roseType: 'radius',
        // 数据集 value 数据的值 name 数据的名称
        data: [
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
                {value:20, name:'rose5'},
                {value:35, name:'rose6'},
                {value:30, name:'rose7'},
                {value:40, name:'rose8'}
            ]，
       //饼形图设置文字样式：series里面的label对象
        label: {
            fontSize: 10,
          },
       //饼形图设置线的样式：series里面的labelLine对象
          labelLine: {
            lengtn: 6,
            lengtn: 8,
          },
        },
    ],

捕获.PNG

三、

1.边框图片 border-image

属性 &&描述：
（1）border-image-source ：用在边框的图片的路径。
（2）border-image-slice：切割边框图片（裁剪的尺寸，一定不加单位，上右下左顺序）
（3）border-image-width：边框图片的宽度（需要加单位），边框图片不会挤压内部文字
（4）border-image-repeat：边框图片是否平铺(repeat)、铺满(round)或拉伸(stretch) 默认拉伸

格式：
组合写法：border-image: url("images/border.jpg") 167/20px round;
拆分写法：border-image-source: url("images/border.jpg");
　　　　　border-image-slice: 167 167 167 167;
　　　　　border-image-width: 20px;
　　　　　border-image-repeat: round;

使用：
（1）可以写一个类存放边框图片的css样式，哪个盒子用就添加这个类。
（2）可以根据边框图片每条边切割的大小border-images-source来设置边框的大小，边框图片的宽度默认与边框相同。
（3）将四个属性补充完整。

捕获.PNG

问题：在带有图片边框的盒子里添加内容时，盒子四周不同宽度的边框会挤压内容。
解决：里面嵌套一个绝对定位的子盒子，利用top、left、bottom、right将子盒子拉伸后再装内容。（父盒子有多大，子盒子就有多大）

2. 通过类名调用字体图标

（1）将fonts文件夹和style.css文件放到我们的文件夹结构中。
（2）在HTML页面引入字体图标的style.css文件。（相当于全局声明，注意里面的路径）
（3）HTML标签直接调用图标对应的类名即可。（类名在css文件中标注）

3.传统使用字体图标的方式

（1）把下载包里面的 fonts 文件夹放入页面所在的根目录下。
（2）在 CSS 样式中全局声明字体：代码在style.css中。（注意路径）
（3）在HTML标签中加上想要使用的字体图标所对应的小框框。
（4）在CSS中为字体图标声明字体类型。font-family: ‘icomoon’;
注意：第二步全局声明字体时，注意路径问题。

四、

1.ES6模板字符串

console.log(`我的名字叫$ {name}，我今年$ {age}岁了！`);