echarts 半圓形扇形

最新推荐文章于 2023-04-06 13:45:53 发布

原创

最新推荐文章于 2023-04-06 13:45:53 发布 · 3k 阅读

7 ·

CC 4.0 BY-SA版权

本文介绍了如何使用Echarts创建半圆形和扇形图表，包括遇到的问题及其解决方案，如提示框显示比例问题、下半部分图例显示以及图例样式的调整，通过实例代码展示了最终效果。

// 半圓扇形
setCleverRateChart: function (a) {
  let dataType= ["男", "女", "中","男1", "女1", "中1"];
  let aa=0;
  for(let i=0;i<a.length;i++){
     aa+=a[i];
  }
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('cleverChart'));
  // 指定图表的配置项和数据
  var option1 = {
    // 提示文本
    tooltip: {
      // 触发器
      trigger: "item",
      formatter: "{a} <br/>{b} : {c}人 ({d}%)"
    },
    legend: {
      data:dataType,
      // 显示方向
      orient: "horizontal",
      // x轴方向的位置
      x: "center",
      y2: 5 //延Y轴居中
    },
    series: [{
      startAngle: 180,
      name: "人力類型",
      // 图表类型
      type: "pie", // 饼图
      // center: ["50%", "60%"],
      radius: [0, '50%'],
      data: [
        {
          value: a[0],
          name: "男",
          itemStyle:{normal:{color:'#49a1ff'}}
        },
        {
          value: a[1],
          name: "女",
          itemStyle:{normal:{color:'#fad446'}}
        },
        // {
        //   value: a[2],
        //   name: "中",
        //   itemStyle:{normal:{color:'#67e2dd'}}
        // },
        {
          value:19559, 
          name:'other',
          itemStyle:{normal:{color:'rgba(0,0,0,0)'}}
        }
      ],
      // itemStyle的emphasis是鼠标 hover 时候的高亮样式
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: 'inner',
            formatter: '{b}:({d}%) \n'
          },
          labelLine: {
            show: true
          }
        },
        emphasis: {
          shadowBlur: 20,
          // 陰影的橫向偏移
          shadowOffsetX: 0,
          // 阴影颜色
          shadowColor: "rgba(0, 0,0, 0.2)"
        }
      },
      // 动画效果
      animationType: "scale",
      animationEasing: "elasticOut",
      animationDelay: function (idx) {
        return Math.random() * 200;
      }
    },
    {
      startAngle: 180,
      name: "人力類型",
      // 图表类型
      type: "pie", // 饼图
      // center: ["50%", "70%"],
      radius: ['70%', '60%'],
      data: [
       
        {
          value: a[2],
          name: "中",
          itemStyle:{normal:{color:'#67e2dd'}}
        },
        {
          value: a[3],
          name: "男1",
          itemStyl

最低0.47元/天解锁文章