vue使用echart自定義標簽以及顏色

更新時間：2021年09月18日 16:36:57 作者：_小鄭有點困了

這篇文章主要為大家詳細介紹了vue使用echart自定義標簽以及顏色，應用于echart 5.0以上版本，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue使用echart自定義標簽以及顏色的具體代碼，供大家參考，具體內(nèi)容如下

常規(guī)樣式

UI畫的樣式效果

細節(jié)在于這個小圓點的顏色要和餅圖塊的顏色一致，這在5.0（echarts版本）之前的版本是可以使用這一段代碼實現(xiàn)的。

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，那這個顏色就不起效了。就需要找個方案實現(xiàn)他，最后是這樣實現(xiàn)的。在數(shù)據(jù)賦值的時候給每個label標簽的顏色進行重新賦值，去餅圖色塊的值進行賦值。
這里面兩份數(shù)據(jù)，是因為在里面疊加了餅圖內(nèi)部的百分比，就是籃框圈住的東西

配置項：

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}]};

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: