使用ECHARTS插件開發前端數據看板無法接收JSON格式數據

代碼塊如下
(function () {
//1實例化對象
jQuery(document).ready(function ($) {

    var myChart = echarts.init(document.querySelector('.line .chart'));
    //2.指定配置項和數據
    let angle = 0; //角度,用来做简单的动画效果的
    let value = [];
    var option = {
        title: {
            text: '{a|' + value + '}',
            x: 'center',
            y: 'center',
            textStyle: {
                rich: {
                    a: {
                        fontSize: 36,
                        color: 'rgba(10,219,250,1)',
                        fontFamily: 'Oswald',
                        fontWeight: 'bold',
                    },
                },
            },
        },
        series: [
             // 占比环
            {
                name: '吃猪肉',
                type: 'pie',
                radius: ['48%', '30%'],
                silent: true,
                clockwise: true,
                startAngle: 90,
                z: 0,
                zlevel: 0,
                label: {
                    normal: {
                        position: 'center',
                    },
                },
                data: {
                        value: value,
                        name: '1',
                        itemStyle: {
                            shadowColor: 'rgba(25,163,223,1)',
                            shadowBlur: 30,
                            shadowOffsetX: '0',
                            shadowOffsetY: '0',
                            color: {
                                // 完成的圆环的颜色
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(25,163,223,1)', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(25,163,223,1)', // 100% 处的颜色
                                    },
                                ],
                            },
                        },
                    },
            },
            // 运动环
            {
                name: 'ring5',
                type: 'custom',
                coordinateSystem: 'none',
                renderItem: function (params, api) {
                    return {
                        type: 'arc',
                        shape: {
                            cx: api.getWidth() / 2,
                            cy: api.getHeight() / 2,
                            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.9,
                            startAngle: ((0 + angle) * Math.PI) / 180,
                            endAngle: ((90 + angle) * Math.PI) / 180,
                        },
                        style: {
                            stroke: 'rgba(10,219,250,1)',
                            fill: 'transparent',
                            lineWidth: 3,
                        },
                        silent: true,
                    };
                },
                data: [0],
            },
            // 运动环
            {
                name: 'ring5',
                type: 'custom',
                coordinateSystem: 'none',
                renderItem: function (params, api) {
                    return {
                        type: 'arc',
                        shape: {
                            cx: api.getWidth() / 2,
                            cy: api.getHeight() / 2,
                            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.81,
                            startAngle: ((270 + -angle) * Math.PI) / 180,
                            endAngle: ((40 + -angle) * Math.PI) / 180,
                        },
                        style: {
                            stroke: 'rgba(10,219,250,1)',
                            fill: 'transparent',
                            lineWidth: 3,
                        },
                        silent: true,
                    };
                },
                data: [0],
            },
            // 分割环
            {
                name: '',
                type: 'gauge',
                radius: '68%',
                center: ['50%', '50%'],
                startAngle: -180,
                endAngle: 179.9999,
                splitNumber: 24,
                hoverAnimation: true,
                axisTick: {
                    show: false,
                },
                splitLine: {
                    length: 10,
                    lineStyle: {
                        width: 4,
                        color: 'rgba(25,163,223,1)',
                    },
                },
                axisLabel: {
                    show: false,
                },
                pointer: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        opacity: 0,
                    },
                },
                detail: {
                    show: false,
                },
                data: [
                    {
                        value: 0,
                        name: '',
                    },
                ],
            },
            // 外面100圆环
            {
                type: 'pie',
                radius: ['70%', '70.5%'],
                hoverAnimation: false,
                clockWise: false,
                itemStyle: {
                    normal: {
                        shadowBlur: 20,
                        shadowColor: 'rgba(25,163,223,1)5',
                        color: 'rgba(25,163,223,1)',
                    },
                },
                label: {
                    show: false,
                },
                data: [100],
            },
            // 最外虚线环
            {
                type: 'pie',
                radius: ['75%', '74%'],
                hoverAnimation: false,
                clockWise: false,
                z: 0,
                zlevel: 0,
                itemStyle: {
                    normal: {
                        shadowBlur: 20,
                        shadowColor: 'rgba(25,163,223,1)',
                        color: 'rgba(25,163,223,1)',
                    },
                },
                label: {
                    show: false,
                },
                data: [100],
            },
            // 最外虚线分割环
            {
                name: '',
                type: 'gauge',
                radius: '75%',
                center: ['50%', '50%'],
                startAngle: -180,
                endAngle: 179.999,
                splitNumber: 64,
                hoverAnimation: true,
                axisTick: {
                    show: false,
                },
                splitLine: {
                    length: 4,
                    lineStyle: {
                        width: 4,
                        color: 'rgba(10,219,250,1)',
                    },
                },
                axisLabel: {
                    show: false,
                },
                pointer: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        opacity: 0,
                    },
                },
                detail: {
                    show: false,
                },
                data: [
                    {
                        value: 0,
                        name: '',
                    },
                ],
            }],
    };
    
    //获取圆上面某点的坐标(x0,y0表示坐标,r半径,angle角度)
    function getCirlPoint(x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
        return {
            x: x1,
            y: y1,
        };
    }
    function draw() {
        angle = angle + 3;
        myChart.setOption(option, true);
        //window.requestAnimationFrame(draw);
    }
    setInterval(function () {
        //用setInterval做动画感觉有问题
        draw();
    }, 100);
    
    
    //3.把配置項給實例對象
    myChart.setOption(option);
    //获取和处理数据
    $.getJSON("data/data_line.json", function (json) {
        var d = json.linedata;
        var xValue = [];
        // 循环获取名称
        for (var i = 0; i < d.length; i++) {
            xValue.push(d[i].linevalue);
        }
        // 将数据添加到数据图表中
        myChart.setOption({
             series: {
                 // 根据名字对应到相应的系列
                 name: '吃猪肉',
                     data:{
                       value:xValue
                      }
            //     // }
                
              }
        });
    });
});
//4.圖表自適應
window.addEventListener("resize", function () {
    myChart.resize();
});

})();
JSON數據格式如下
"linedata": [
{
"linevalue":"運行中"

    } 
],
运行结果

img

我想要达到的结果

img