工作中第一次碰到echarts，当时有大哥。二进宫没办法，只能搞定它。
感觉生活就是这样，不能解决的问题总是会反复出现。通过看视频、查资料，完成了工作要求。写一篇Hello World，进行备查。
基本使用
快速上手
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>ECharts快速上手</title>
</head>
<body>
<!-- 1. 创建echarts容器-->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript" src="./js/echarts.min.js"></script>
<script type="text/javascript">
//2. 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 3. 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 4. 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
echarts 使用分为固定的四步
1 定义容器container
定义容器必须设置width\height，否则不会显示
2.初始化echarts对象myChart
3.创建选项option
4.echarts和option进行绑定
注意：
1. 每次修改option中的数据或配置后，必须重新调用setOption进行绑定；
2. option选项采用的是覆盖方式，在第N次修改的option，是对前面option选项的调整。（新option设置的，进行设置；没有指定的采用原来的配置项）
3. echarts 使用的难点在于option配置项太多,一定要养成勤查字典的习惯 官方地址***
基础知识
常用图表和其对应的作用
series.type字段指定图表类型。 图表类型和作用说明如下：
| type | 图表名称 | 用途 | 图片 |
|---|---|---|---|
| line | 折线图 | 展现数据的变化趋势 |  |
| bar | 柱状图图 | 分类数据对比 |  |
| pie | 饼图 | 不同类目的数据在总和中的占比 |  |
| scatter | 散点图 | 展现数据的 x，y 之间的关系 |  |
| radar | 雷达图 | 多属性分析 |  |
| map | 地图 | 地理区域数据的可视化 |  |
了解基础配置
需要了解的基本配置：
seriesxAxisyAxisgridtooltiptitlelegendcolor
-
series是一个数组，里面可以放多种图表（eg.多为柱状图、折线图和柱状图一起显示）。图表类型由对象里面的type字段指定， 根据要使用的type类型去series 配置选项 查找对应的配置项。
-
grid：直角坐标系内绘图网格。 常见的柱状图、折线图需要直角坐标系.通过left 、top等属性，设置图形距离容器的边距。
containLabel：true //将刻度标签算作grid内 -
xAxis：直角坐标系x 轴
-
yAxis：直角坐标系 y 轴
-
title：标题组件
下图1111即标题
-
tooltip：提示框组件
trigger触发方式
‘item’：数据项图形触发，主要在散点图，饼图等无X\Y轴的图表中使用。
‘axis’：坐标轴触发，主要在柱状图，折线图等会使用X\Y轴的图表中使用。 -
legend：图例组件
上方标志线条颜色和类型对应关系
-
color：调色盘颜色列表
指定 color:[‘red’]效果
坐标系X轴、Y轴配置参数
坐标系X轴、Y轴配置参数完全一致 明确要修改的内容、
找到对应的配置参数，进行调整。
| 名称 | 属性 |
|---|---|
| 轴线 | axisLine |
| 刻度 | axisTick |
| 标签 | axisLabel |
| 网格线 | splitLine |
boundaryGap
boundaryGap:xAxis子属性，坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。说实话，我也没看懂啥意思，通过下面的图对比看一下。
柱状图自动标注极值
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
markLine:{
data:[{
type: 'average',
name:'平均值',
lineStyle:{
color: '#FFA022',
width:2
},
label:{
show:true,
color:'#f00',
shadowColor: 'transparent',
position:'end',
formatter: function(params){
return '平均值：'+params.value
}
}
}]
}
}
]
};
series-bar.markLine进行控制。
| type | 作用 |
|---|---|
| average | 平均值 |
| min | 最小值 |
| max | 最大值 |
| median | 中位数 |
地图缩放处理
监听屏幕变化，调用缩放方法
window.addEventListener('resize',()=>{
console.log('处理窗口缩放时要处理的逻辑操作！');
mychart.resize();
});
地图使用指南
展示中国地图
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 1. 创建容器-->
<div class="map" style="width:500px;height:500px;">
</div>
<script type="text/javascript" src="./js/echarts.min.js"></script>
<script type="text/javascript">
fetch('./json/china.json').then(res => res.json()).then(res => {
let chinaJson = res
//附加 注册地图
echarts.registerMap('china', chinaJson)
//1. 初始化dom 容器
let mychart = echarts.init(document.querySelector('.map'))
//2. 初始化选项
let option = {
series: [
{
type: 'map',
map: 'china',
roam: true,
zoom: 1.2,
itemStyle: {
areaColor: '#6080f1',
borderColor: '#ccc'
},
label: {
show: true,
color: '#fff'
},
emphasis: {
itemStyle: {
areaColor: '#0f3cde'
}
}
}
]
}
mychart.setOption(option)
})
</script>
</body>
</html>
参照原来的一般规则（附加地图注册），就可以展示一张简单的地图。注意注册的名字必须和map value一致。
这个地图也太简单了，几乎没有功能。下面在地图上添加标注。
地图添加标注
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 1. 创建容器-->
<div class="map" style="width:500px;height:500px;">
</div>
<script type="text/javascript" src="./js/echarts.min.js"></script>
<script type="text/javascript">
fetch('./json/china.json').then(res => res.json()).then(res => {
let chinaJson = res
//附加 注册地图
echarts.registerMap('china', chinaJson)
//2. 初始化dom 容器
let mychart = echarts.init(document.querySelector('.map'))
//3. 初始化选项
let option = {
geo: {
tooltip: {
show: true
},
map: 'china',
roam: true
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
data: [
{
name: '上海',
value: [121.48, 31.22, 11]
},
{
name: '广州',
value: [113.23, 23.16, 31]
}
],
symbol: 'image://./images/ic_location.png',
// symbol: 'image://http://api.tianditu.gov.cn/img/map/markerA.png',
//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
symbolSize: 30,
label: {
show: true,
color: '#fff',
fontSize: 18,
formatter: function (params) {
// console.error('params:' + JSON.stringify(params))
return params.value[2]
}
}
}
]
}
//4. 进行绑定
mychart.setOption(option)
})
</script>
</body>
</html>
在地图上添加标记时，处理方式有所不同。
- 在option根属性下必须添加一个geo选项，个人理解就是添加地图坐标系
- series 数组下 type scatter，指定为散点图 coordinateSystem、geoIndex指定散点图坐标系。
- 其中的data 就是散点。 symbol 散点图标、label散点标签
地图下钻
名字起的有点专业了，就是点击中国地图山东版块后，展示山东行政区各个地级市的地图。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 1. 创建容器-->
<div class="map" style="width:500px;height:500px;">
</div>
<script type="text/javascript" src="./js/echarts.min.js"></script>
<script type="text/javascript">
//1. 初始化dom 容器
let mychart = echarts.init(document.querySelector('.map'))
function clickMap(cityName) {
// alert('Hello, World!');
fetch(`./json/${cityName}.json`).then(res => res.json()).then(res => {
let cityJson = res;
echarts.registerMap(cityName, cityJson)
let option = {
geo: {
map: cityName,
roam: true
},
}
mychart.setOption(option)
})
}
fetch('./json/china.json').then(res => res.json()).then(res => {
let chinaJson = res
//附加 注册地图
echarts.registerMap('china', chinaJson)
mychart.on('click', function (params) {
console.error('params:' + params.name) //新疆维吾尔自治区
clickMap(params.name)
})
//2. 初始化选项
let option = {
geo: {
tooltip: {
show: true
},
map: 'china',
roam: true
},
}
mychart.setOption(option)
})
</script>
</body>
</html>
前端知识杂记
css 特殊符号
.mainbox{
display:flex;
.column{
flex:3;
&:nth-child(2){ //1st节点选择器为 first-child
flex:5
}
}
}
这样就可以实现个别元素的定制化。
& 代表单签的选择器。当嵌套定义样式时，&会替换父选择器。
:: 用于定义伪元素 eg. &::before{} &::after{}
: 用于定义伪类 eg. :hover
选择器
document.querySelector 可以获取文档中的第一个匹配的元素。
. class查询
# id查询
什么都不写，进行标签查询 eg. div
居中的典范代码
.login{
width: 200px;
height: 200px;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
background-color:#cccccc;
}
一般使用规则
- 找一个参考样本 素材库
- 在上面进行配置项调整，直到做出满意的效果，直接复制即可
- 对于配置项存在的问题 查字典解决
问题总结
行政区边界下载
行政区边界在线访问 https://geo.datav.aliyun.com/areas_v3/bound/650102.json
650102 行政区域码
参考资料
pink ECharts数据可视化项目
echarts 官网
