初学Echart

创建一个html文件

1.引入

  点击链接----快速上手网址：快速上手 - 使用手册 - Apache ECharts

复制这一串【这个是引入echart路径】

引入到这里

2.使用

我们在上一步---点击返回--往下翻---找到完整代码--复制黏贴

复制粘贴后--总体长这样

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/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>

</html>

3.运行

咱们vscode用live server打开

4.想换个折线图

来到示例

把js全部copy

替换原有option

再运行

5.脚手架如何运行echart

先创建脚手架

下载echart：https://echarts.apache.org/handbook/zh/basics/import

copy这个命令

运行脚手架

创建一个页面---代码内容如下：

<template>
  <div class="about">
    <!-- 设置一个容器 -->
    <div id="main" style="width: 600px;height:600px">

    </div>
  </div>
</template>

<script>
//局部引入
import * as echarts from 'echarts';
export default {
  created() {

  },
  mounted() {
    //初始化容器
    this.initCharts()
  },

  methods: {
    initCharts() {
      let mycharts = echarts.init(document.querySelector('#main'))
      //绘制图标
      mycharts.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      })
    }
  }
}
</script>

效果

其余配置自己需要学习看文档

Documentation - Apache ECharts

如何看文档？

比如

5.1可以有多图【比如折线和柱状图】

5.2resize()*响应容器大小变化，通常需要伴随防抖使用。

举个例子--图的容器是600px

我给容器增加宽度--但是发现图标没有变化！

那么我们可以这么做

但是我点击了按钮---echart图没有发生改变！！【因为你的宽度修改要先传入data--然后流向标签中，这个过程还没完成就已经先调用了resize，相当于自适应宽度还是为600px对于resize】

这样写就可以啦！！

5.2.1监听window窗口实现自适应

当我缩小窗口时--他也自适应窗口了！！

5.3dispose()* 容器节点被销毁时，应当调用dispose销毁实例

https://echarts.apache.org/zh/api.html#echartsInstance.dispose

6.进阶

6.1.异步数据加载

<template>
  <div class="home">
    <div id="main" style="width: 600px;height:600px">

    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import * as echarts from 'echarts';

export default {
  name: 'HomeView',
  data() {
    return {
      lineCharts: null
    }
  },
  mounted() {
    this.initCharts()
    this.draw()
    this.getData()
  },
  methods: {
    //初始化echarts实例
    initCharts() {
      this.lineCharts = echarts.init(document.querySelector('#main'))
    },

    //绘制图标
    draw() {
      this.lineCharts.setOption(
        {
          title: {
            text: 'ECharts '
          },
          tooltip: {},
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {

          },
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [],
            },
          ]
        }
      )
    },
    //模拟axios获取数据
    getData() {
      setTimeout(() => {
        const res = {
          msg: '操作成功',
          code: 200,
          data: [5, 20, 36, 10, 10, 20]
        }
        // this.draw(res)
        //echart内部有缓存机制，只需要传入更新的配置项就可以了
        this.lineCharts.setOption({
          series: [
            {
              data: res.data,
            },
          ]
        })
      }, 1500)
    }
  }

}
</script>

6.2echart支持一些交互事件

1.如何绑定click

如：click、mousemove、mouseover等。使用click

点击袜子

如何销毁click？--我们先看this指向什么？

指向事件源

2.如何解绑

this指向事件源--我们只能这么操作区获取lineCharts--然后进行解绑

效果：点击一次有数据--再次点击就不会触发click！！

7.geo地图

地址：简数科技

我们选择一个福建省--发现一个json路径--我们打开它

一定要选择！！GeoJSON

上一步错误

都是该省份的数据信息--我们可以导入这个json

我们存到静态资源当中去！

代码如下

<template>
  <div>

    <div id="main" style="width:400px;height:400px;border:1px solid #000">

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
// 引入离线geoJson数据
import fujian from '@/assets/js/350000.json'
export default {
  name: 'MapEcharts',
  data() {
    return {
      mychart: null
    };
  },

  mounted() {
    this.initCharts()
    this.setMap()
  },

  methods: {
    initCharts() {
      //注册地图数据
      echarts.registerMap('FujianMap', fujian)
      //创建实例
      this.mychart = echarts.init(document.querySelector('#main'))

    },
    //绘制地图
    setMap() {

      // 设置配置
      this.mychart.setOption({
        series: {
          name: '中国地图',
          type: 'map',
          // map值为registerMap()注册的地图名称
          map: 'FujianMap',
          roam: true,
          zoom: 1.2,
          scaleLimit: {
            min: 1,
            max: 10
          },
          // 默认状态下的样式
          label: {
            show: true,
            color: 'black'
          },
          itemStyle: {
            areaColor: '#4E90E6'
          },
          // 高亮状态下
          emphasis: {
            label: {
              show: true,
              color: '#ffffff'
            },
            itemStyle: {
              areaColor: '#ff0000'
            }
          },
          // 选中状态下
          select: {
            label: {
              show: true,
              color: 'pink'
            },
            itemStyle: {
              areaColor: 'green'
            }
          }
        }
      })
    }
  }
};
</script>

