波形图echarts pictorialBar配置项内容和展示

创意波形图

      const chartData = [
    4.028795613748278,
    -2.759675937963586,
    -3.606772432905978,
    -3.646540379439578,
    -4.171585942500034,
    -3.8227603878451255,
    4.403568486105485,
    -0.12335113104214646,
    4.183745866002666,
    -3.7317136315210075,
    4.011299823712182,
    4.167340008586122,
    1.4718647752560354,
    2.9151398205722256,
    3.426026966086695,
    1.8732520326900914,
    1.9289967842933842,
    -4.086914016127459,
    -0.45794389080831444,
    -4.217193763819096,
    -2.8807063863891536,
    -1.38056219141649,
    -3.8575345657921045,
    4.454260708594953,
    3.536265146667592,
    -0.4743023432867388,
    -0.10824581422484769,
    1.2440330592272142,
    1.142209171659454,
    -2.8754625258773903,
    2.2698677390383937,
    0.7979239154804252,
    4.158242661613549,
    1.3209889820284948,
    -4.106653493421857,
    -3.9796773480876024,
    2.6402042030299877,
    -1.841914014355046,
    -3.6323527232656017,
    3.1819565719100362,
    -3.548088262959901,
    3.2102192794462203,
    0.8305717257738876,
    -3.668255333416719,
    1.2451412189141653,
    2.7964335418342534,
    -0.9174344644054044,
    1.3365698472304,
    -4.6669962899816735,
    -0.743111640756291,
    -4.659170597911602,
    -0.7671618083941656,
    2.0344779684257475,
    -2.2137431841636257,
    -2.495859026194134,
    -2.3960694395966176,
    2.1720060201239577,
    3.8306416158490797,
    -4.944625697666605,
    -0.4529838677676379,
    3.0860706886835776,
    3.6848585549665147,
    -3.085787145733052,
    -4.504058491880947,
    3.102009235217531,
    1.807170424589879,
    3.751744633217733,
    1.3832294062206851,
    -4.4851692844609765,
    4.336194103910236,
    -0.3416543201309641,
    -0.0427068459782487,
    -0.8336444059325099,
    4.2810308646698125,
    0.6696523264037579,
    -4.9319464107739925,
    0.9853256197034832,
    -0.3006531261508427,
    -1.5858737096564757,
    2.4809116900998185,
    0.605080610134141,
    0.14800870424485968,
    -2.0488711855424424,
    1.503032959287438,
    4.602058046270421,
    -2.261810201682468,
    -2.1351111185867855,
    1.0692603330576311,
    -1.189936755670502,
    -4.259427896991717,
    3.860811673417157,
    2.8448322086616895,
    -1.7647701835152985,
    1.2760951866729808,
    3.1242683413836336,
    -1.7713734602301723,
    0.33338080081211974,
    3.7685695026839783,
    -0.370095826368404,
    -0.5355287869104419,
    4.375767655616611,
    -1.981230010118038,
    4.559493409388886,
    -1.2841368891750449,
    -3.785952680965756,
    4.905647519298371,
    1.9570603446624757,
    -0.010207667049744185,
    -0.8817688897844156,
    2.8225754134868364,
    3.9677611213929853,
    -3.7864241620941996,
    -1.2121038395990102,
    1.508444368165771,
    2.033608492546468,
    -2.9155347877894777,
    4.8812287936456,
    1.3677530487358447,
    -0.9199282921840135,
    -2.108463638196547,
    3.299906207476202,
    -4.638705741377665,
    -0.7983425688495749,
    0.31838526291926517,
    -0.47064356341164126,
    -3.1957854801042163,
    1.9089256837825785,
    0.28535139572505086,
    -2.929462182489715,
    0.2109005635633876,
    0.1726045647981822,
    -2.6282593713683267,
    1.7106069023179993,
    -2.7261868990865024,
    -4.242817747344352,
    -3.857768529955863,
    -3.36973529360179,
    -1.4106351910782644,
    3.6791189594095597,
    -0.9285140877436127,
    -4.985506877797336,
    -4.579628246595018,
    1.5038391057808354,
    -3.6434572281888977,
    -4.192060751755021,
    2.0006662846457046,
    0.6258275714259032,
    -2.228365662617615,
    2.036301357733452,
    -2.1895137934279685,
];


option = {
    title: {
        text: '波形图',
    },
    grid: {
        left: '5%',
        right: '5%',
        top: '10%',
        bottom: '20%'
    },
    tooltip: {},
    xAxis: [{
        data: Array(...chartData).map((val, index) => `${index + 1}m`),
        show: true,
        splitLine: false,
        axisLine: {
            show: true,
            onZero: false,
            lineStyle: {
                color: '#999',
            },
        },
        axisTick: {
            length: 7,
            inside: true,
            lineStyle: {
                width: 5,

            },
        },
    }, {
        show: true,
        splitLine: false,
        axisLine: {
            show: true,
            onZero: false,
            lineStyle: {
                color: '#999',
            },
        },
    }],
    yAxis: [{
        axisLabel: {
            show: false,
        },
        splitLine: false,
        axisTick: false,
        show: true,
        interval: 10,
        axisLine: {
            show: true,
            onZero: false,
            lineStyle: {
                color: '#999',
            },
        },
    }, {
        axisLabel: {
            show: false,
        },
        splitLine: false,
        axisTick: false,
        show: true,
        interval: 10,
        axisLine: {
            show: true,
            onZero: false,
            lineStyle: {
                color: '#999',
            },
        },
    }],
    series: [{
            name: '正常',
            type: 'pictorialBar',
            symbol: 'circle',
            symbolRepeat: true,
            // symbolSize: [60, 8],
            symbolMargin: 0.5,
            itemStyle: {
                normal: {
                    color: '#3fbbff',
                },

            },
            label: {
                show: false,
                position: 'top',
                color: '#fff',
                formatter: '{c}%',
            },
            data: chartData,
        },
        {
            name: '正常',
            type: 'pictorialBar',
            symbol: 'circle',
            symbolRepeat: true,
            // symbolSize: [60, 8],
            symbolMargin: 0.5,
            itemStyle: {
                normal: {
                    color: {
                        colorStops: [{
                            offset: 0,
                            color: '#fff', // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#efefef30', // 100% 处的颜色
                        }],
                    },
                },

            },
            label: {
                show: false,
                position: 'top',
                color: '#fff',
                formatter: '{c}%',
            },
            data: chartData.map(value => value * (Math.random() - 0.5) * 2),
        }
    ],
};