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

最新推荐文章于 2024-10-29 16:44:12 发布

原创最新推荐文章于 2024-10-29 16:44:12 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

此博客展示了如何使用Pie图表展示常见的交通违法行为，如闯红灯、超速、醉驾等，通过图形元素和数据详细分析了各类违规的比例，帮助理解交通安全形势。

中心添加图片

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: '未按规定⻋道⾏驶'}
]