一、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} <br/>{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,
},
},
],
三、
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）将四个属性补充完整。
问题：在带有图片边框的盒子里添加内容时，盒子四周不同宽度的边框会挤压内容。
解决：里面嵌套一个绝对定位的子盒子，利用top、left、bottom、right将子盒子拉伸后再装内容。（父盒子有多大，子盒子就有多大）
<style>
/* 带有图片边框的盒子--设置图片边框 */
.panel {
position: relative;
border: 1px solid red;
border-width: .6375rem /* 51/80 */ .475rem /* 38/80 */ .25rem /* 20/80 */ 1.65rem /* 132/80 */;
border-image: url(../images/border.png);
border-image-slice: 51 38 20 132;
}
/* 子盒子--通过定位拉伸变大 */
.inner {
position: absolute;
top: -.6375rem;
right: -.475rem;
bottom: -.25rem;
left: -1.65rem;
padding: .3rem .45rem;
}
</style>
<div class="panel">
<div class="inner">123</div>
</div>
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}岁了！`);
