• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue使用echart自定义标签以及颜色

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了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}]};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
js实现简单抽奖小功能发布时间:2022-02-05
下一篇:
Vue保持用户登录状态(各种token存储方式)发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap