ECharts双层环形图备用

在这里插入图片描述

var datas = {
  value: 78,
  company: "%",
  ringColor: [
    {
      offset: 1,
      color: "#FFF4DF" // 0% 处的颜色
    },
    {
      offset: 0,
      color: "#FFF4DF" // 100% 处的颜色
    }
  ]
};
option = {
  grid: {
    left: 0,
    bottom: 0,
    top: 0,
    containLabel: true
  },
  title: {
    text: 78,
    subtext: "%",
    x: "center",
    y: "center",
    itemGap: 0,
    textStyle: {
      fontWeight: "bold",
      color: "#000",
      fontSize: 14
    },
    subtextStyle: {
      color: "#000",
      fontSize: 12
    }
  },
  series: [
    {
      name: "内环",
      type: "pie",
      clockWise: true,
      radius: ["80%", "65%"],
      center: ["50%", "50%"],
      itemStyle: {
        normal: {
          borderRadius: 50,
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        }
      },
      hoverAnimation: false,
      color: "#0ac4a6",
      data: [
        {
          value: 100 - datas.value,
          name: "",
          itemStyle: {
            normal: {
              color: "#FFF",
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          }
        },
        {
          name: "",
          value: datas.value
        }
      ]
    },
    // 边框的设置
    {
      name: "外环",
      center: ["50%", "50%"],
      radius: ["100%", "80%"],
      type: "pie",
      silent: true,
      animation: false,
      color: "#f0f2f5",
      data: [
        {
          value: 100
        }
      ]
    }
  ]
};

clockWise为true,环逆时针显示,false 顺时针显示

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以使用以下代码来使用 echarts双层环形: ```javascript // 引入 echarts import echarts from 'echarts'; // 初始化 echarts 实例 const myChart = echarts.init(document.getElementById('myChart')); // 配置数据 const option = { title: { text: '双层环形', subtext: '示例', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['层级一', '层级二'] }, series: [ { name: '层级一', type: 'pie', selectedMode: 'single', radius: [0, '30%'], label: { position: 'inner' }, labelLine: { show: false }, data: [ { value: 335, name: '直接访问' }, { value: 679, name: '邮件营销' }, { value: 1548, name: '搜索引擎' } ] }, { name: '层级二', type: 'pie', radius: ['40%', '55%'], label: { formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}:}{c} {per|{d}%} ', backgroundColor: '#eee', borderColor: '#aaa', borderWidth: 1, borderRadius: 4, shadowBlur: 3, shadowOffsetX: 2, shadowOffsetY: 2, shadowColor: '#999', padding: [0, 7], rich: { a: { color: '#999', lineHeight: 22, align: 'center' }, hr: { borderColor: '#aaa', width: '100%', borderWidth: 0.5, height: 0 }, b: { fontSize: 16, lineHeight: 33 }, per: { color: '#eee', backgroundColor: '#334455', padding: [2, 4], borderRadius: 2 } } }, data: [ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1048, name: '百度' }, { value: 251, name: '谷歌' }, { value: 147, name: '必应' }, { value: 102, name: '其他' } ] } ] }; // 使用刚指定的配置项和数据显示表。 myChart.setOption(option); ``` 这是一个简单的示例,你可以根据自己的需求进行修改和定制。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值