分布饼状图——开发解释——未来之窗行业应用跨平台架构

一、饼图上内容-文字控制 

 label: {
                    fontSize: 10,
                    show: true, // 显示文字2024
                    formatter: function (arg) {
                      // console.log(arg)
                      // return `${arg.name} ${arg.value}元\n ${arg.percent}%`
                      //return arg.name + '地区' + arg.value + '元\n' + arg.percent + '%'
                      return arg.name + '地区\n' + arg.value + '元\n' 
                    }
                },

  var myechart2 = echarts.init(document.getElementById('未来之窗饼状1'));
    option = {
        // 控制提示
        tooltip: {
            // 非轴图形，使用item的意思是放到数据对应图形上触发提示
            trigger: 'item',
            // 格式化提示内容：
            // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
            formatter: "{a} <br/>{b} : {c} ({d}%)"
            , trigger: 'axis'//2024-12-31
        },
        // 控制图表
        series: [
            {
                // 图表名称
                name: '地区',
                // 图表类型
                type: 'pie',
                // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
                // 百分比基于  图表DOM容器的半径
                radius: ['10%', '70%'],
               // radius: ['50%', '70%'],
                // 图表中心位置 left 50%  top 50% 距离图表DOM容器
                center: ['50%', '50%'],
                // 半径模式，另外一种是 area 面积模式
                roseType: 'radius',
                // 数据集 value 数据的值 name 数据的名称
                data: [
                    { value: 48, name: '云南' },
                    { value: 1, name: '北京' },
                    { value: 1, name: '山东' },
                    { value: 1, name: '上海' },
                    { value: 1, name: '安徽' },
                    { value: 35, name: '浙江' },
                    { value: 30, name: '四川' },
                    { value: 40, name: '湖北' }
                ],
                //文字调整
                label: {
                    fontSize: 10,
                    show: true, // 显示文字2024
                    formatter: function (arg) {
                      // console.log(arg)
                      // return `${arg.name} ${arg.value}元\n ${arg.percent}%`
                      //return arg.name + '地区' + arg.value + '元\n' + arg.percent + '%'
                      return arg.name + '地区\n' + arg.value + '元\n' 
                    }
                },
                //引导线
                labelLine: {
                    length: 8,
                    length2: 10
                }
            }
        ],
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
    };
  //  alert(1);
    myechart2.setOption(option);

二、饼状图圆饼中心小圆

  // 百分比基于  图表DOM容器的半径
                radius: ['10%', '70%'],

三、放大圆环

 radius: ['50%', '70%'],