极致呈现系列之：Echarts饼图的千变万化

创建一个最简单的饼图

这个没什么好说的，懂的都懂，直接上代码

//安装 Echarts
npm install echarts --save

在 Vue 组件中引入 Echarts 并创建一个简单的饼图,代码如下：

<template>
  <div ref="chart" style="width: 50%;height: 400px;"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import {
    ref, onMounted } from 'vue'
const chart = ref(null)
onMounted(() => {
   
  const myChart = echarts.init(chart.value)
  const option = {
   
    series: [
      {
   
        type: 'pie',
        data: [
          {
    value: 335, name: '直接访问' },
          {
    value: 310, name: '邮件营销' },
          {
    value: 234, name: '联盟广告' },
          {
    value: 135, name: '视频广告' },
          {
    value: 1548, name: '搜索引擎' }
        ]
      }
    ]
  }
  myChart.setOption(option)
})

运行代码，效果如下

美化饼图

修改颜色

通过设置color属性来修改饼图的颜色

const option = {
   
    color: ['#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
    series: [
      {
   
        type: 'pie',
        data: [
          {
    value: 335, name: '直接访问' },
          {
    value: 310, name: '邮件营销' },
          {
    value: 234, name: '联盟广告' },
          {
    value: 135, name: '视频广告' },
          {
    value: 1548, name: '搜索引擎' }
        ], 
      }
    ]
  }

修改饼图的边框线条样式

通过设置 itemStyle 属性中的 borderWidth 和 borderColor 来修改饼图的边框线条样式。

const option = {
   
    color: ['#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
    series: [
      {
   
        type: 'pie',
        data: [
          {
    value: 335, name: '直接访问' },
          {
    value: 310, name: '邮件营销' },
          {
    value: 234, name: '联盟广告' },
          {
    value: 135, name: '视频广告' },
          {
    value: 1548, name: '搜索引擎' }
        ],
        itemStyle: {
   
          borderWidth: 2,
          borderColor: '#fff'
        }
      }
    ]
  }

修改饼图的标签样式

通过设置 label 属性中的 color、fontSize、fontWeight 等属性来修改饼图的标签样式。

 series: [
      {
   
        type: 'pie',
        data: [
          {
    value: 335, name: '直接访问' },
          {
    value: 31