vue3+echarts实现渐变色环形图过程
作者：不吃辣椒不行
这篇文章主要介绍了vue3+echarts实现渐变色环形图过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3 echarts实现渐变色环形图
实现的效果大致是这样
由于是公司的项目，指引线后标注的内容不展示了，大致是指引线上方是name，下边是value+单位
1.定义图表容器
<div class="chart" ref="chartRef" style="width: 610px; height: 260px;"></div>
2.我这边所需要的数据形式大概是
const data = {
equmentStatusEchart: [
{name: '标题1', value: 10}
{name: '标题2', value: 10}
]
}通过接口拿到的数据类型一般是：[{} ,{}]这种类型的，写一个方法将其转变为我所需要的形式
const convertArrayToObject = (array) => {
const convertedObject = {
equmentStatusEchart: array.map(item => ({
name: item.name,
value: item.value
}))
};
return convertedObject;
};具体的代码如下：
将接口转换成自己的就好了，我这个是随机生成的颜色渐变，如果有需求可以固定一个颜色数组
import * as echarts from 'echarts';
import { ref, onMounted, nextTick } from 'vue';
import { getPersonnel } from '@/api'
const chartRef = ref(null)
//重点人员
const rangArr = ref([]);
const distribution = ref([])
const distributionList = ref([])
const deflag = ref(1)
const angleArr = ref({})
const data = ref([])
//转换成所需对象数组
const convertArrayToObject = (array) => {
const convertedObject = {
equmentStatusEchart: array.map(item => ({
name: item.communityName,
value: item.countSum,
communityId: item.communityId
}))
};
return convertedObject;
};
function getCoordinates(startArc, endArc) {
const posi = [
Math.sin(startArc),
-Math.cos(startArc),
Math.sin(endArc),
-Math.cos(endArc)
];
const dx = posi[2] - posi[0];
const dy = posi[3] - posi[1];
return getLocation(dx, dy);
}
function getLocation(dx, dy) {
const tanV = dx / dy;
const directSign = Math.abs(tanV) < 1;
const t = directSign ? tanV : 1 / tanV;
const sign1 = t > 0 ? 1 : -1;
const sign2 = dx > 0 ? 1 : -1;
const sign = directSign ? sign1 * sign2 : sign2;
const group1 = [0.5 - sign * t / 2, 0.5 + sign * t / 2];
const group2 = sign > 0 ? [0, 1] : [1, 0];
const group = [...group1, ...group2];
const keys = directSign ? ['x', 'x2', 'y', 'y2'] : ['y', 'y2', 'x', 'x2'];
let res = {};
keys.forEach((k, idx) => {
res[k] = group[idx];
});
return res;
}
const getPersonnelList = async() => {
distribution.value = await getPersonnel(deflag.value)
distributionList.value = distribution.value.data
const obj = convertArrayToObject(distributionList.value)
console.log(obj)
const totalValue = ref(obj.equmentStatusEchart.reduce((total, value) => total + value.value, 0));
let cacheNum = 0;
for (let i = 0; i < obj.equmentStatusEchart.length; i++) {
const endNum = cacheNum + obj.equmentStatusEchart[i].value;
rangArr.value.push([cacheNum, endNum]);
cacheNum = endNum;
}
const angleArr = ref(rangArr.value.map(arr => arr.map(num => (num / totalValue.value) * Math.PI * 2)));
data.value = obj.equmentStatusEchart.map((item, index) => {
const range = getCoordinates(angleArr.value[index][0], angleArr.value[index][1]);
const startColor = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
const color = {
type: 'linear',
x: range.x,
x2: range.x2,
y: range.y,
y2: range.y2,
colorStops: [{
offset: 0, color: startColor // 起始颜色
}, {
offset: 1, color: `${startColor.substring(0, startColor.length - 1)}, 0)` // 终点颜色
}],
global: false
};
return {
name: item.name,
value: item.value,
itemStyle: {
color: color
}
};
})
}
const getChart = async() => {
await getPersonnelList()
const option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0, 0 , 0, .6)',
borderColor: "rgba(147, 235, 248, .8)",
textStyle: {
color: "#fff"
},
},
series: [
{
type: 'pie',
radius: ['65%', '75%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
},
label: {
show: true,
position: 'outer',
align: 'left',
height: 50,
lineHeight: 10,
formatter: function(params) {
return (
'{a|' + params.data.name + '}\n' +
'{b|' + params.data.value + ' } ' +
'{value| 人}'
);
},
borderWidth: 10,
padding: [0, -60],
rich: {
a: {
fontSize: 14,
color: '#fff',
fontWeight: 400,
lineHeight: 35
},
b: {
color: '#fff',
fontSize: 18,
fontWeight: 600,
lineHeight: 10
},
value: {
color: '#fff',
fontSize: 14,
fontWeight: 400,
}
}
},
labelLine: {
show: true,
length: 20,
length2: 160,
smooth: 0,
lineStyle: {
color: 'white'
}
},
emphasis: {
itemStyle:{
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.2)'
}
},
data: data.value
},
],
};
nextTick(() => {
const chartDom = chartRef.value;
const myChart = echarts.init(chartDom);
myChart.setOption(option)
})
}
onMounted(() => {
getChart()
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。