<style scoped></style>

效果

如果想修改一下地图的配置--来这里

2.进阶

“点击中国地图的福建省--下转到福建省的地图--点击福建省的泉州市--下转到泉州市的地图”--以上这个地图我们应该如何去实现呢？

首先下载axios

然后引入axios

使用axios：先复制这个链接

去请求这个链接

整体代码

<template>
  <div>

    <div id="main" style="width:600px;height:600px;border:1px solid #000">

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
// 引入离线geoJson数据
import fujian from '@/assets/js/350000.json'
import axios from 'axios'
export default {
  name: 'MapEcharts',
  data() {
    return {
      mychart: null
    };
  },

  mounted() {
    this.initCharts()

  },

  methods: {
    initCharts() {

      //创建实例
      this.mychart = echarts.init(document.querySelector('#main'))
      //加载数据
      axios.get('https://geojson.cn/api/data/china.json').then(({ data }) => {
        console.log(data, 'res');
        //注册地图数据
        echarts.registerMap(data.propertity.name, data)
        this.setMap(data.propertity.name)
      })

    },
    //绘制地图
    setMap(MapName) {

      // 设置配置
      this.mychart.setOption({
        series: {
          name: '中国地图',
          type: 'map',
          // map值为registerMap()注册的地图名称
          map: MapName,
          roam: true,
          zoom: 1.2,
          scaleLimit: {
            min: 1,
            max: 10
          },
          // 默认状态下的样式
          label: {
            show: true,
            color: 'black'
          },
          itemStyle: {
            areaColor: '#4E90E6'
          },
          // 高亮状态下
          emphasis: {
            label: {
              show: true,
              color: '#ffffff'
            },
            itemStyle: {
              areaColor: '#ff0000'
            }
          },
          // 选中状态下
          select: {
            label: {
              show: true,
              color: 'pink'
            },
            itemStyle: {
              areaColor: 'green'
            }
          }
        }
      })
    }
  }
};
</script>

<style scoped></style>

效果

其次我们看看axios中的data的数据包含什么？

是每个省份数据

那么我们给这个地图添加点击事件--看看拿到什么？

点击新疆--观察dataIndex:30

和axios获取的data的数据下标对应！、

所以：点击省份--获取到下标数据--去axios的data找对应下标的数据

而且观察路径哪里有变化？【也就只是json面有变化--因此我们可以做字符串凭借发送请求】

我们到底要做什么呢？【1：明确请求路径只有中国数据有！2.你点击省份--获取下标--在中国数据获取对应下标的路径编码（如350000） 3.获取的编码进行再次路径拼接  4.发送请求，进行渲染】

代码

<template>
  <div>

    <div id="main" style="width:600px;height:600px;border:1px solid #000">

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
// 引入离线geoJson数据
import fujian from '@/assets/js/350000.json'
import axios from 'axios'
export default {
  name: 'MapEcharts',
  data() {
    return {
      mychart: null
    };
  },

  mounted() {
    this.initCharts()

  },

  methods: {
    initCharts() {

      //创建实例
      this.mychart = echarts.init(document.querySelector('#main'))

      //加载数据
      axios.get('https://geojson.cn/api/data/china.json').then(({ data }) => {
        console.log(data, 'res');
        //注册地图数据
        echarts.registerMap(data.propertity.name, data)
        this.setMap(data.propertity.name)

        const that = this
        //点击
        this.mychart.on('click', function (e) {
          console.log(e, 'ee');
          console.log(data.features[e.dataIndex]);
          //加载数据
          axios.get(`https://geojson.cn/api/data/${data.features[e.dataIndex].properties.filename}.json`).then(({ data }) => {
            console.log(data, 'res');
            //注册地图数据
            echarts.registerMap(data.propertity.name, data)
            that.setMap(data.propertity.name)
            //我们只切换到省份--所以解绑
            that.mychart.off('click')
          })
        })
      })

    },
    //绘制地图
    setMap(MapName) {
      // 设置配置
      this.mychart.setOption({
        series: {
          name: '中国地图',
          type: 'map',
          // map值为registerMap()注册的地图名称
          map: MapName,
          roam: true,
          zoom: 1.2,
          scaleLimit: {
            min: 1,
            max: 10
          },
          // 默认状态下的样式
          label: {
            show: true,
            color: 'black'
          },
          itemStyle: {
            areaColor: '#4E90E6'
          },
          // 高亮状态下
          emphasis: {
            label: {
              show: true,
              color: '#ffffff'
            },
            itemStyle: {
              areaColor: '#ff0000'
            }
          },
          // 选中状态下
          select: {
            label: {
              show: true,
              color: 'pink'
            },
            itemStyle: {
              areaColor: 'green'
            }
          }
        }
      })
    }
  }
};
</script>

