前言
ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。其使用方式颇为简单。
一、饼图
（1）【/src/views/Example/PieEchart.vue】
<template>
<div style="padding: 100px; ">
<div style="display: flex; flex: 1; width: 400px; height: 400px;">
<div id="ScUcTcCoverageChart" style="width: auto; height: auto; flex: 1; border: 1px solid #dcdfe6;"></div>
</div>
</div>
</template>
<script setup>
import {
h, onMounted, onUnmounted, getCurrentInstance, reactive } from 'vue'
import * as echarts from 'echarts'
/**
* 英雄熟练度
*/
const heroProficiency = reactive({
list: [],
})
/**
* 查询【英雄熟练度】数据
*/
const queryHeroProficiency = async () => {
const res = {
success: true,
msg: '请求成功',
data: [
{
name: '赵怀真', value: 51, victoryRate: '72%' },
{
name: '云缨', value: 25, victoryRate: '68%' },
{
name: '庄周', value: 10, victoryRate: '85%' },
{
name: '后羿', value: 15, victoryRate: '51%' },
]
}
if (res.success) {
heroProficiency.list = res.data
} else {
proxy.$message({
message: res.msg, type: 'error', duration: 3000 })
}
handleInitHeroProficiencyChart()
}
/**
* 实例化【英雄熟练度】饼图
* 详情见：https://echarts.apache.org/examples/zh/index.html#chart-type-bar
*/
const handleInitHeroProficiencyChart = async () => {
const chartDom = await document.getElementById('ScUcTcCoverageChart')
// 销毁
echarts.dispose(chartDom)
// 实例化
const myChart = echarts.init(chartDom)
const option = {
title: {
text: '英雄熟练度',
left: 'center',
top: 5, // 修改标题高度
textStyle: {
color: '#999',
fontWeight: 'normal',
fontSize: 13
}
},
tooltip: {
trigger: 'item', // 可选值为'item'和'axis'，默认为'item'，表示鼠标悬浮在数据项上时触发tooltip，'axis'表示鼠标悬浮在坐标轴上时触发tooltip
show: true, // 控制鼠标悬浮是否显示数据
textStyle: {
fontSize: 12,
fontWeight: 'normal'
}
},
legend: {
orient: 'vertical', // 可选值为'horizontal'（水平布局）和'vertical'（垂直布局）
top: 30, // 调整位置
left: '0%', // 距离右侧位置
icon: 'circle', // 修改小图标为圆形
itemHeight: 12, // 修改圆形小图标的大小
textStyle: {
fontSize: 12, // 可控制每个legend项的间距
color: "#828282",
rich: {
tag_one: {
width: 60,
color: '#000',
fontSize: 12,
},
tag_two: {
width: 40,
color: '#333',
fontSize: 12,
},
tag_three: {
color: '#686868',
fontSize: 12,
},
},
},
formatter: (name) => {
let target
for (let i = 0; i < heroProficiency.list.length; i++) {
if (heroProficiency.list[i].name == name) {
target = heroProficiency.list[i]
}
}
return `{tag_one|${
target.name}} {tag_two|${
target.value}个} {tag_three|${
target.victoryRate}}`
},
},
color: ['#5470c6', '#91cc75', '#73c0de'], // 控制圆环图的颜色
series: [
{
type: 'pie',
radius: ['15%', '25%'], // 圆环分为内径和外径，就是两个半径不一样的饼图可组成一个圆环图，radius数组中的两项分别为内径和外径（相对画布的百分比），或者直接一个圆'30%'
center: ['50%', '55%'], // 调整圆环图位置
labelLine: {
length: 20, // 牵引线高度
},
label: {
alignTo: 'edge',
formatter: (item) => {
const str = `{a|${
item.data.name}}\n{hr|}\n {b|${
item.data.value}场} 丨 {per|${
item.data.victoryRate}} `
return str
},
minMargin: 20, // 最小外边距
edgeDistance: 10, // 贴边距离
backgroundColor: '#fff',
borderColor: '#dcdfe6',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
padding: [5, 20],
color: '#000',
align: 'center'
},
hr: {
width: '100%',
height: 1,
backgroundColor: '#dcdfe6',
},
b: {
color: '#000',
fontSize: 12,
lineHeight: 25,
align: 'center'
},
per: {
color: '#fff',
backgroundColor: '#4C5058',
padding: [4, 4, 3, 4],
borderRadius: 4,
lineHeight: 25,
align: 'center'
}
}
},
data: heroProficiency.list,
avoidLabelOverlap: true, // 防止牵引线堆叠挤在一块
itemStyle: {
emphasis: {
opacity: 0.9
}
}
}
]
}
// 点击事件
myChart.on('click', function (params) {
console.log(params);
})
option && myChart.setOption(option)
}
onMounted(() => {
queryHeroProficiency()
})
onUnmounted(() => {
// ...
})
</script>
<style lang="less" scoped>
</style>
（2）运行效果
