vue3 + echarts 饼图 和 lengd 左右布局

echarts 饼图 和 lengd 左右布局

<template>
  
      <div id="zjysEcharts" style="width: 100%; height: 100%;"></div>
   
</template>

<script setup lang="ts">
import {$message} from "@mars/components/mars-ui"
import {nextTick, onMounted, onUnmounted, ref} from "vue"
import {events} from "@mars/pages/zhts/main"
import {getCapitalInvestment} from "@mars/common/api/jsyApi/jsyFarm";
import {allEvents} from "@mars/main";
import * as echarts from "echarts"

let myChart: any

const dataList = ref([])
const totalList = ref([])

onMounted(() => {
  allEvents.on("onFarmChanged", (farmInfo:any) => {
    getDataList({farmArea:farmInfo.acreage})
  })
})

onUnmounted(() => {
  // 销毁操作
  allEvents.off("onFarmChanged",)
})

const getDataList = async function (params) {
  const {code,data,message} = await getCapitalInvestment(params);
  if(code ==200){
    dataList.value = data
    totalList.value = data.total
    getEcharts(data)
  }else {
    $message(message);
  }
}

// echarts
const getEcharts = (data) => {
  // 基于准备好的dom，初始化echarts实例
  myChart = echarts.init(document.getElementById("zjysEcharts"), "dark")

  // 指定图表的配置项和数据
  const option = getOption(data)

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

function getOption(data) {
  let legendData = data.data.legend
  let seriesData = data.data.data

  const option = {
    color: ['#E4C73F', '#00D798', '#BED742'],
    tooltip: {
      trigger: "item",
      axisPointer: {            // Use axis to trigger tooltip
        type: "shadow"        // 'shadow' as default; can also be 'line' or 'shadow'
      },
      extraCssText: 'background-color:rgba(0,0,0,0.5);',  //提示框
      formatter: function (params) {
        var res
        res = `<div style="color: #ffffff"><span>${params.data.name}:</span>  ${params.data.value}  亩</div>`
        return res
      }
    },
    grid: {
      top: '3%',
      left: '3%',
      bottom: '4%',
      containLabel: true
    },
    legend: {
      data:legendData,
      orient: 'vertical',
      left:'50%',
      align:'left',
      top:'middle',
      textStyle: {
        color: "#FFFFFF",
        fontSize: 14,
      },
      height:200
    },
    series: [
      {
        type: 'pie',
        radius: ['35%', '70%'], // 控制环的宽度
        center: ['25%', '60%'], // 设置饼图的位置x, y
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        // itemStyle: {
        //   shadowBlur: 40,
        //   shadowOffsetX: 22,
        //   shadowOffsetY: 22,
        // },
        data: seriesData
      }
    ]
  };
  return option
}


</script>