zoukankan      html  css  js  c++  java
  • echart 实现label的内容展示不同的样式

     实现效果如图,在里边的那个饼图中,label的内容展示不同的样式

    这个实现有两个要点

    1.里边的饼图没有使用主题中默认的颜色

    2.label的内容的样式不同

    实现方式

     series: [
            {
              name: '',
              type: 'pie',
              selectedMode: 'single',
              radius: ['0', '45%'],
              roam: true,
              label: {
                position: 'center',
                formatter: (data, type) => {
                  let info = data.data;
                  let str = `{a|${info.value}}
    
     {b|${info.name}}`; //这里对不同的内容进行标识 a,b,或者可以随便自己起个别的名字
                  return str;
                },
                color: 'white',
                rich: { //在rich中对两个标识进行样式修改
                  a: {
                    fontSize: 24
                  },
                  b: {
                    fontSize: 12
                  }
                }
              },
              itemStyle: {   //这个属性是使用自己的颜色,而不是使用主题中的默认颜色
                color: '#293441'
              },
              labelLine: {
                show: false
              },
              data: data.series[0]
            },
            {
              name: '',
              type: 'pie',
              radius: ['45%', '80%'],
              label: {
                position: 'inner'
              },
              data: data.series[1]
            }
    ]
  • 相关阅读:
    express4.x socket
    validator
    服务管理,Dll查看
    复制程序,获取系统信息
    TCP HelloWord
    UDP HelloWord
    [置顶] 一个小马
    注册表编辑
    服务的启动与停止
    自下载运行
  • 原文地址:https://www.cnblogs.com/fyjz/p/15398705.html
Copyright © 2011-2022 走看看