<style scoped></style>

补充！还想点击福建省的某个市--进行下一步注册地图--拼接规律如下

效果

结束！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/647587.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

vulnhub靶场之FunBox-8

vulnhub靶场之FunBox-8

一.环境搭建 1.靶场描述 Its a box for beginners and can be pwned in the lunch break. This works better with VirtualBox rather than VMware 2.靶场下载 Funbox: Lunchbreaker ~ VulnHub 3.靶场启动 二.信息收集 1.寻找靶场真实IP地址 nmap -sP 192.168.2.0/24 arp-…
阅读更多...
驱动开发之字符设备开发

驱动开发之字符设备开发

1.概念 字符设备是 Linux 驱动中最基本的一类设备驱动&#xff0c;字符设备就是一个一个字节&#xff0c;按照字节 流进行读写操作的设备&#xff0c;读写数据是分先后顺序的。比如我们最常见的点灯、按键、IIC、SPI&#xff0c; LCD 等等都是字符设备&#xff0c;这些设备的驱…
阅读更多...
算法在计算中的作用

算法在计算中的作用

前言 算法在基因工程&#xff0c;互联网&#xff0c;电子商务和制造业中都有广泛的应用。最近的智能驾驶和人工智能也处处有着算法的影子。 数据结构 数据结构是数据元素存在的一种形式&#xff0c;有线性和非线性的区别。常见的线性的有链表&#xff0c;数组&#xff0c;栈和…
阅读更多...
Modal.method() 不显示头部的问题

Modal.method() 不显示头部的问题

ant-design中的Modal组件有两种用法&#xff1a; 第一种是用标签&#xff1a;<a-modal></a-modal> 第二种是用Api&#xff1a;Modal.info、Modal.warning、Modal.confirm...... 一开始项目中这两种用法是混用的&#xff0c;后面UI改造&#xff0c;需要统一样式&…
阅读更多...
C++第十七弹---string使用(下)

C++第十七弹---string使用(下)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】 目录 1、标准库中的string类 1.1、string类的常用接口说明 1.1.1、string类对象的修改操作 1.1.2、string类对象非成员函数重载 总结 1、标准库中的…
阅读更多...
修改元组元素

修改元组元素

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 场景模拟&#xff1a;伊米咖啡馆&#xff0c;由于麝香猫咖啡需求量较大&#xff0c;库存不足&#xff0c;店长想把它换成拿铁咖啡。 实例08 将麝香猫…
阅读更多...
[笔试训练](三十三)097:跳台台阶扩展问题098:包含不超过两种字符的最长子串099:字符串的排列

[笔试训练](三十三)097:跳台台阶扩展问题098:包含不超过两种字符的最长子串099:字符串的排列

目录 097:跳台台阶扩展问题 098:包含不超过两种字符的最长子串 099:字符串的排列 097:跳台台阶扩展问题 题目链接:跳台阶扩展问题_牛客题霸_牛客网 (nowcoder.com) 题目&#xff1a; 题解&#xff1a; 规律题: 1.跳上n级台阶的跳法等于前面1~(n-1)级台阶跳法的总和1。 2.跳…
阅读更多...
WWW 2024最佳论文|大型语言模型的机制设计

WWW 2024最佳论文|大型语言模型的机制设计

【摘要】我们研究拍卖机制以支持人工智能生成内容的新兴格式。我们特别研究如何以激励兼容的方式聚合多个法学硕士。在这个问题中&#xff0c;每个代理对随机生成的内容的偏好被描述/编码为 LLM。一个关键动机是为人工智能生成的广告创意设计一种拍卖格式&#xff0c;以结合不同…
阅读更多...
GEC210编译环境搭建

GEC210编译环境搭建

一、下载编译工具链 下载&#xff1a;点击跳转 二、解压到 /usr/local/arm 目录 sudo mv gec210.zip /usr/local/arm cd /usr/local/arm sudo unzip gec210.zip 三、添加到环境变量 PATH/usr/local/arm/arm-cortex_a8-linux-gnueabi-4.7.3/bin:$PATH 四、测试验证 在终端…
阅读更多...
网络原理-以太网协议和DNS协议

网络原理-以太网协议和DNS协议

一、以太网协议 以太网协议会涉及到数据链路层和物理层。 如图&#xff1a; 这里面的目的地址和源地址指的并不是IP地址,而是MAC地址(物理地址)。长度为6个字节。即最多能表示2^48 个地址,也是非常大的,足够给全球每个设备都分配一个地址,因此在网卡出厂的时候都会带有一个唯…
阅读更多...
Mysql之主从同步

