ECharts数据可视化饼状图(环形图-进度半圆形)

最新推荐文章于 2024-06-21 16:31:42 发布

Yolo416

最新推荐文章于 2024-06-21 16:31:42 发布

阅读量4.1k

点赞数

分类专栏：前端基础文章标签：可视化

本文链接：https://blog.csdn.net/m0_50125215/article/details/116854820

版权

这篇博客介绍了如何使用ECharts创建销售进度的半圆饼状图。通过分析官方示例并进行定制，实现了图表大小调整、文字居中显示以及颜色渐变的修改。主要需求包括将饼状图改为半圆形，增强图表视觉效果，以及优化鼠标悬停行为。

摘要由CSDN通过智能技术生成

销售进度 (quarter) -饼状图

实现步骤：

寻找官方的类似示例，给予分析,引入到HTML页面中
按照需求来定制它。

链接: 环形图.

在这里插入图片描述

完整js代码

// 销售模块 饼形图 半圆形 设置方式
(function() {
   
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".gauge"));
  // 2. 指定数据和配置
  var option = {
   
    series: [
      {
   
        name: "销售进度",
        type: "pie",
        radius: ["130%", "150%"],
        // 移动下位置  套住50%文字
        center: ["48%", "80%"],
        //是否启用防止标签重叠策略
        // avoidLabelOverlap: false,
        labelLine: {
   
          normal: {
   
            show: fals