创建一个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>补充！还想点击福建省的某个市--进行下一步注册地图--拼接规律如下
效果
结束！
![[C++]debug介绍+debug时如何查看指针指向内存处的值](https://img-blog.csdnimg.cn/direct/42389a0515d941e48a795ab902b2f7d8.png)
