持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情
1. 按需导入 Echarts
1.1 为了方便和代码整体理解，做的例子什么的按需引入的也都写在里面了，注释很清楚，应该看的懂 1.2 后面地图需要使用的 json 数据太长就不贴代码啦，自己找资源吧 我放在src/base-ui/echarts/data/china.json 下啦
// src/base-ui/echarts/hook/echarts.js
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入饼图图表，图表后缀都为 Chart
import { PieChart } from 'echarts/charts';
// 引入折线图
import { LineChart } from 'echarts/charts';
// 引入地图相关
import { MapChart,ScatterChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
// Toolbox和Legend
ToolboxComponent,
LegendComponent,
// 地图相关
VisualMapComponent,
GeoComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LabelLayout,
UniversalTransition,
CanvasRenderer,
// 使用时导入的
ToolboxComponent,
LegendComponent,
LineChart,
// 饼图
PieChart,
// 地图
MapChart,
ScatterChart,
VisualMapComponent,
GeoComponent
]);
// 引入地图组件数据
import chinaMapData from '../data/china.json'
// 注册可用的地图，只在 geo 组件或者 map 图表类型中使用。
echarts.registerMap('china', chinaMapData)
// 导出一个默认的方法封装 初始化图表，设置配置项通过外界传入
export default function(el){
// 初始化图表，
const myChart = echarts.init(el)
// 设置配置项
const setOptions = ((options)=>{
myChart.setOption(options)
})
// 监听 resize
window.addEventListener('resize',()=>{
myChart.resize()
})
// 一个让外面调用的resize
const updateSize = () => {
myChart.resize()
}
return {myChart,setOptions,updateSize}
}
2. 封装基本的 echarts 图表
// src/base-ui/echarts/src/base-echarts.vue
<template>
<div class="my-echart">
<div ref="myEchartRef" :style="{ width: width, height: height }"></div>
</div>
</template>
<script setup>
import { ref, onMounted, watchEffect } from 'vue'
import useEchart from '../hook/echarts'
// props
const props = defineProps({
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '200px'
},
echartOptions: {
type: Object,
default: () => ({})
}
})
// echarts 容器实例
const myEchartRef = ref()
// 在 onMounted 组件实例挂载后初始化图表
onMounted(() => {
const { setOptions } = useEchart(myEchartRef.value)
// 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。
watchEffect(() => {
setOptions(props.echartOptions)
})
})
</script>
<style lang="scss" scoped></style>
3. 封装 一个 PieChart组件，饼图
一定要在echarts.js里面引入需要的组件
我的数据是写死的，你获取数据的话，可以在使用时传入一个props，获取需要的数据
// src/components/echarts/pieEchart/PieEchart.vue
<template>
<div>
<MyEchart :echart-options="options" />
</div>
</template>
<script setup>
import { computed } from 'vue'
const options = computed(() => {
return {
title: {
text: ''
// subtext: 'Fake Data'
// left: 'center'
},
tooltip: {
trigger: 'item'
},
// 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
legend: {
orient: 'horizontal', // 改变排列方向
left: 'left'
},
// 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
toolbox: {
feature: {
saveAsImage: {},
restore: {}
}
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
})
</script>
点击 完整代码 =》 按需引入 这里可以找到按需引入需要的组件
4. 地图组件
// src/components/echarts/map-echart/MapEchart.vue
<template>
<div>
<MyEchart :echartOptions="options" />
</div>
</template>
<script setup>
import { convertData } from './utils/convert-data'
import { computed } from 'vue'
const options = computed(() => {
return {
backgroundColor: '#ccc',
title: {
text: '全国销量统计',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ' : ' + params.value[2]
}
},
visualMap: {
min: 0,
max: 60000,
left: 20,
bottom: 20,
calculable: true,
text: ['高', '低'],
inRange: {
color: ['rgb(70, 240, 252)', 'rgb(250, 220, 46)', 'rgb(245, 38, 186)']
},
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
roam: 'scale',
emphasis: {
areaColor: '#f4cccc',
borderColor: 'rgb(9, 54, 95)',
itemStyle: {
areaColor: '#f4cccc'
}
}
},
series: [
{
name: '销量',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData([
{ name: '昆山', value: 900000 },
{ name: '张家口', value: 11100 },
{ name: '厦门', value: 100 },
{ name: '曲靖', value: 30000 }
]),
symbolSize: 12,
emphasis: {
itemStyle: {
borderColor: '#fff',
borderWidth: 1
}
}
},
{
type: 'map',
map: 'china',
geoIndex: 0,
aspectScale: 0.75,
tooltip: {
show: false
}
}
]
}
})
</script>
**4.1 convertData 方法，对数据进行转换
// src/components/echarts/map-echart/utils/convert-data.ts
import { coordinateData } from './coordinate-data'
export const convertData = function (data: any) {
const res = []
for (let i = 0; i < data.length; i++) {
const geoCoord = coordinateData[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
})
}
}
return res
}
**4.2 convertData 方法，依赖的数据
// src/components/echarts/map-echart/utils/coordinate-data.ts
export const coordinateData: any = {
海门: [121.15, 31.89],
鄂尔多斯: [109.781327, 39.608266],
自贡: [104.778442, 29.33903],
吉林: [126.57, 43.87],
}
5. 使用
<template>
<div class="dashboard">
<el-row :gutter="30">
<el-col :span="12">
<el-card> <LineChart /> </el-card>
</el-col>
<el-col :span="12">
<el-card> <PieChart /> </el-card>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="16">
<el-card>
<MapChart />
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup>
import PieChart from '@/components/echart/pie-echart/pieEchart'
import LineChart from '@/components/echart/line-echart/lineEchart.vue'
import MapChart from '@/components/echart/map-echart/mapEchart.vue'
</script>
<style scoped></style>
