请选择 进入手机版 | 继续访问电脑版

绘图杂记【10】echarts 圆环图+图片

[复制链接]
云韵 发表于 2021-1-2 19:45:26 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
最终图片

图片

剪切为圆形图片
https://www.yasuotu.com/editor



大概
http://www.celerstar.com/ProduceDisplay/LogoCreater/round/index.html?ref=appinn

图片转换base64
http://tool.chinaz.com/tools/imgtobase/

复制编码,放入echarts代码中

完整代码
11
  1. option = {    toolbox: {            show: true,            feature: {                dataView: {show:true},                saveAsImage: {                    //excludeComponents :['toolbox'],                    pixelRatio: 5                }            }        },      title: {        x: 'right',        y: 'bottom',        padding: 10      },      tooltip: {        trigger: 'item',        formatter: ' {b}: {c} ({d}%)',        backgroundColor: 'rgba(255,255,255,0.9)',        borderColor: 'rgba(210,210,210,0.9)',        borderWidth: 1,        padding: 15,        textStyle: {          color: '        #717171'        }      },      series: [                           {            type: 'graph',            data: [                {                name: '',                value: [100, 100],                                symbol: 'image:// 图片base64',                fixed:true,                x: 0,                y: 0,                //category: 0,                symbolSize: 205,},]        },         {          name: '访问泉源',          type: 'pie',//范例:饼图          selectedMode: 'single',          radius: [0, '40%'],          //  radius: '60%', //图的巨细          center: ['50%', '50%'], //图的位置,隔断左跟上的位置          // label: {          //   position: 'inner'          // },          labelLine: {            show: false          },                    label: { normal: { show: true, position: 'inner', formatter: '{b}\n{d}%' } }        },        //母图        {          name: '访问泉源',          type: 'pie',          radius: ['40%', '65%'],          label: {            formatter: '{b|{b}}\n{hr|}\n {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: 15,                align: 'center'              },              // abg: {              //     backgroundColor: '#333',              //     width: '100%',              //     align: 'right',              //     height: 22,              //     borderRadius: [4, 4, 0, 0]              // },              hr: {                borderColor: '#aaa',                width: '100%',                borderWidth: 0.5,                height: 0              },              b: {                fontSize: 12,                lineHeight: 20,                align: 'center'              },              per: {                color: '#eee',                backgroundColor: '#334455',                padding: [2, 4],                borderRadius: 2              }            }          },                          data: [            //母图            {              value: 335, //占比              name: '种别11', //形貌项              itemStyle: {                color: '#FFCC99'              }            },            {              value: 310,              name: '种别21',              itemStyle: {                color: '#389FFD'              }            },            {              value: 369,              name: '种别22',              itemStyle: {                color: '#34C9C9'              }            },            {              value: 1048,              name: '种别31',              itemStyle: {                color: '#ff4777'              }            },            {              value: 500,              name: '种别32',              itemStyle: {                color: '#E7BCF3'              }            }          ],          // label: { normal: { show: true, position: 'inner', formatter: '{b}\n{d}%' } },          itemStyle: {            borderWidth: 5,            borderColor: '#fff',            normal: {              label: {                // show:ture,                formatter: '{b}:{c}\n ({d}%)',                textStyle: {                  color: 'rgb(130,130,130)',                  fontSize:16                }              }            }          }        }      ]    }
复制代码

  1. option = {     backgroundColor: '#080b30',    toolbox: {            show: true,            feature: {                dataView: {show:true},                saveAsImage: {                    //excludeComponents :['toolbox'],                    pixelRatio: 5                }            }        },    legend: {        orient : 'vertical',        x : 'right',        y : '0',        itemWidth:30,//图例的宽度        itemHeight:10,//图例的高度        color:['#C1232B','#B5C334'],        textStyle:{//图例文字的样式            color:'#FFFFFF',            fontSize:17        }    },      series: [                   {            type: 'graph',            data: [                {                name: '',                value: [1020, 100],                symbol: 'image://data:image/png;base64,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',                fixed:true,                x: 0,                y: 0,                //category: 0,               symbolSize: [220, 260]                                                        },]        },        {        label: {                        normal: {                            show: false,                            position: 'center'                        },                                           },          center: ['48%', '47%'],          name: '访问泉源',          type: 'pie',          radius: ['20%', '35%'],          data:[            //母图            {              value: 335, //占比              name: '种别1', //形貌项              itemStyle: {                color: '#FFCC99'              }            },            {              value: 310,              name: '种别2',              itemStyle: {                color: '#389FFD'              }            },            {              value: 369,              name: '种别3',              itemStyle: {                color: '#34C9C9'              }            },            {              value: 1048,              name: '种别4',              itemStyle: {                color: '#ff4777'              }            },            {              value: 500,              name: '种别5',              itemStyle: {                color: '#E7BCF3'              }            }          ],                     }      ]    }
复制代码
来源:https://blog.csdn.net/qq_42374697/article/details/112058969
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )