石景山广州网站建设幼儿保育专业建设规划
工作中第一次碰到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-childflex: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 官网