echart-sunburst.vue 3.13 KB
Newer Older
wuhao's avatar
wuhao committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145
<script setup>
const { proxy } = getCtx();
const state=reactive({
  fontColor:$c.wh,
  subFontColor:$c.cbl3,
  chartData:{
    title:"業務利潤佔比",
    colors:[$c.aql7, $c.cyl5],
    data:[
      {
        name: '軟件',
        children: [
          {
            name: '產品',value:123,
            children: [
              { name: 'GIS系統', value: 49 },
              { name: '可視化', value: 25},
              { name: '財務系統', value: 11 }
            ]
          },
          {
            name: '定制',value:90,
            children: [ 
              { name: '業務系統', value: 35 }, 
              { name: '門戶', value:15 } 
            ]
          }
        ]
      },
      {
        name: '硬件', children: [
          {
            name: '服務器',value:230, children: [ 
              { name: '入門級', value: 43 }, 
              { name: '企業級', value: 121 } 
            ]
          },
          {
            name: '網管設備',value:55, children: [ 
              { name: '安全網關', value: 23 }, 
              { name: '路由器', value: 12 } 
            ]
          }
        ]
      }
    ],
    dataMax:300
  },
  chartOption:{},
  dataOri:[]
})

const {dataOri,fontColor,subFontColor}=toRefs(state)

const mapLinkAction=(data,time)=>{
  const {chartData}=state
  data.forEach((item,i)=>{
    if(time==1&&item.value){
      let rmdval=i*proxy.randomNumber(time*10,100)
      item.value=rmdval
      chartData.dataMax+=rmdval
    }else if(item.value){
      delete item.value
    }
    if(item.children&&item.children.length>0){
      const num=time-1
      mapLinkAction(item.children,num)
    }
  })
}

const processData=()=>{
  const {colors,data}=state.chartData;
  let processedData=[],
      type="bar",
      yAxisIndex=0;
  processedData.push({
    type: 'sunburst',
    data: data,
    radius: [20, '80%'],
    center:['53%','50%'],
    itemStyle: {
      borderRadius: 7,
      borderWidth: 2,
      borderColor:$c.bll9,
    },
    label: {
      show: true,
      color:fontColor,
      fontSize: 12,
      rotate: 'tangential'//文字旋转
      // formatter: function (param) {
      //   return param.name+'\n'+param.value
      // }
    },
    emphasis: {
      label:{
        show: true,
        fontSize: '16',
        color:$c.wh,
        formatter: function (param) {
          return param.name+'\n'+param.value
        }
      }
    },
    levels: [{},]
  })
  state.chartOption.series=processedData;
}

const processOption=()=>{
  const {dataMax,colors}=state.chartData
  state.chartOption={
    update:false,
    title:{ 
      text:"數據單位:萬元 點擊數據可下鑽",subtext:"", right:20, bottom:0, 
      textStyle:{ color:subFontColor, fontSize:12, fontWeight:"normal" }, 
    },
    visualMap: {
      type: 'continuous',
      left:10,
      bottom:40,
      min: 0,
      max: dataMax,
      inRange: {
        color: colors
      },
      textStyle:{
        color:fontColor,
      },
    },
    series: []
  }
  processData();
}

onMounted(() => {
  processOption();
})
</script>
<template>
  <echartsInit :chartOption="state.chartOption"></echartsInit>
</template>
<style lang="less">
</style>