当前位置：首页 > news >正文

echarts 入门

news 文章来源：https://blog.csdn.net/guchuanhang/article/details/142796175 2025/5/19 0:49:13

工作中第一次碰到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	地图	地理区域数据的可视化

了解基础配置

需要了解的基本配置：series xAxis yAxis grid tooltip title legend color

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 官网