Echarts 柱状图警报闪烁效果

echarts

Echarts 柱状图警报闪烁效果,已将代码以及github库贴出,闪光的部分单独引用了一个库。

Echarts 柱状图警报闪烁效果

id

1

安装依赖

在项目根目录下使用pnpm安装依赖:

pnpm install echartsfg@git+https://gitee.com/yelingkong/echarts-faguang.git

代码

const option = {
            color: ['rgba(0, 204, 255, 1)', 'rgba(39, 120, 255, 1)'],
            grid: {
                top: FontChart(30),
                bottom: FontChart(20),
                left: FontChart(20),
                right: FontChart(20),
                containLabel: true
            },
            tooltip: {
                show: true,
                formatter: function (params) {
                    // params.name / params.seriesName / params.value 都是常用字段
                    return params.name + '<br/>' + params.seriesName + ': ' + params.value;
                }
            },
            xAxis: {
                data: xAxisData,
                axisLine: { show: true, lineStyle: { color: '#2487dc' } },
                axisTick: { show: false },
                axisLabel: { color: '#fff', fontSize: FontChart(14) }
            },
            yAxis: [{
                axisLine: { show: true, lineStyle: { color: '#2487dc' } },
                axisTick: { show: false },
                axisLabel: { color: '#fff', fontSize: FontChart(14) },
                splitLine: { show: true, lineStyle: { color: '#2487dc', type: 'dashed' } }
            }],
            series: [{
                name: '零件数量',
                type: 'bar',
                barWidth: 20,
                zlevel: 2,
                data: data,
                label: {
                    show: false,
                    fontSize: 18,
                    fontWeight: 'bold',
                    color: '#ffffff',
                    position: 'top'
                }
            }]
        };

完整实例代码

相关文件下载地址
喜欢
Echarts 柱状图警报闪烁效果