最近做可视化比较多，就常用的图表类型做了一下总结。
因为做可视化的图表代码量非常大，所以会把echarts图表单独抽离出来，封装成一个组件，也可以复用，所以这里我直接把封装的组件直接放在这里，是可以直接拿来用的，根据所需稍作修改即可。
这里都是用的vue3，其实和vue2差不多，各式各样的花里胡哨的图表无非就是option配置不同，如果使用的是vue2，在写法上稍作修改即可。
上篇博客有写 echarts 图表组件封装模板，vue2、vue3都有可以参考echarts图表组件封装模板
示例1
<template>
<div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { fontChart } from '@/utils/echartPxToRem'
import * as echarts from "echarts";
import { onMounted, watch, onUnmounted } from "vue";
const props = defineProps({
id: {
type: String,
required: true,
},
nameArray: {
type: Array,
default: () => ([
{
name: "轻度脂肪堆积",
max: 1000,
},
{
name: "健康",
max: 1000,
},
{
name: "严重脂肪堆积",
max: 1000,
},
{
name: "偏瘦",
max: 1000,
}
])
},
radarData: {
type: Array,
default: () => [182, 321.2, 222.1, 425.3]
}
});
watch(
() => props.yValue,
(newValue) => {
drawBar()
},
{
deep: true
}
)
let charts = ""; // 这里不要让它成为响应式
onMounted(() => {
drawBar();
});
onUnmounted(() => {
window.removeEventListener('resize', selfAdaption)
})
// 初始化echarts
const drawBar = () => {
charts = echarts.init(document.getElementById(props.id));
let option = {
radar: {
center: ["50%", "50%"],
radius: "75%",
name: {
formatter: function (name, indicator) {
let arr;
arr = ["{a|" + name + "}"];
return arr.join("\n");
},
textStyle: {
rich: {
//根据文字的组设置格式
a: {
color: "#fff",
fontSize: fontChart(14),
// fontWeight: 600,
fontFamily: "Source Han Sans CN",
},
// b:{
// fontSize:14,
// verticalAlign:'top',
// width:57,
// color:'blue',
// fontWeight:600,
// align:'center'
// },
},
},
},
nameGap: 0,
indicator: props.nameArray,
splitLine: {
show: false,
},
splitArea: {
show: false,
},
axisLine: {
show: false,
},
},
series: [
{
// name: '家庭融合包',
type: "radar",
data: [props.radarData],
// value:14,
label: {
show: true,
formatter: function (params) {
// console.log(params);
return (( params.value / 800 ) * 100).toFixed(2)+ "%";
},
color: "#fdd55f",
// position:[-20,-10,-10,-10],
align: "center",
distance: 0,
fontSize: fontChart(12),
align: "center",
},
symbolSize: [6, 6],
lineStyle: {
//边缘颜色
width: 0,
},
itemStyle: {
borderWidth: fontChart(1),
color: "#fff",
borderColor: "#F2F063",
},
areaStyle: {
color: "#04d3de",
opacity: 0.9,
},
},
{
type: "radar",
data: [[1000, 1000, 1000, 1000, 1000, 1000]],
symbol: "none",
lineStyle: {
width: 0.1,
color: '#04d8e3',
type: 'dashed'
},
itemStyle: {
color: "#04d8e3",
},
areaStyle: {
color: "#04d8e3",
opacity: 0.06,
},
},
{
type: "radar",
data: [[900, 900, 900, 900, 900, 900]],
symbol: "none",
lineStyle: {
width: 0.1,
color: '#04d8e3',
type: 'dashed'
},
itemStyle: {
color: "#04d8e3",
},
areaStyle: {
color: "#04d8e3",
opacity: 0.06,
},
},
{
type: "radar",
data: [[800, 800, 800, 800, 800, 800]],
symbol: "none",
lineStyle: {
width: 0,
},
itemStyle: {
color: "#04d8e3",
},
areaStyle: {
color: "#04d8e3",
opacity: 0.10,
},
},
{
type: "radar",
data: [[700, 700, 700, 700, 700, 700]],
symbol: "none",
lineStyle: {
width: 0,
},
itemStyle: {
color: "#04d8e3",
},
areaStyle: {
color: "#04d8e3",
opacity: 0.10,
},
},
{
type: "radar",
data: [[600, 600, 600, 600, 600, 600]],
symbol: "none",
lineStyle: {
width: 0,
},
itemStyle: {
color: "#04d8e3",
},
areaStyle: {
color: "#04d8e3",
opacity: 0.17,
},
},
{
type: "radar",
data: [[500, 500, 500, 500, 500, 500]],
symbol: "none",
lineStyle: {
width: 0,
},
itemStyle: {
color: "#04d8e3",
},
areaStyle: {
color: "#04d8e3",
opacity: 0.17,
},
},
{
type: "radar",
data: [[400, 400, 400, 400, 400, 400]],
symbol: "none",
lineStyle: {
width: 0,
},
itemStyle: {
color: "#04d8e3",
},
areaStyle: {
color: "#04d8e3",
opacity: 0.13,
},
},
],
};
charts.setOption(option)
window.addEventListener('resize', selfAdaption)
};
// 自适应
function selfAdaption() {
if(!charts) return
charts.resize()
drawBar()
}
</script>
示例2
<template>
<div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { fontChart } from '@/utils/echartPxToRem'
import * as echarts from "echarts";
import { onMounted, watch, onUnmounted } from "vue";
const props = defineProps({
id: {
type: String,
required: true,
},
nameArray: {
type: Array,
default: () => ([
{
name: "轻度脂肪堆积",
max: 1000,
},
{
name: "健康",
max: 1000,
},
{
name: "严重脂肪堆积",
max: 1000,
},
{
name: "偏瘦",
max: 1000,
}
])
},
radarData1: {
type: Array,
default: () => [582, 421.2, 422.1, 325.3]
},
radarData2: {
type: Array,
default: () => [142, 281.2, 182.1, 385.3]
}
});
watch(
() => props.yValue,
(newValue) => {
drawBar()
},
{
deep: true
}
)
let charts = ""; // 这里不要让它成为响应式
onMounted(() => {
drawBar();
});
onUnmounted(() => {
window.removeEventListener('resize', selfAdaption)
})
// 初始化echarts
const drawBar = () => {
charts = echarts.init(document.getElementById(props.id));
let option = {
color: ['#fa0145', '#02f8f9'],
tooltip: {
show: true
},
grid: {
// top: '25%',
// bottom: '17%',
left: '7%',
right: '7%'
},
radar: {
nameGap: fontChart(7),
axisLine: {
lineStyle: {
color: '#0781c0',
type: 'dashed'
}
},
name: {
color: '#fff',
fontSize:fontChart(11)
},
splitLine: {
lineStyle: {
color: '#0781c0',
type: 'dashed'
}
},
splitArea: {
show: false,
areaStyle: {
color: 'rgba(255,0,0,0)', // 图表背景的颜色
},
},
indicator: props.nameArray
},
series: [{
type: 'radar',
data: [
{
value: props.radarData1,
name: '风险统计',
areaStyle: {
color: '#fa0145',
opacity: fontChart(0.1),
},
// lineStyle: { // 线的颜色
// width: 1,
// color: 'yellow',
// type: 'dashed'
// },
itemStyle: { // 折线拐点标志的样式。
normal: { // 普通状态时的样式
lineStyle: {
width: fontChart(1)
},
opacity: fontChart(0.2)
},
emphasis: { // 高亮时的样式
lineStyle: {
width: fontChart(5)
},
opacity: fontChart(1)
}
},
},
{
value: props.radarData2,
name: '年度',
areaStyle: {
color: '#02f8f9',
opacity: fontChart(0.1),
},
// lineStyle: { // 线的颜色
// width: 1,
// color: 'yellow',
// type: 'dashed'
// },
itemStyle: { // 折线拐点标志的样式。
normal: { // 普通状态时的样式
lineStyle: {
width: fontChart(1)
},
opacity: fontChart(0.2)
},
emphasis: { // 高亮时的样式
lineStyle: {
width: fontChart(5)
},
opacity: fontChart(1)
}
},
}
]
}]
};
charts.setOption(option)
window.addEventListener('resize', selfAdaption)
};
// 自适应
function selfAdaption() {
if(!charts) return
charts.resize()
drawBar()
}
</script>
