一、Echarts的基础使用
- 创建Vue3 Vite项目
PS F:\Vue> pnpm create vite
Packages: +6
++++++
Packages are hard linked from the content-addressable store to the virtual store.
Content-addressable store is at: C:\Users\FORGET\.pnpm-store\v3
Virtual store is at: node_modules/.pnpm
C:\Users\FORGET\AppData\Local\Temp\dlx-8536\5:
+ create-vite 2.7.2
Progress: resolved 6, reused 1, downloaded 5, added 6, done
√ Project name: ... echarts
√ Select a framework: » vue
√ Select a variant: » vue-ts
Scaffolding project in F:\Vue\echarts...
Done. Now run:
cd echarts
npm install
npm run dev
PS F:\Vue> cd .\echarts\
PS F:\Vue\echarts>
- 安装Echarts最新版本
pnpm install -S echarts
- 使用方式一
<script lang="ts" setup>
import { ref, onMounted } from "vue";
// 按需引入 echarts
import * as echarts from "echarts";
onMounted(
() => {
init()
}
)
function init() {
// 基于准备好的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>
<template>
<div id="main" style="width: 100%; height: 400px"></div>
</template>
<style scoped>
</style>
- 使用方式二，推荐使用
<script lang="ts" setup>
import { ref, onMounted } from "vue";
// 按需引入 echarts
import * as echarts from "echarts";
const main = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
onMounted(
() => {
init()
}
)
function init() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(main.value);
// 指定图表的配置项和数据
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>
<template>
<div ref="main" style="width: 100%; height: 400px"></div>
</template>
<style scoped>
</style>
二、defineProps 和 defineEmits
注意：defineProps 和 defineEmits 都是只在 <script setup> 中才能使用的编译器宏
2.1 子组件
<template>
<p>{{props.msg}}</p>
<button @click="handleClick">点击我调用父组件方法</button>
</template>
<script setup lang="ts">
const props = defineProps({
msg:{
type: String,
default: () => '默认值'
}
})
const emit = defineEmits(['on-change', 'update'])
const handleClick = () =>{
emit('on-change', '父组件方法被调用了')
}
</script>
2.2 父组件
<script setup lang="ts">
import TestPropsPmit from './components/test-props-emit/index.vue';
import { ref } from 'vue';
// 定义字符串变量
const msg = ref('欢迎使用vite！')
// 调用事件
const handleChange = (params:string) =>{
console.log(params);
}
</script>
<template>
<TestPropsPmit :msg="msg" @on-change="handleChange"></TestPropsPmit>
</template>
三、Vue Echarts 地图使用
- 引入echarts和相关地图文件(json或者geojson)，下载地址：json文件地址下载
<script lang="ts" setup>
import { ref, onMounted } from "vue";
// 按需引入 echarts
import * as echarts from "echarts";
// 引入地图文件
import chinaJson from '../assets/mapsJson/china.json'
const main = ref()
onMounted(
() => {
init()
}
)
function init() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(main.value);
// 注册可用的地图
echarts.registerMap('china', chinaJson);
// 指定图表的配置项和数据
var option = {
title: {
text: '中国地图'
},
series: [
{
type: 'map',
map: 'china',
// 显示标签样式
label: {
show: true,
fontSize: 10,
color: 'white',
},
// 图形样式
itemStyle: {
areaColor: 'blue',
borderColor: 'white',
borderWidth: '1',
},
zoom: 1.2,
// 添加数据，注意应与显示的标签名一致
data: [
{ name: '重庆市', value: 2005 },
{ name: '天津市', value: 1547 },
{ name: '上海市', value: 3168 },
{ name: '北京市', value: 6992 },
{ name: '四川省', value: 4200 },
{ name: '湖北省', value: 9500 },
],
}
],
visualMap: {
min: 1000,
max: 10000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
</script>
<template>
<div ref="main" style="width: 100%; height: 800px"></div>
</template>
<style scoped>
</style>
- 异步组件的数据加载
// mapShow.vue文件中
// 添加请求方法
import {getMapData} from '../utils/api'
// 获取数据
const mapData = await getMapData().then(res=>res.data.result);
function init() {
series: [
data:mapData,//这样就把数据传进来了
]
}
// 使用地图组件，加载异步组件
<suspense>
<template #default>
<Map />
</template>
<template #fallback>
<div>Loading...</div>// 加载未成功显示
</template>
</suspense>
