【ECharts】环形图、饼状图

已于 2023-04-24 16:04:52 修改
阅读量1.2w 收藏 118
点赞数 33
分类专栏： 数据可视化 文章标签： echarts 前端 javascript
于 2022-12-01 03:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuli_youhouli/article/details/124078034
版权

目录

color设置的颜色

环形渐变色

圆环中间显示文字

悬浮显示中间文字

悬浮显示中间文字，默认显示第一个

循环高亮饼图块

label文字过长重叠

label和饼图一致

label展示位置

内容为0仍然显示扇区

圆角环形图

仿3D环形图

label带小圆点

label超出边界显示不全

百分比圆环图

延时动画（南丁格尔玫瑰图）

玫瑰图数值差别大展示效果不佳

color设置的颜色

option = {
    color:['blue','pink','lightyellow','orange','lightblue'],
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            label: {
                show: false,
                position: 'center'
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ]
        }
    ]
};

环形渐变色

option = {
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            data: [
                {
                    value: 335,
                    name: '直接访问',
                    itemStyle: {
                        color: {
                            colorStops: [{
                                    offset: 0,
                                    color: '#ff7474 ' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#4176ff' // 100% 处的颜色
                                }]
                        }
                    }
                },
                {
                    value: 310,
                    name: '邮件营销',
                    itemStyle: {
                        color: {
                            colorStops: [{
                                    offset: 0,
                                    color: '#ffe390' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#f7c222' // 100% 处的颜色
                                }]
                        }
                    }
                },

            ]
        }
    ]
};

圆环中间显示文字

管网案例

第一种方式：title的写法

option = {
  title : {
    show:true,
    text: '充电方式', // \n可以换行
    x:'50%', // center
    y: 'center',
    textAlign: 'center',
    textStyle: {
      fontSize: '16',
      fontStyle: 'normal',
      fontWeight: '600',
      lineHeight: '28',
      color:'#333'
    },
  },
  series: [
    {
      type:'pie',
      radius: ['30%', '40%'],
      label: {
        normal: {
            show: false,
        },
        emphasis: {
            show: true,
        }
      },
      data: [
          {value: 1048, name: '搜索引擎'},
          {value: 735, name: '直接访问'},
          {value: 580, name: '邮件营销'},
          {value: 484, name: '联盟广告'},
          {value: 300, name: '视频广告'}
      ]
    }
  ]
};

第二种写法：label

option = {
  series: [
    {
      type:'pie',
      radius: ['30%', '40%'],
      center: ['50%', '50%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: true,
          position: 'center',
          color:'#4c4a4a',
          formatter: '{total|' + 200 +'}'+ '\n\r' + '{active|共发布活动}',
          rich: {
            total:{
              fontSize: 35,
              fontFamily : "微软雅黑",
              color:'#454c5c'
            },
            active: {
              fontFamily : "微软雅黑",
              fontSize: 16,
              color:'#6c7a89',
              lineHeight:30,
            },
          }
        },
        emphasis: {//中间文字显示
          show: true,
        }
      },
      data: [
        {value: 1048, name: '搜索引擎'},
        {value: 735, name: '直接访问'},
        {value: 580, name: '邮件营销'},
        {value: 484, name: '联盟广告'},
        {value: 300, name: '视频广告'}
      ]
    }
  ]
};

第三种写法：graphic（还有中间白色间隔）

