echarts环形图使用配置

1、认识安装和使用

官网效果

2、🍉 简单安装使用

先确保你安装的是Echarts5，否则的化安装一下

yarn add echarts

// 结构部分
<div ref="echartradarRef1" style="width: 50%; height: 400px;"></div>


// 引入部分
import * as echarts from 'echarts';// 5.4区别4引入方式
const echartradarRef1 = ref(null);
onMounted(() => {
    initChartradar(); 
});

展示一下官方给我们的默认设置

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

配置代码如下

// 环图5 huantu5
function initechartbing(id, data) {
    let _this = this;
    let myChart = echarts.init(document.getElementById(id));
    myChart.clear();

    let option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: '5%',
            left: 'center',
            show:false,
        },
        series: [{
            name: 'Access From',
            type: 'pie',
            radius: ['30%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 0,
                borderColor: '#E9F5FF',
                borderWidth: 10,
                normal: {
                  // 自定义颜色等
                },
                emphasis: {
                  // 在 hover 状态下不要改变样式
                  shadowBlur: 0,
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  color: 'inherit' // 保持原有颜色
                }
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {

                label: {
                    show: false,
                    fontSize: 28,
                    fontWeight: 'bold'
                },
                itemStyle: {
                    // 控制放大倍数
                    // 这里没有直接的scale属性，但可以通过其他样式来达到类似效果
                    // shadowBlur: 10,
                    // shadowColor: 'rgba(0, 0, 0, 0.5)',      
                      shadowBlur: 0, // 关闭阴影模糊
                    shadowColor: 'transparent',
                    shadowOffsetX: 0, // 关闭阴影偏移X
                    shadowOffsetY: 0, // 关闭阴影偏移Y
                    opacity: 1 // 不改变透明度
                },
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: 'Search Engine', itemStyle: { color: '#FFD05B' } },
                { value: 735, name: 'Direct', itemStyle: { color: '#45A9FF' } }
            ]
        }]
    };
  myChart.setOption(option);
}


//使用 
initechartbing('huantu5');

3、🍉详细参数使用配置

🍓 禁用 hover 动画

option => series =>

 // 禁用 hover 动画
 hoverAnimation: false,

禁止间距

调整option => series => itemStyle

 itemStyle: {
    borderRadius: 0,
    borderColor: '#E9F5FF',
    borderWidth: 10,
    normal: {
      // 自定义颜色等
    },
    emphasis: {
      // 在 hover 状态下不要改变样式
      shadowBlur: 0,
      shadowOffsetX: 0,
      shadowOffsetY: 0,
      color: 'inherit' // 保持原有颜色
    }
},