27

echarts一个画图区域内可以实现下面的效果吗?

 3 years ago
source link: https://www.oschina.net/question/4213249_2320747
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
echarts一个画图区域内可以实现下面的效果吗? - OSCHINAtcxu
昨天 19:23

up-adbff73c5d8c29cc54dcf0fbb2a99b7c1fd.png

做以下练习:
打开网页:https://echarts.apache.org/next/examples/zh/editor.html?c=pie-nest

1.  去掉 

label: {
      ....         
            },

2.  将  series: [....] 中的 :中心饼图和环状圈的定义,

 {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
                position: 'inner',
                fontSize: 14,
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1548, name: '搜索引擎'},
                {value: 775, name: '直达'},
                {value: 679, name: '营销广告', selected: true}
            ]
        },
        {
            name: '访问来源',
            type: 'pie',
            radius: ['45%', '60%'],
            labelLine: {
                length: 30,
            },
            
            data: [
                {value: 1048, name: '百度'},
                {value: 335, name: '直达'},
                {value: 310, name: '邮件营销'},
                {value: 251, name: '谷歌'},
                {value: 234, name: '联盟广告'},
                {value: 147, name: '必应'},
                {value: 135, name: '视频广告'},
                {value: 102, name: '其他'}
            ]
        }

在 [ ] 中 复制粘贴成 6 组。
3.  将  series: [....] 中的 :中心饼图和环状圈的定义数据分别按下列要求加以添加/修改:

中心饼图 :
radius: [0, '15%'],
环状圈:
radius: ['20%', '25%'],

中心饼图,以及环状圈 的 中心位置:
 center: ['25%', '30%'],
 center: ['50%', '30%'],
 center: ['75%', '30%'],
 center: ['25%', '80%'],
 center: ['50%', '80%'],
 center: ['75%', '80%'],

就可以在一页里,同时显示楼主所要的 6 个 "中心饼图 + 环状圈"。

4.  向  legend: { ...}  添加:
        orient: 'vertical',
        right: 10, 
5.   最后,将其余的数据,依次改成楼主自身的数据。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK