笔记目录
小概
学习内容:
第一部分复习css样式属性:边框背景图片border-image,,background-size,超出文本显示省略号
第二部分echarts的学习:基本使用,option配置项的学习,图的制作(饼图,线形图,条形图,环形图,迁徙图)、
一、border-image属性
边框背景图片
/* 边框背景图片 */
/* 1.设置边框背景图片来源 */
border-image-source: url('./image/border2.jpg');
/* 2.设置边框背景图片偏移量:用四个偏移量(上右下左)把图片裁剪成九宫格 */
border-image-slice: 167 167 167 167;
/* 3.设置边框背景图片的宽度:一般和盒子的宽度一致 */
border-image-width: 20px;
/* 4.设置中间图片的平铺样式:repeat重复 stretch拉伸 round铺满 */
border-image-repeat: stretch;
/* 复合属性可以连写 */
border-image: url('./image/border2.jpg') 167 167 167 167/20px stretch;
应用:
.panel {
width: 300px;
height: 150px;
/* 设置边框背景图片的前提是盒子有边框的 */
border: 20px solid red;
border-width: 50px 38px 20px 126px;
/* 内减盒子 */
box-sizing: border-box;
/* 父相 */
position: relative;
/* 边框背景图片 */
/* 1. */
border-image-source: url('./image/border.png');
/* 2. */
border-image-slice:50 38 20 126;
/* 3. */
border-image-width: 50px 38px 20px 126px;
/* 4. */
border-image-repeat: stretch;
}
.inner {
/* 子绝 */
position: absolute;
top:-50px;
right: -38px;
bottom: -20px;
left: -126px;
padding: 20px 30px;
}
</style>
</head>
<body>
<!-- 外面的盒子专门用来做边框背景 -->
<div class="panel">
<!-- 里面的盒子专门用来放内容 -->
<div class="inner">哈哈</div>
</div>
2. background-size
希望背景图片占满盒子,那就要设置background-size */
contain 等比例缩放图片,有一边到了盒子的边界就停止缩放 */
cover 等比例缩放图片,必须要让图片占满整个才停止缩放 */
3. 超出文本显示省略号
单行:
white-space:nowrop 禁止换行
overflow:hidden 超出隐藏
text-overflow:ellipsis 文本溢出显示省略号
多行:
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
忘记建议百度,这个有可能会有兼容性问题
4. Echarts制图
4.1 基本使用
1.引入echarts文件
2.为图表准备一个有宽高的容器
3.根据这个有宽高的容器,调用echarts的init方法创建一个echarts的实例
4.调用echarts实例的setOtion方法----参数就option配置项
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
4.2 option配置项的学习
1.直接去看配置项手册(全面,但是多 难找)
2.直接去看示例 (容易看懂,但是没手册全)
下面列举几个比较常用的option配置项
1.title 标题
2.legend 图例组件
type 图例的类型(plain普通图例 scroll滚动图例)
data 图例的数据数组
3.grid
left/top/right/bottom 相当于盒子模型的padding
width/height 设置组件的宽高
4.xAxis 直角坐标系 grid 中的 x 轴
show 是否显示 x 轴
position x轴的位置,默认在下方('bottom'),值可以是 'top'/'bottom'
data 数组,元素是对象 是x轴需要显示的数据
对象里有value和textStyle
axisLine Object 坐标轴轴线
show 是否显示x轴线
lineStyle x轴线的样式
color x轴线的颜色
axisTick Object 坐标轴刻度相关设置
show 是否显示刻度线
lineStyle 刻度线的样式
color 刻度线的颜色
axisLabel Object 坐标轴文本
show 是否显示x轴的文本
color x轴的文本颜色
splitLine Object 坐标轴在 grid 区域中的分隔线
show 是否显示x轴分割线
lineStyle x轴分割线的样式
color x轴分割线的颜色
splitArea Object 坐标轴在 grid 区域中的分隔区域
show 是否显示
areaStyle 区域样式
color 颜色
5.yAxis y轴
min y轴最小刻度
max y轴最大刻度
minInterval 最小间隔
maxInterval 最大间隔
6.tooltip 提示框组件
show 是否显示提示框
trigger 触发类型
'item' 饼图
'axis' 柱状图/折线图
'none' 什么都不触发
position 提示框浮层的位置
formatter 提示框浮层内容格式器
7.toolbox工具栏
内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。
8.series 数组 系列图表
type 图表的类型
line线形图 bar柱状图 pie饼图
每一个图表里面都有一个itemStyle
9.color 调色盘颜色列表
如果不设置从默认的调色盘中获取颜色.
10.backgroundColor 背景色,默认无背景
4.3 图表的制作
1.饼图
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
// 背景色
backgroundColor: '#2c343c',
//标题
// title: {
// text: 'Customized Pie',
// left: 'center',
// top: 20,
// textStyle: {
// color: '#ccc'
// }
// },
//鼠标移入的提示框
tooltip: {
trigger: 'item'
},
// visualMap: {
// show: true,
// min: 80,
// max: 600,
// inRange: {
// colorLightness: [0, 1]
// }
// },
series: [{
//系列名称
name: '点位分布统计',
//饼图
type: 'pie',
//半径
radius: [10, 90],
//圆心的位置
center: ['50%', '50%'],
//数据
data: [{
value: 110,
name: '云南'
},
{
value: 160,
name: '北京'
},
{
value: 180,
name: '山东'
},
{
value: 180,
name: '河北'
},
{
value: 160,
name: '江苏'
},
{
value: 200,
name: '浙江'
},
{
value: 280,
name: '四川'
},
{
value: 335,
name: '湖北'
}
],
//不需要排序
//.sort(function (a, b) { return a.value - b.value; }),
//是否用圆心角和半径 区分数据的大小
roseType: 'radius',
//图例文字的颜色
// label: {
// color: ''
// },
//引导线
labelLine: {
//引导线的样式
lineStyle: {
//引导线的颜色
//color: 'rgba(0, 255, 0, 0.3)'
},
//是否平滑视觉引导线,默认不平滑,可以设置成 true 平滑显示,
//也可以设置为 0 到 1 的值,表示平滑程度
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
// color: '#c23531',
// shadowBlur: 200,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
2.柱状图
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
let item = {
value: 1000,
itemStyle: {
color: '#254065', //颜色
opacity: 0.6 //透明度
}
};
let option = {
//鼠标移入的提示框
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'none' // 默认为直线,可选为:'line' | 'shadow'
}
},
//
grid: {
left: '3%',
right: '4%',
bottom: '3%',
//grid 区域是否包含坐标轴的刻度标签
containLabel: true
},
//x轴
xAxis: [{
type: 'category',
data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
// 刻度线
axisTick: {
show: false,
//刻度线和图例对齐
alignWithLabel: true
},
// 轴文本
axisLabel: {
show: true, //显示如否
color: '#4c9bfd'
},
// 轴线颜色
axisLine: {
show: true, //显示如否
lineStyle: {
color: '#01586b'
}
}
}],
//y轴
yAxis: [{
show: true,
type: 'value',
// 刻度线
axisTick: {
show: false,
alignWithLabel: true
},
// 轴文本
axisLabel: {
show: true, //显示如否
color: '#4c9bfd'
},
// 轴线颜色
axisLine: {
show: true, //显示如否
lineStyle: {
color: '#01586b'
}
},
//分割线
splitLine: {
show: true, //显示如否
// 分割线样式
lineStyle: {
color: '#01586b' //颜色
}
}
}, {
// 轴线颜色
axisLine: {
show: true, //显示如否
lineStyle: {
color: '#01586b'
}
},
}],
series: [{
name: '用户统计',
type: 'bar',
//柱状条的宽度,自适应宽度的百分比
barWidth: '60%',
// 数据
data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240],
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#00faf9'
},
{
offset: 1,
color: '#0064cf'
}
]
)
}
}, ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
3.线形图
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
let option = {
//标题
title: {
text: '单位 万',
textStyle: {
color: '#4996f5', //颜色
fontSize: 14
},
left: 30
},
// 鼠标移入的提示框
tooltip: {
// trigger: 'axis',
// axisPointer: { // 坐标轴指示器,坐标轴触发有效
// type: 'none' // 默认为直线,可选为:'line' | 'shadow'
// }
},
// 图例组件
legend: {
data: ['最高额度', '最低额度'],
right: 50,
textStyle: {
color: '#4995f4'
}
},
//工具栏
// toolbox: {
// show: true,
// feature: {
// dataZoom: {
// yAxisIndex: 'none'
// },
// dataView: {readOnly: false},
// magicType: {type: ['line', 'bar']},
// restore: {},
// saveAsImage: {}
// }
// },
//X轴
xAxis: {
type: 'category',
//坐标轴两边留白策略
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
//x轴刻度
axisTick: {
show: false
},
//x轴文本
axisLabel: {
color: '#438be5', //颜色
align: 'left' //文本对齐方式
},
//x轴轴线
axisLine: {
lineStyle: {
color: '#012b48'
}
}
},
//Y轴
yAxis: {
type: 'value',
//y轴文本
axisLabel: {
// formatter: '{value} °C'
color: '#438be5'
},
//y轴刻度
axisTick: {
show: false
},
//y轴轴线
axisLine: {
show: true,
lineStyle: {
color: '#012b48'
}
},
//y轴分割线
splitLine: {
lineStyle: {
color: '#012b48'
}
}
},
series: [{
name: '最高额度',
type: 'line',
data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
//线是否平滑
smooth: true,
//标记点的大小
symbolSize: 8,
//线和点都改变样式
itemStyle: {
color: '#00f2f1'
}
//线改变样式
// lineStyle:{
// color:'red'
// },
//线包含的区域样式
// areaStyle:{
// color:'red'
// }
//标记点
// markPoint: {
// data: [
// {type: 'max', name: '最大值'},
// {type: 'min', name: '最小值'}
// ]
// },
//标记线
// markLine: {
// data: [
// {type: 'average', name: '平均值'}
// ]
// }
},
{
name: '最低额度',
type: 'line',
data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
//线是否平滑
smooth: true,
//标记点的大小
symbolSize: 8,
//线和点都改变样式
itemStyle: {
color: '#dd3c36'
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
4.环形图
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
let option = {
// tooltip: {
// trigger: 'item'
// },
// legend: {
// top: '5%',
// left: 'center'
// },
series: [{
startAngle: 180,
name: '访问来源',
type: 'pie',
// 内外半径
radius: ['50%', '70%'],
//是否启用防止标签重叠策略
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [{
value: 3,
name: '搜索引擎',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#0063c2'
},
{
offset: 1,
color: '#00c3de'
}
]
)
},
},
{
value: 1,
name: '直接访问',
itemStyle: {
color: '#d0274d'
}
},
{
value: 4,
name: '邮件营销',
itemStyle: {
color: 'transparent'
}
},
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
其实就是环形图,把半的背景设置为transparent(透明色)
5.迁徙图(这个是网友用这个插件写的)
这个需要再引入./china.js文件,但是新版本好像没有这个map文件了
4.4 动态数据切换
如果需要动态数据切换,可以重新给option.series.data进行赋值,注意需要重新调用setOption方法进行渲染。
总结
学会echarts这个插件,网页绘图就很炫,option配置属性有很多属性,不要求都记住 但是一定要会找,要掌握找官方文档的技能。