动态柱状图echarts 柱状配置项内容和展示

动态柱状图

      var provincialData = [{
        id: "089",
        name: "a",
        value: 0
    },
    {
        id: "088",
        name: "r",
        value: 0
    },
    {
        id: "070",
        name: "r",
        value: 0
    },
    {
        id: "087",
        name: "r",
        value: 0
    },
    {
        id: "084",
        name: "r",
        value: 0
    },
    {
        id: "079",
        name: "h",
        value: 0
    },
    {
        id: "086",
        name: "3",
        value: 0
    },
    {
        id: "085",
        name: "rt",
        value: 0
    },
    {
        id: "081",
        name: "y",
        value: 0
    },
    {
        id: "083",
        name: "hf",
        value: 0
    },
    {
        id: "050",
        name: "dhf",
        value: 0
    },
    {
        id: "059",
        name: "dh",
        value: 0
    },
    {
        id: "051",
        name: "df",
        value: 0
    },
    {
        id: "074",
        name: "dh",
        value: 0
    },
    {
        id: "071",
        name: "q",
        value: 0
    },
    {
        id: "075",
        name: "w",
        value: 0
    },
    {
        id: "038",
        name: "x",
        value: 0
    },
    {
        id: "030",
        name: "c",
        value: 0
    },
    {
        id: "036",
        name: "k",
        value: 0
    },
    {
        id: "034",
        name: "l",
        value: 0
    },
    {
        id: "031",
        name: "oi",
        value: 0
    },
    {
        id: "000",
        name: "",
        value: 0
    },
    {
        id: "076",
        name: "p",
        value: 0
    },
    {
        id: "017",
        name: "i",
        value: 0
    },
    {
        id: "097",
        name: "u",
        value: 0
    },
    {
        id: "090",
        name: "y",
        value: 0
    },
    {
        id: "091",
        name: "t",
        value: 0
    },
    {
        id: "010",
        name: "r",
        value: 0
    },
    {
        id: "019",
        name: "e",
        value: 0
    },
    {
        id: "018",
        name: "f",
        value: 0
    },
    {
        id: "013",
        name: "g",
        value: 0
    },
    {
        id: "011",
        name: "h",
        value: 0
    }
];
option = {
    // backgroundColor: "#000",
    grid: [{
        y2: "60%",
    }, {
        y: "42%",

    }],
    xAxis: [{
        type: 'category',
        show: false,
        boundaryGap: true,
        gridIndex: 0,
        data: (() => {
            const res = [];
            for (let len = 0; len < 30; len += 1) {
                res.push(len);
            }
            return res;
        })()
    }, {
        type: 'value',
        show: false,
        gridIndex: 1,
        boundaryGap: [0, 0.2],
    }],
    yAxis: [{
        type: 'value',
        scale: true,
        show: false,
        gridIndex: 0,
        boundaryGap: [0, 0.2]
    }, {
        type: 'category',
        gridIndex: 1,
        data: provincialData.map(item => item.name),
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: false,
            color: '#fff',
            interval: 0
        }
    }],
    series: [{
        name: '',
        type: 'bar',
        barWidth: 12,
        xAxisIndex: 0,
        yAxisIndex: 0,
        itemStyle: {
            normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1, [{
                            offset: 0,
                            color: '#00feff'
                        },
                        {
                            offset: 0.5,
                            color: '#027eff'
                        },
                        {
                            offset: 1,
                            color: '#0286ff'
                        }
                    ]
                )
            }
        },
        data: (() => {
            const res = [];
            for (let len = 30; len > 0; len -= 1) {
                res.push(0);
            }
            return res;
        })()
    }, {
        barWidth: 12,
        type: 'pictorialBar',
        symbol: 'roundRect',
        xAxisIndex: 1,
        yAxisIndex: 1,
        symbolRepeat: true,
        symbolSize: [12, 8],
        itemStyle: {
            normal: {
                barBorderRadius: [0, 30, 30, 0],
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1, [{
                            offset: 0,
                            color: '#00feff'
                        },
                        {
                            offset: 0.5,
                            color: '#027eff'
                        },
                        {
                            offset: 1,
                            color: '#0286ff'
                        }
                    ]
                )
            }
        },
        data: provincialData.map(item => item.value),
    }]
};
setInterval(() => {
    const axisData = option.xAxis[0].data;
    option.series[0].data.shift();
    option.series[0].data.push(Math.random() * 1000);
    option.xAxis[0].data.shift();
    option.xAxis[0].data.push(axisData[axisData.length - 1] + 1);
    for (var i = 0; i < provincialData.length; i++) {
        if (provincialData[i].name !== '') {
            provincialData[i].value = Math.random() * 1000;
        }
    }
    option.series[1].data = provincialData;

    myChart.setOption(option);
}, 300);