使用echarts生成饼图时在数值后面加上单位显示

「爱情、让人受尽委屈。」 2022-11-03 00:58 800阅读 0赞

### 使用echarts生成饼图时在数值后面加上单位显示 ###

*   *  饼状图显示数值和单位

通过echarts制作饼图，鼠标移动到对应的扇形看到数值和百分比，怎样在数值后面加上单位呢，例如 任务分配：15.498155分钟(34.23%)，series.data 数组里只有value和name，这个“分钟”单位怎样加呢？

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70]  
tooltip有手动formatter的方法，你想变成啥样就啥样  
![在这里插入图片描述][20210226104157935.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 2]

## 饼状图显示数值和单位 ##

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        
        <script src="../node_modules/echarts/dist/echarts.min.js"></script>
    </head>
    
    <body>
        
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ title: { text: '2019年入职首月验收', x: 'center', textStyle: { "color": "#8ECBFF" }, }, // 提示框设置 tooltip: { // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis' trigger: 'item', // showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms // hideDelay: 20, // 隐藏延迟，单位ms // backgroundColor: 'rgba(255,0,0,0.7)', // 提示框背景颜色 textStyle: { fontSize: '8px', color: '#000' // 设置文本颜色 默认#FFF }, // formatter设置提示框显示内容 // {a}指series.name {b}指series.data的name // {c}指series.data的value {d}%指这一部分占总数的百分比 formatter: '{a} <br/>{b} : {c}个 ({d}%) ' }, legend: { orient: 'vertical', // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直） // top: 5, x:'right', // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） y:105, // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）,另外 // 经多次尝试，发现top优先级高于y itemWidth: 40, // 设置图例图形的宽 itemHeight: 40, // 设置图例图形的高 data: ['视频广告', '联盟广告', '邮件营销', '直接访问','搜索引擎'], textStyle: { //图例文字的样式 color: '#8ECBFF', fontSize: 13 }, // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔 // itemGap: 30, backgroundColor: '#pink', // 设置整个图例区域背景颜色 }, series: [ { name: '访问来源', // 图型半径 默认radius: '50%', 设置饼状图大小为100%时，最大直径=整个图形的min(宽，高) radius: '55%', //radius: ['30%', '60%'], // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小 type: 'pie', // pie有几种画图角度，有angle、area roseType: 'angle', center: ['50%', '50%'], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位 // 设置值域的标签 label: { normal: { position: 'outer', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）' // formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ，默认显示{b} // {a}指series.name {b}指series.data的name // {c}指series.data的value {d}%指这一部分占总数的百分比 formatter: '{b}:{c}' } }, // 设置值域的那指向线 labelLine: { normal: { show: true // show设置线是否显示，默认为true，可选值：true ¦ false } }, data: [ { value: 235, name: '视频广告' }, { value: 274, name: '联盟广告' }, { value: 310, name: '邮件营销' }, { value: 335, name: '直接访问' }, { value: 400, name: '搜索引擎' } ] } ] }); </script>
    </body>
    
    </html>

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 3]  
增加单位

series: [
                    { 
                        name: flow_tile,
                        type: 'pie',
                        radius: '50%',
                        data: [{  value: 1, name: '新疆维吾尔自治区' },
                            {  value: 437, name: '湖北省' },
                            {  value: 494, name: '北京市' },
                            {  value: 29, name: '河北省' }
                           ],
                        emphasis: { 
                            itemStyle: { 
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        // 设置值域的标签
                        label: { 
                            normal: { 
                                position: 'outer', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                                // formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ，默认显示{b}
                                // {a}指series.name {b}指series.data的name
                                // {c}指series.data的value {d}%指这一部分占总数的百分比
                                formatter: '{b}:{c}' + '单'
                            }
                        },
                    }
                ]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 4]

可以看到图形中有标题、图例、饼状图、标签、标签线、提示框等几部分，各部分的简单设置都可以从代码中学习验证，关于饼图的基本知识点这里都有了涉及。

除此，我们可以对饼状图的阴影做简单的设定，代码如下

myChart.setOption({ 
                series: [
                    { 
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        roseType: 'angle',
                        itemStyle: { 
                            // 阴影的大小
                            shadowBlur: 1200,
                            // 阴影水平方向上的偏移
                            shadowOffsetX: 250,
                            // 阴影垂直方向上的偏移
                            shadowOffsetY: 5,
                            // 阴影颜色
                            shadowColor: 'rgba(25, 55, 186, 185)'
                        },
                        data: [
                            {  value: 235, name: '视频广告' },
                            {  value: 274, name: '联盟广告' },
                            {  value: 310, name: '邮件营销' },
                            {  value: 335, name: '直接访问' },
                            {  value: 400, name: '搜索引擎' }
                        ]
                    }
                ]
            });

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70]: /images/20221024/07d687f005ae485395e8a876591a90f4.png
[20210226104157935.png]: /images/20221024/a0cdf53359704b0e9b41b2fe4bb4dc1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 1]: /images/20221024/e9b2b75bef954139bf66c4bc8dc8c1d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 2]: /images/20221024/919b9cc5347145919e34b599c25a26b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 3]: /images/20221024/da606788667346fe90e7693cce94a439.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 4]: /images/20221024/d7559b6868204a9987b55307c14d93cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 5]: /images/20221024/73694fc94bdc45dfa73db9581f80a538.png