echarts 入门

🕗 发布于 2024-10-12 23:26 echarts 前端 javascript

工作中第一次碰到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-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 官网

原文地址：https://blog.csdn.net/guchuanhang/article/details/142796175

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：物理学基础精解【80】
下一篇：光伏系统：如何进一步提高太阳能转化效率?

六西格玛设计DFSS方法论在消费级无人机设计中的应用——张驰咨询
本文基于六西格玛设计方法论，对消费级无人机的设计流程进行系统化研究，探讨如何通过六西格玛设计的理念、工具和方法提升无人机产品的设计质量和市场竞争力。文章从市场定位、客户需求分析出发，深入到关键KPI指
阅读更多2024-10-15
github pages + hugo 搭建静态博客网站
hugo 是一个静态博客渲染工具， go 语言写的。安装:choco install hugo-extended # 失败。估计是权限。
阅读更多2024-10-15
【华为HCIP实战课程十二】OSPF网络中1类2类LSA SPF详解，网络工程师
Link Type: TransNet //拓扑信息代表多点接入网络，网络中的DR 10.1.15.3没有掩码信息和网络信息再2类LSA中有。R5上我们查看LSA，R6通告的拓扑信息为TransNe
阅读更多2024-10-15
springboot3使用Excel导入数据库数据
【代码】springboot3使用Excel导入数据库数据。
阅读更多2024-10-15
springboot 修复 Spring Framework 特定条件下目录遍历漏洞（CVE-2024-38816）
springboot2.x升级到3.x实战经验总结安全版本6.0.24 和 6.1.13 是springboot3.x使用的版本，springboot3.x的用户只需要将springboot升级到最新
阅读更多2024-10-15
MongoDB 介绍
聚合管道是由多个阶段组成的流水线，每个阶段对输入数据进行特定的操作，并将结果传递给下一个阶段。聚合管道可以处理大量的数据，并提供了丰富的操作，如过滤、分组、排序、计算聚合值等。它采用了灵活的数据模型，
阅读更多2024-10-15
无人机集群路径规划：5种优化算法（SFOA、APO、GOOSE、CO、PIO）求解无人机集群路径规划，提供MATLAB代码
无人机三维路径规划是指在三维空间中为无人机规划一条合理的飞行路径，使其能够安全、高效地完成任务。路径规划是无人机自主飞行的关键技术之一，它可以通过算法和模型来确定无人机的航迹，以避开障碍物、优化飞行时
阅读更多2024-10-15
【数据处理】大数据入门
大数据是一种数据规模大到在数据的获取管理，存储处理，分析计算都远远超过传统数据库软件工具处理范围的数据集合大数据是指无法在一定时间内用常规软件工具对其内容进行抓取、管理和处理的数据集合（维基百科）基
阅读更多2024-10-15
大数据干了什么？
1.大数据技术主要解决的问题是。
阅读更多2024-10-15
Flink入门
Core APIs 提供的流式 API（Fluent API）为数据处理提供了通用的模块组件，例如各种形式的用户自定义转换（transformations）、联接（joins）、聚合（aggregat
阅读更多2024-10-15