基于echarts对雷达图的封装
核心库
- echarts
- lodash
- ResizeListener
代码
<!--
* @Author: your name
* @Date: 2020-11-04 10:39:39
* @LastEditTime: 2020-11-19 11:44:45
-->
<template>
<div class="charts" ref="charts"></div>
</template>
<script>
import echarts from 'echarts';
import { merge } from 'lodash';
import ResizeListener from 'element-resize-detector';
export default {
name: 'ChartBar',
props: {
extraOption: { // 其他配置项
type: Object,
default: () => ({})
}
},
watch: {
extraOption: {
immediate: true,
deep: true,
handler () {
this.updateChartView();
}
},
},
data () {
return {
myChart: null, // 图表对象
option: { // 配置项
avoidLabelOverlap: true,
legend: {
itemHeight: 14,
itemWidth: 14,
icon: "circle",
orient: 'vertical',
zlevel: 999,
z: 999,
left: '73%',
top: '24%',
data: [],
formatter: (name) => {
const arr = [
'{aa|' + name + '}'
]
return arr.join('')
},
textStyle: {
rich: {
aa: {
fontSize: 14,
color: '#666666',
fontWeight: 'normal',
padding: [-2, 0, 0, 5],
lineHeight: 18
},
}
},
selectedMode: true, // 图例是否可点击
},
color: ['#2966b6', '#7460EE'], // 绘制区域的线条颜色
tooltip: {
confine: true, // 将图表限制在区域内
enterable: true, //鼠标是否可以移动到tooltip区域内
},
radar: {
center: ["50%", "50%"],
radius: "70%",
nameGap: 8, // 图中工艺等字距离图的距离
name: {
textStyle: {
color: '#666666',
fontSize: 14,
}
},
indicator: [], // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
axisLine: { // 指向外圈文本的分隔线样式, 坐标轴轴线
show: true,
lineStyle: {
color: '#c6d4e1'
}
},
splitLine: { // 坐标轴在 grid 区域中的分隔线。
lineStyle: {
color: '#c6d4e1',
// width: 2,
// type: 'dotted'
}
},
splitArea: { // 坐标轴在 grid 区域中的分隔区域
show: false,
areaStyle: {
color: '#fff'
}
}
},
grid: {
top: '18%',
left: '3%',
right: '4%',
bottom: '6%',
containLabel: true
},
series: []
},
}
},
methods: {
updateChartView () { // 更新视图
if (!this.myChart) return;
const fullOption = this.mergeDataToOption();
this.myChart.setOption(fullOption, true);
},
mergeDataToOption () { // 合并并将数据加入到配置项
return merge(
{},
this.option,
this.extraOption
)
},
addChartResizeListener () { // 监听元素变化
// 创建实例带参
const instance = ResizeListener({
strategy: 'scroll',
callOnAdd: true
});
// 监听元素大小的变化
instance.listenTo(this.$refs.charts, () => {
if (!this.myChart) return;
this.myChart.resize();
});
}
},
mounted () {
if (!this.myChart) {
// 初始化图表
this.myChart = echarts.init(this.$refs.charts);
// 绘制图表
this.updateChartView();
// 监听元素大小变化
this.addChartResizeListener();
}
},
}
</script>
<style lang="less" scoped>
.charts {
width: 100%;
height: 100%;
}
</style>
使用
同之前链接
效果图