Mysql之主从同步

1.BinLog同步机制 Mysql要去保证高可用&#xff0c;或者去分担请求压力&#xff0c;一般会去主从部署&#xff0c;读写分离。写库只负责写&#xff0c;而读库更多的去承担读的请求&#xff0c;从库不写数据&#xff0c;数据从主库同步&#xff0c;那么到底是怎么同步的呢&…
阅读更多...
ant design pro 6.0列表渲实践demo

ant design pro 6.0列表渲实践demo

ant design pro 用户列表渲实践 用户页面&#xff1a; src\pages\Admin\User\index.tsx import { PlusOutlined } from ant-design/icons; import type { ActionType, ProColumns, ProDescriptionsItemProps } from ant-design/pro-components; import {PageContainer,ProDe…
阅读更多...
Pycharm2024搭建QT6开发环境

Pycharm2024搭建QT6开发环境

创建pyqt6虚拟环境 首先&#xff0c;创建一个qt6的虚拟环境&#xff1a; conda create --name pyqt6 python3.11.7激活环境&#xff1a; conda activate pyqt6安装pyqt6 安装pyqt6&#xff1a; pip install pyqt6创建代码目录 创建目录&#xff1a; 使用pycharm打开这个…
阅读更多...
springboot + Vue前后端项目（第十一记）

springboot + Vue前后端项目（第十一记）

项目实战第十一记 1.写在前面2. 文件上传和下载后端2.1 数据库编写2.2 工具类CodeGenerator生成代码2.2.1 FileController2.2.2 application.yml2.2.3 拦截器InterceptorConfig 放行 3 文件上传和下载前端3.1 File.vue页面编写3.2 路由配置3.3 Aside.vue 最终效果图总结写在最后…
阅读更多...
分享活动规划

分享活动规划

前两天去参加菁英学院的一些辅导&#xff0c;是关于苏州久富农业机械的发展&#xff0c;看了他们企业的故事&#xff0c;我觉得我们农机很有前景和发展空间&#xff0c;我希望重新经过一次分享活动来分享我的感触&#xff0c;希望能够再次把我学到的内容传输到其他班的同学们 请…
阅读更多...
主干网络篇 | YOLOv8更换主干网络之MobileNeXt | 新一代移动端模型MobileNeXt来了！

主干网络篇 | YOLOv8更换主干网络之MobileNeXt | 新一代移动端模型MobileNeXt来了！

前言：Hello大家好，我是小哥谈。MobileNeXt是由微软研究院提出的一种高效的卷积神经网络结构，它在保持模型轻量级的同时，能够获得较高的性能。MobileNeXt采用了一种称为Inverted Residuals with Linear Bottlenecks（IRL）的结构，通过深度可分离卷积和快捷连接来减少模型的…
阅读更多...
洗地机十大品牌排名：2024十大值得入手的洗地机盘点

洗地机十大品牌排名：2024十大值得入手的洗地机盘点

随着生活水平的提高&#xff0c;智能清洁家电已经成为日常生活中的必需品。洗地机之所以在家庭清洁中大受欢迎&#xff0c;主要是因为它的多功能特性。传统的清洁方式通常需要扫帚、拖把和吸尘器分别进行操作&#xff0c;而洗地机将这些功能集成在一个设备中&#xff0c;使清洁…
阅读更多...
谷歌Google广告投放优势和注意事项！

谷歌Google广告投放优势和注意事项！

谷歌Google作为全球最大的搜索引擎&#xff0c;谷歌不仅拥有庞大的用户基础&#xff0c;还提供了高度精准的广告投放平台&#xff0c;让广告主能够高效触达目标受众&#xff0c;实现品牌曝光、流量增长乃至销售转化的多重目标&#xff0c;云衔科技以专业服务助力您谷歌Google广…
阅读更多...
【mysql】in和exists的区别，not in、not exists、left join的相互转换

【mysql】in和exists的区别，not in、not exists、left join的相互转换

【mysql】in和exists的区别&#xff0c;not in、not exists、left join的相互转换 【一】in介绍【1】in中数据量的限制【2】null值不参与in或not in&#xff0c;也就是说in and not in 并不是全量值&#xff0c;排除了null值【3】in的执行逻辑 【二】exists介绍【1】exists no…
阅读更多...
-bash: locate: 未找到命令（解决办法）

-bash: locate: 未找到命令（解决办法）

-bash: locate: 未找到命令的解决办法 一、解决办法二、什么是locate三 、locate命令的具体用法 一、解决办法 CentOS7默认没有安装locate命令&#xff0c;安装方式如下&#xff1a; 执行以下命令进行安装&#xff1a; yum install mlocate用 updatedb 指令创建 或更新locate …
阅读更多...
最新文章

Copyright @ 2022~2023