echart-hill.vue 2.36 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
<script setup>
import symbols from "./svg"
const state=reactive({
  chartData:{
    xAxis: ['軟件', '硬件', '服務', '安全', '廣告', '專利', '許可', '投資'],
    colors:[$c.aql4,$c.cbl4,$c.aql3,],
    data: [23, 40, 15, 12, 9, 7, 12, 5],
    symbolSize:[
        [20, 20],
        [18, 20],
        [18, 20],
        [18, 20],
        [20, 14],
        [16, 20],
        [20, 20],
        [20, 20],
    ]
  },
  chartOption:{ }
})

const processData=()=>{
  let {colors,xAxis,data,symbolSize}=state.chartData,
      processedData=[],subData=[]
  
  data.forEach((item,i)=>{
    subData.push({
        value: data[i],
        symbol: symbols['svg'+i],
        symbolSize:symbolSize[i]
      })
  })
  processedData.push({
    name: 'hill',
    type: 'pictorialBar',
    barCategoryGap: '-130%',
    // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
    symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
    itemStyle: {
      opacity: 0.5
    },
    emphasis: {
      itemStyle: {
        opacity: 1
      }
    },
    data: data,
    z: 10
  },
  {
    name: 'glyph',
    type: 'pictorialBar',
    barGap: '-100%',
    symbolPosition: 'end',
    symbolSize: 50,
    symbolOffset: [0, '-120%'],
    data: subData
  })
  state.chartOption.series=processedData;
  state.chartOption.xAxis.data=xAxis;
}

const processOption=()=>{
  const {colors}=state.chartData
  state.chartOption={
    update:false,
    title:{ text:"单位:万元", right:0, top:0, textStyle:{ fontSize:16, fontWeight:"normal" }, },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none'
      },
      formatter: function (params) {
        return params[0].name + ': ' + params[0].value;
      }
    },
    grid: {
      left: '5%',
      right: '8%',
      bottom: '8%',
      top: "25%",
      containLabel: true
    },
    yAxis: {
      type: 'value',
      splitNumber: 3,
      axisLabel: {
        show:false
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: [],
      axisTick: { show: false },
      axisLine: { show:false, },
      splitLine: { show:false, },
      axisLabel: {
        align: 'center'
      }
    },
    color:colors,
    series: []
  }
  processData()
}

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