vue使用echart自定义标签以及颜色
更新时间：2021年09月18日 16:36:57 作者：_小郑有点困了
这篇文章主要为大家详细介绍了vue使用echart自定义标签以及颜色，应用于echart 5.0以上版本，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue使用echart自定义标签以及颜色的具体代码，供大家参考，具体内容如下
常规样式
UI画的样式效果
细节在于这个小圆点的颜色要和饼图块的颜色一致，这在5.0（echarts版本）之前的版本是可以使用这一段代码实现的。
label:{
formatter: params => {//●
return (
'{icon|▅}{name|' +params.name+ '}{value|' +
params.value + '}'
);
},
rich: {
icon: {
fontSize: 16
},
name: {
fontSize: 16,
padding: [0, 10, 0, 4],
},
value: {
fontSize: 16,
}
},
}
但是由我的项目里面有需要用到5.0才支持的一些特效，不得已升级到5.0，那这个颜色就不起效了。就需要找个方案实现他，最后是这样实现的。在数据赋值的时候给每个label标签的颜色进行重新赋值，去饼图色块的值进行赋值。
这里面两份数据，是因为在里面叠加了饼图内部的百分比，就是篮框圈住的东西
配置项：
series: [
{
type: 'pie',
radius: [0, '75%'],
center: ['50%', '50%'],
top:0,
// roseType: 'radius',
avoidLabelOverlap: true,
// minShowLabelAngle:0.6,
startAngle: 0,
label: {
show:true,
position: 'outer',
alignTo: 'edge',
//另一种方案的点
normal: {
formatter: params => {
// formatColor(params.color)
// color = params.color
return (
'{icon|● }{name|' + params.name + '}'+'\n'+'{value|' +
params.value+'次' + '}'
);
},
padding:[0,-40,25,-40],
rich: {
icon: {
fontSize: 15,
},
name: {
fontSize: 13,
color: '#666666'
},
value: {
fontSize: 12,
color: 'rgba(0,0,0,0.35)'
}
}
}
},
labelLine:{
length:10,
length2:70,
smooth: false,
lineStyle:{
color:"rgba(0,0,0,0.15)"
}
},
data: []
},
{
name: '',
type: 'pie',
radius: [0, '75%'],
center: ['50%', '50%'],
data:[],
top:0,
// roseType: 'radius',
avoidLabelOverlap: true,
startAngle: 0,
itemStyle: {
normal: {
label: {
show: true,
position: 'inner',
color:"#fff",
fontSize: 14,
align:"center",
formatter: function (p) { //指示线对应文字,百分比
return p.percent + "%";
}
},
}
}
}
]
重新赋值：
//拿到色卡 重新赋值
let colorArr = pieOption.color
let seriesData = JSON.parse(JSON.stringify(this.orderServiceTimeLenData.output.value.rows))||[]
let seriesData1 = JSON.parse(JSON.stringify(this.orderServiceTimeLenData.output.value.rows))||[]
if(seriesData.length){
seriesData.forEach((item,index)=>{
item.name = item.typeStr
item.value = item.num
item.label = {color:colorArr[index]}
})
seriesData1.forEach((item,index)=>{
item.name = item.typeStr
item.value = item.num
})
}
return {legend: {data: seriesData}, series: [{data: seriesData},{data: seriesData1}]};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
kiss-vuex 是一个非常简单的语法糖类库，这篇文章主要介绍了傻瓜式vuex语法糖kiss-vuex整理，非常具有实用价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
这篇文章主要介绍了基于vue-video-player自定义播放器的方法，主要是基于video.js开发的vue-video-player的使用，以及如何操作video.js中的api。需要的朋友可以参考下2018-03-03
最近项目中让实现一个导入导出Excel的功能,下面这篇文章主要给大家介绍了关于前端利用vue实现导入和导出功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
Vue.js是现在比较优秀的Web前端框架,非常推荐大家入门学习,这篇文章主要给大家介绍了关于如何一步步从零搭建一个Vue项目的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了vue3.0如何使用computed来获取vuex里数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue缓存的keepalive页面刷新数据的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要介绍了vue element后台鉴权流程分析,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要介绍了vue2.0实现分页组件的实例代码,需要的朋友可以参考下2017-06-06
vue3.0 beta 版本已经发布有一段时间了，今天这篇文章就带大家体验一下，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要为大家详细介绍了vue.js指令v-model实现方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论