Apache ECharts 饼图中心图片、空心圆、图标定位。

最新推荐文章于 2024-08-16 18:21:02 发布

SynchronizedThis

最新推荐文章于 2024-08-16 18:21:02 发布

阅读量1.1k

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/SynchronizedUser/article/details/124859409

版权

中心添加图片

option4 = {
    color: colors,
    tooltip: {
        trigger: 'item'
    },
    graphic: {//图形中间图片
        elements: [{  //这里图片添加样式
            type: "image",
            style: {  //图片的大小和地址
                 image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F27%2F20150927124837_KeRUL.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651219937&t=cd810aaa55f2b18881793b0d577aac9d",//你的图片地址
                 width: 83,
                 height: 83,
             },
            left: "26%", //定位 可以用 px 和百分比
            top: "middle",
        }],
    },

定位图标

legend: {
    left: "190",
    right: '-10',
    itemWidth: 12,  //宽
    itemHeight: 12, //高
    icon: 'circle',
    top: '20%',
    y: "center",
    padding: [20, 10, 20, 10], //例 距上⽅距离，距右⽅距离，距下⽅距离，距左⽅距离
    data: ["闯红灯", "超速", "醉酒驾驶", "违停", "无证件驾驶", "逆行", "未按规定⻋道⾏驶"],
    backgroundColor: '#F8FAFC',
    textStyle: {
        color: '#A3B4CC',
    }
},

设置空心圆

series: [
    {
        name: '重点违法行为',
        type: 'pie',
        avoidLabelOverlap: false,
        // 饼图内圈和外圈大小
        radius: ['66%', '85%'],
        // 饼图位置参数
        center: ["25%", "53%"],

data: [ //"超速", "闯红灯", "违停", "逆行", "未按规定让行", "醉酒驾驶", "无人驾驶"
    {value: 104, name: '闯红灯'},
    {value: 352, name: '超速'},
    {value: 235, name: '醉酒驾驶'},
    {value: 352, name: '违停'},
    {value: 480, name: '无证驾驶'},
    {value: 352, name: '逆行'},
    {value: 384, name: '未按规定⻋道⾏驶'}
]