var i = 0;
var colors=['#5AC8FA','#4BD964','#A16EFF','#FF2D55','#FF9600','#CDCED1'];
option = {
  // 圆环中间的文字
  graphic:[
    {
      type:'text',
      left:'center',
      top:'45%',
      style:{
        text:'标题',
        fill:'#000',
        width:30,
        height:30,
        fontSize:30,
      }
    },
    {
      type:'text',
      left:'center',
      top:'55%',
      style:{
        text:'文本',
        fill:'#969696',
        width:30,
        height:30,
        fontSize:24,
      }
    }
  ],
  series : [
    {
      type:'pie',
      radius: ['45%', '60%'],
      avoidLabelOverlap: false,
      itemStyle:{
        normal:{
          color:function(){
            return colors[i++]
          },
          // 白色间距
          borderWidth: 6,
          borderColor: '#ffffff',
        }
      },
      label: {
        normal: {
          show: false,
        },
        emphasis: {
          show: false,
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data:[1,2,3,4]
    }
  ]
}

悬浮显示中间文字

option = {
  tooltip: {
    trigger: 'item',
    formatter:'{a}<br/>{b}:{c} {d}%'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: ['30%', '40%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        {value: 1048, name: '搜索引擎'},
        {value: 735, name: '直接访问'},
        {value: 580, name: '邮件营销'},
        {value: 484, name: '联盟广告'},
        {value: 300, name: '视频广告'}
      ]
    }
  ]
};

悬浮显示中间文字，默认显示第一个

var myChart = echarts.init(document.getElementById('chart-container'), null, {
  renderer: 'canvas',
  useDirtyRect: false
});

window.addEventListener('resize', myChart.resize);

var data= [
  { value: 1048, name: 'Search Engine' },
  { value: 735, name: 'Direct' },
  { value: 580, name: 'Email' },
  { value: 484, name: 'Union Ads' },
  { value: 300, name: 'Video Ads' }
]

var keys = Object.keys(data)

var option = {
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%','60%'],
      hoverOffset: 20,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle:{
            fontSize: '20'
          }
        }
      },
      data: data,
    }
  ]
};

if (option && typeof option === 'object') {
  
  myChart.setOption(option);
  
  // 默认第一个高亮
  myChart.dispatchAction({
    type:'highlight',
    seriesIndex: 0,
    dataIndex: 0
  })
  
  myChart.on('mouseover',function(e){
    // 取消所有高亮
    myChart.dispatchAction({
      type:'downplay',
      seriesIndex: 0,
      dataIndex: keys
    })
    // 当前高亮
    myChart.dispatchAction({
      type:'highlight',
      seriesIndex: 0,
      dataIndex: e.dataIndex
    })
  })
  myChart.on('mouseout',function(e){
    // 取消所有高亮
    myChart.dispatchAction({
      type:'downplay',
      seriesIndex: 0,
      dataIndex: keys
    })
    // 第一个高亮
    myChart.dispatchAction({
      type:'highlight',
      seriesIndex: 0,
      dataIndex: 0
    })
  })
}

循环高亮饼图块

var myChart = echarts.init(document.getElementById('chart-container'), null, {
  renderer: 'canvas',
  useDirtyRect: false
});

window.addEventListener('resize', myChart.resize);

var option = {
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

if (option && typeof option === 'object') {
  myChart.setOption(option);
 
  timeSetIntervalFun()
}

var currentIndex = 0
function timeSetIntervalFun() {
  timeSetInterval = setInterval(function() {
    var dataLen = option.series[0].data.length;

    // 取消之前高亮的图形
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: currentIndex
    });

    currentIndex = (currentIndex + 1) % dataLen;

    // 高亮当前块
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: currentIndex
    });

  }, 2000);

}

myChart.on('mouseover', function(e) {
  clearInterval(timeSetInterval)
  
  //取消默认选中高亮
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: currentIndex
  });

  //高亮当前块
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 1,
    dataIndex: e.dataIndex
  });

  currentIndex = e.dataIndex;
});


myChart.on('mouseout', function(e) {
  timeSetIntervalFun()

  // 第一个高亮
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 1,
    dataIndex: 0
  });

});

label文字过长重叠

option = {
  series: [
    {
      type: 'pie',
      clickable:false,　　　　　　// 是否开启点击
      minAngle: 15,           　　 // 最小扇区角度（0 ~ 360），防止扇区太小影响交互
      startAngle:45,             // 起始角度
      avoidLabelOverlap: true,    // 是否启用防止标签重叠策略
      hoverAnimation:false,　　   // 是否开启 hover 在扇区上的放大动画效果。
      silent: true,　　　　　　　　// 图形是否不响应和触发鼠标事件
      radius: ['20%', '30%'],
      center: ['50%', '50%'],
      label: {
        show: true,
        fontSize: '16',
        align: 'left',
        formatter(v) {
          console.log(v)
          let text = v.name
          if(text.length <= 8){
            return text;
          }else if(text.length > 8 && text.length <= 16){
            return text = `${text.slice(0,8)}\n${text.slice(8)}`
          }else if(text.length > 16 && text.length <= 24){
            return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16)}`
          }else if(text.length > 24 && text.length <= 30){
            return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24)}`
          }else if(text.length > 30){
            return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24,30)}\n${text.slice(30)}`
          }
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1, name: '一二三四五六七八九十' },
        { value: 735, name: '一二三四五六' },
        { value: 580, name: '一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十' },
        { value: 484, name: '一二三四五六七八九十一二三四五六七八九十' },
        { value: 300, name: '一二三四五六七八九十一二' }
      ]
    }
  ]
};

label和饼图一致

let colorList = ['lightgreen','pink','purple','orange','lightblue']
let dataList = [
  { value: 1048, name: 'Search Engine'},
  { value: 735, name: 'Direct' },
  { value: 580, name: 'Email' },
  { value: 484, name: 'Union Ads' },
  { value: 300, name: 'Video Ads' }
]
option = {
  series: [
    {
      type: 'pie',
      radius: ['20%','30%'],
      color: colorList,
      data: dataList.map((item, index) => {
        item.label = {
          // 第一种方法
          color: colorList[index],
          // 第二种方法
          color: 'inherit'
        }
        return item
      }),
    }
  ]
};

label展示位置

option = {
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '50%'],
        label: {
            show: true,
            position: 'inside'
        },
        labelLine: {
            show: false,
        },
        data: [
            {
                value: 335,
                name: '良好'
            },
            {
                value: 135,
                name: '不及格',
                label: {
                    show: true,
                    position: 'outside'
                },
                labelLine: {
                    show: true,
                    smooth: true,
                    lineStyle: {
                        color: 'red'
                    }
                }
            }, 
            {
                value: 1548,
                name: '优秀优秀优秀优秀优秀',
                label: {
                    formatter: function (params) {
                        if (params.data.name.length > 5) {
                            var labelNewText = params.data.name.substring(0, 6) + ' ...'
                        }
                        return labelNewText
                    }
                }
            }
        ],
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

内容为0仍然显示扇区

配置最小角度就好了。

option = {
  series: [
    {
      type: 'pie',
      radius: ['20%','30%'],
      minAngle: 15,  // 最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
      avoidLabelOverlap: true,   // 是否启用防止标签重叠策略
      data: [
        { value: 0, name: 'Search Engine' },
        { value: 25, name: 'Direct' },
        { value: 0, name: 'Email' },
        { value: 40, name: 'Union Ads' },
        { value: 0, name: 'Video Ads' }
      ],
    }
  ]
};

圆角环形图

option = {
  series: [
    {
      type: 'pie',
      radius: ['30%', '45%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 50,
        borderColor: '#fff',
        borderWidth: 30
      },
      label:{
        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' }
      ]
    }
  ]
};

仿3D环形图

series多个值实现多个圆环

graphic实现环形中间放图片、文字

silent: true实现内部浅色圆环不触发事件，完全没有效果。

emphasis:实现内部浅色圆环不触发事件，但是显示tooltip。

let colors = ["#21BAD6", "#FF9728"];
var img = 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png';
option = {
  color: colors,
  tooltip: {
    trigger: "item",
    backgroundColor: "rgba(0,0,0,.6)",
    borderColor: "rgba(147, 235, 248, .8)",
    textStyle: {
      color: "#FFF",
    },
  },
  graphic: [
    {
      type: "image",
      style: {
        image: img,
        width: 80,
        height: 80,
        color: "#fff",
      },
      left: "center",
      top: "center",
    },
    {
      type: "text",
      left: "center",
      top: "60%",
      style: {
        text: "晴天",
        fill: "#333",
        width: 30,
        height: 30,
        fontSize: 12,
      },
    },
  ],
  series: [
    {
      minAngle: 15, //扇区最小角度
      startAngle: 190, //扇区起始角度
      name: "天气分析",
      type: "pie",
      avoidLabelOverlap: true,
      legendHoverLink: true,
      radius: ["50%", "67%"],
      data: [
        {
          value: 14,
          name: "雨",
        },
        {
          value: 48,
          name: "晴",
        },
      ],
    },
    {
      minAngle: 15, //扇区最小角度
      startAngle: 190, //扇区起始角度
      name: "天气分析",
      type: "pie",
      avoidLabelOverlap: true,
      legendHoverLink: true,
      radius: ["40%", "50%"],
      data: [
        {
          value: 14,
          name: "雨",
        },
        {
          value: 48,
          name: "晴",
        },
      ],


      // 点击不放大
      silent: true,
      // 点击不放大，但是显示tooltip
      emphasis:{//使用emphasis
         disable:false,
         scale:false,//不缩放
         scaleSize:0,//为了防止失效直接设置未0
      },

      itemStyle: {
        opacity: 0.7,
      },
      label:{
        show: false
      }
    }
  ],
};

参考链接： Echarts饼图,环形图,鼠标触碰后取消默认放大效果_

label带小圆点

let colors = [
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: "#0D2A95" },
    { offset: 1, color: "#05ABFA" },
  ]),
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: "#148eb7" },
    { offset: 1, color: "#58b986" },
  ]),
];

// 数据
let data = {
  name: "人口分析",
  type: "pie",
  radius: "65%",
  avoidLabelOverlap: true,
  legendHoverLink: true,
  color: colors,
  data: [
    {
      value: 14,
      name: "男人",
      label: {
        shadowColor: colors[2],
      },
    },
    {
      value: 48,
      name: "女人",
      label: {
        shadowColor: colors[1],
      },
    },
  ],
}

option = {
  tooltip: {
    trigger: "item",
    backgroundColor: "rgba(0,0,0,.6)",
    borderColor: "rgba(147, 235, 248, .8)",
    textStyle: {
      color: "#FFF",
    },
  },
  legend: {
    show: true,
    bottom: "0",
    left: "center",
    textStyle: {
      color: "#333",
    },
  },
  series: [
    {
      ...data,
      
      // label 文字的设置
      label: {
        formatter: "{b|{b}}\n {per|{d}% }",
        rich: {
          b: {
            color: "#333",
            fontSize: 12,
            lineHeight: 24,
          },
          per: {
            color: "#333",
            fontSize: 12,
          },
        },
      },

      // label 线条的设置
      labelLine: {
        length: 10, // 第一段线 长度
        length2: 10, // 第二段线 长度
        show: true,
        emphasis: {
          show: true,
        },
      },
    },

    // label 圆点的设置
    {
      ...data,
      label: {
        backgroundColor: "auto", //圆点颜色，auto：映射的系列色
        height: 0,
        width: 0,
        lineHeight: 0,
        borderRadius: 2.5,
        shadowBlur: 8,
        shadowColor: "auto",
        padding: [2.5, -2.5, 2.5, -2.5],
      },
      labelLine: {
        length: 10, // 第一段线 长度
        length2: 10, // 第二段线 长度
        show: false,
      },
    },
  ],
}

label超出边界显示不全

缩小饼图大小或者label文字实现分行。

百分比圆环图

女孩的占比30%

// girl的占比
let girl = 300;
let boy = 700;
let total = 1000;
let per = 30; // per = ((300/1000）*100)*100
let color =[
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: "#17DFFD" },
    { offset: 1, color: "#123E83" },
  ]),
  '#f1f1f1',
];
option = {
  color: color,
  graphic:[
    {
      type:'text',
      left:'center',
      top:'43%',
      style:{
        text: girl,
        textAlign: "center",
        fill: color[0],
        fontSize: 32,
      }
    },
    {
      type:'text',
      left:'center',
      top:'52%',
      style:{
        text: `女生占比`,
        textAlign: "center",
        fill: color[0],
        fontSize: 34,
      }
    }
  ],
  series: [
    {
      type: 'pie',
      radius: ['50%','30%'],
      hoverAnimation: false,
      avoidLabelOverlap: false,
      data: [
        { value: per, name: 'per' },
        { value: 100, name: 'total' },
      ],
      label: {
        show: true,
        formatter:function(d) {
          if(d.data.name == 'per') {
            return `{value|${per}%}`
          }else {
            return ''
          }
        },
        rich:{
          value:{
            fontSize:18,
            color:color[0]
          }
        }
      }
    }
  ]
};

延时动画（南丁格尔玫瑰图）

option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  series: [
    {
      name: '指令',
      type: 'pie',
      radius: [20, 140],
      center: ['50%', '50%'],
      roseType: 'radius',
      data: [
        { value: 40, name: 'rose 1' },
        { value: 33, name: 'rose 2' },
        { value: 28, name: 'rose 3' },
        { value: 22, name: 'rose 4' },
        { value: 20, name: 'rose 5' },
        { value: 15, name: 'rose 6' },
        { value: 12, name: 'rose 7' },
        { value: 10, name: 'rose 8' }
      ],
      // 延时动画（渲染出来的时间）
      animationEasing: "cubicInOut",
      animationDuration: 6000,
    },
  ]
};

玫瑰图数值差别大展示效果不佳

原始效果：

期待效果：

// 原始数据
let data = [
  { value: 15, name: '可乐' },
  { value: 199, name: '雪碧' },
  { value: 6, name: '美年达' },
  { value: 2, name: '茶π' },
  { value: 100, name: '苏打水' },
  { value: 1, name: '矿泉水' },
  { value: 10, name: '农夫山泉' },
  { value: 1, name: '橙汁' }
]

// 数据排序
data.sort((a, b) => b.value - a.value)

//和
let sum = 0
data.forEach(v=>{
  sum += v.value
})

// 新数据
let b = data.map((it) => {
  return {
    name: it.name,
    value: Math.pow(it.value, 0.099), // 值越大，数据差越小 最大值为0.5
  }
})

option = {
  tooltip: {
    trigger: 'item',
    backgroundColor: 'rgba(255, 255, 255, 0.7)',
    formatter: (p) => {
      let value = ''
      data.forEach((v)=> {
        if(v.name == p.name) value = v.value
      })
      return p.name + " : " + value + ' (' + ((value / sum) * 100).toFixed(2) + '%)'
    },
  },
  series: [
    {
      name: '饼图',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      label: {
        show: true,
        position: 'inside' ,
        color: '#fff',
      },
      labelLine: {
        show: false
      },
      data: b
    }
  ]
};

宾果的救星
关注
  • 33
    点赞
  • 踩
  • 118
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
echarts饼状图中间展示数字
04-26
echarts饼状图中间展示数字，官方实例，展示效果在我的博客里有
百度Echarts饼状图
10-30
前端引入百度Echarts饼状图动态获取SQL数据库数据,利用AJAX获取后台数据，后台是用ASP.NET写的，(因为是新手,写的代码可能有些瑕疵)（写下这些代码一是巩固一下，二是希望能帮助更多的和我一样的新手，大家多多帮助）（免费下载百度网盘https://pan.baidu.com/s/1Ito86LGIWVFZu69wHvaXGA）(提取码:w5h7)
环形饼状图进度条效果
07-02
环形饼状图 动态进度条 源代码直接导入运行
echarts如何实现3D饼图(环形图)?
最新发布
weixin_48082900的博客
03-04 1989
自定义修改3D饼图的宽高和legend
Echarts可视化教程（四）——饼状图的绘制
fh8uuc的博客
10-21 3058
饼状图的核心特点是能够展示数据的比例情况，通过不同的颜色在圆中的面积大小，可以一眼看出各个数据的分布情况。嵌套圆环图有两组数据，一组是内层的数据，一组是外层的数据，外层数据是对内层数据的细化，内层的一项可以在外层对应一项或者几项。我们将调用浏览器接口，打开你修改的这段代码生成的网页，并截图获取其中的图像，和正确的图像进行对比，从而判断你补充的程序是否正确，正确将输出：“图像对比一致，恭喜通关！之间补充代码（有两处），这段代码画出来的是一个饼状图，你补充的代码需要保证内层是一个标准饼状图，它的半径是。
Echarts饼图4.0（3D环形图、包含透明效果）
06-09
Echarts饼图4.0（3D环形图、包含透明效果）
echarts 圆环图 中间显示数据 下边显示标题
01-07
echarts 圆环图 中间显示数据 下边显示标题 $(function(){ getqykpnzqdata(qykpnzqjn,qykpnzqqn,wmgdseletj); }) /** * 获得数据并显示echarts图 * idnamejn : 显示今年数据的idname * idnameqn : 显示去年数据的idname * wmgdseletj 查询条件 select 选择的年份 */ function getqykpnzqdata(idnamejn,idnameqn,wmgdseletj){ var titleval = '今年'; var yhcolo
echarts之环形图
zhangdui2016的博客
10-13 2万+
echarts中环形图就是饼图，区别在于是否定义了图形内部镂空的半径而已，就像下图： 那么现在有了一个圆环，中间如果空着的话就太难看了，所以给了如下的样式： 就是要给圆环中心添加内容。如果是单纯的添加内容的话，有以下三种方式： 1、graphic，是原生图形元素组件。优点是支持多种图形元素，但是如果要实现上图不太合适。因为圆环中心的字体有两种样式，面对多种样式，我能想到的只有富文本。 2、label，支持富文本，实现上图完全没问题，但是人家貌似不是干这个的。。。 如果使用了珍贵的lab
echarts 环形图
aibujin的博客
05-16 1万+
echarts 环形图，多层嵌套，自定义 legend 位置、颜色，中间插入数据及文字，颜色渐变；
ECharts 之 环形图
记得笑的博客
12-17 1万+
环形图是饼图的一种，具体的饼图可以自己更改radius属性的大小。 radius : ['50%', '70%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形 效果图： 代码如下： &lt;html&gt; &lt;head&gt; &lt;base href="&lt;%=basePath%&gt;"&gt; ...
Echarts环形图使用和设置（内外大小、颜色、指示线、圆圈中心字展示）
z1076233241的博客
05-12 9400
其次，html中建立盒子，存放这个图标，记住一定要为这个盒子设置长宽。js中按照以下格式进行使用，其中的import根据需求会有不一样之处。如果显示报错，那么使用管理员身份运行cmd。首先要进行下载，打开cmd，输入。这里展示代码，在代码中标注位置。对于环形图的操作，全部存放在。
ECharts圆环图(详细示例——满满的注释)
热门推荐
GRAY_KEY的博客
06-03 2万+
图表效果如下：具体代码如下：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;圆环图案例&lt;/title&gt; &lt;!-- 引入 ECharts 文件 --&gt; &lt;script src="js/
Echarts 自动切换选中状态， 环状饼图内饼和外环同步切换，示例代码
12-04
Echarts 自动切换选中状态， 环状饼图内饼和外环同步切换，示例代码
vue3半圆进度条,基于echarts仪表盘改造半环形进度图,扇形饼状图实现
10-16
vue3
react-react组件用于各种圆形方形进度条环形图饼状图等
08-15
react组件，用于各种圆形方形进度条、环形图、饼状图等
echarts圆环中间显示文字.docx
01-20
echarts圆环中间显示文字.docx
[推荐]C#报表制作视频教程+Echarts+柱状图+饼状图+曲线图+男丁格尔图+折线图+面积图+环形图
04-28
技术交流QQ：1416759661 微信号：yyjcw10000 本套教程采用vs2012+sql2012开发，以销售明细表为例，讲解了常见报表的开发过程，既包含了传统的表格形式的报表、又包含了柱状图（条形图）、饼状图、环形图、南丁格尔图...
echarts饼图各个板块之间的空隙如何实现
01-22
效果图 到此这篇关于echarts饼图各个板块之间的空隙如何实现的文章就介绍到这了,更多相关echarts饼图板块的空隙内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
Excel饼图圆环图模板-多分类圆角圆环图
11-24
Excel饼图圆环图模板-多分类圆角圆环图
vue echarts 3d环形饼状图
08-15
你可以通过使用 Vue.js 和 ECharts 来创建一个3D环形饼状图。首先，确保你已经在你的项目中安装了 Vue.js 和 ECharts。 接下来，你可以按照以下步骤创建一个3D环形饼状图： 1. 在你的 Vue 组件中引入 ECharts： ```javascript import echarts from 'echarts' ``` 2. 创建一个 div 元素作为图表的容器： ```html <div id="chartContainer" style="width: 600px; height: 400px;"></div> ``` 3. 在 Vue 组件的 mounted 钩子函数中初始化图表： ```javascript mounted() { this.initChart() }, methods: { initChart() { // 使用 echarts.init 初始化图表容器 const chartContainer = document.getElementById('chartContainer') const chart = echarts.init(chartContainer) // 配置饼状图的数据 const data = [ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' } ] // 配置饼状图的选项 const option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, series: [ { name: '访问来源', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: data } ] } // 使用 setOption 方法将配置项应用到图表中 chart.setOption(option) } } ``` 以上代码会在图表容器中绘制一个3D环形饼状图，你可以根据自己的需求修改数据和选项来自定义图表的样式和行为。 希望这能帮到你！如果有任何问题，请随时询问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宾果的救星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值