Echarts在线免费图表

 
            
const xData =  [
                '2019',
                '2020',
                '2021',
                '2022',
                '2023'
            ]
const dataValue = [16,8,18,10,9]
const sum = dataValue.reduce((acc, val) => acc + val);
// 平均值
let avg = (sum / dataValue.length).toFixed(0);
console.log(avg,'--')
// 多出来的
let extra = []
// 不足的
let lacking = []
for (let i = 0; i < dataValue.length; i++) {
  if (dataValue[i] > avg) {
    extra.push(dataValue[i]-avg);
    lacking.push(0)
    dataValue[i]=avg
  } else if (dataValue[i] < avg) {
    lacking.push(avg-dataValue[i]);
    extra.push(0)
  }
}
// let yData = [1]
option = {
        backgroundColor:'#999',
        legend:{
            show: true,
            left:"center",
            top:10,
            itemGap:30,
            itemWidth: 14,
            itemHeight:11,
            textStyle: {
            fontSize: 12,
                color: "#ffffff",
            },
        },
        // x轴的数据
        xAxis: [{
            data:xData,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: 'rgba(255, 255, 255, .5)'
                }
            },
            axisLabel: {
                interval: 0,
                fontSize: 12,
                color: "#FFFFFF"
            },
            axisTick: {
                show: false, // 显示坐标轴刻度线
            }
        }],
        yAxis: {
            type: 'value',
            // name:'时长：天',
            // nameGap:30,
            // nameTextStyle: {
            //     color: "#ffffff",
            //     fontWeight: 400,
            //     fontSize: 16,
            // },
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: 'rgba(255, 255, 255, .5)'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255, 255, 255, .35)',
                    type: 'dotted'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                fontSize: 14,
                color: "#FFFFFF"
            },
        },
        // 可用于指定统计图类型
        series: [
           
            {
                name: '销量',
                type: 'bar',
                barWidth:25,
                stack: 'user',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#008DFF"
                            },
                            {
                                offset: 1,
                                color: "#07ECFF"
                            }
                        ])
                    }
                },
               //  平均值分割线
                markLine: {
                    silent: true,
                    symbol: "none",
                    lineStyle: {
                        color: "#fff",
                    },
                    itemStyle: {
                     normal: {
                        label: {
                           position: "insideEndTop",
                           color: "#fff",
                           fontSize: 19.5,
                           fontFamily: "Source Han Sans CN",
                           fontWeight: 'medium',
                           formatter: ""
                        }
                     }
                  },
                  data: [
                        {
                            yAxis: avg,
                        },
                       
                    ],
                },
                data: dataValue
            },
            // 平均值图例
             {
                name: '平均值',
                type: 'line',
                itemStyle: {
                    normal: {
                        color:'#fff'
                    }
                },
            },
            // 多出数值
            {
                name: '',
                type: 'bar',
                barWidth:25,
                stack: 'user',
                itemStyle: {
                    normal: {
                        color:'#0077ff'
                    }
                },
                label: {
                    show: true,
                    position: "top",
                    distance: 0,
                    color: "#0077ff",
                    formatter: (params)=>{
                        return params.value===0?'':'+'+params.value+'次'
                    },
                },
                data: extra
            },
            // 缺少数值
            {
                name: '',
                type: 'bar',
                barWidth:25,
                stack: 'user',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#fff"
                            },
                            {
                                offset: 1,
                                color: "#fff"
                            }
                        ])
                    }
                },
                label: {
                    show: true,
                    position: "top",
                    distance: 0,
                    color: "#fff",
                    formatter: (params)=>{
                        return params.value===0?'':'-'+params.value+'次'
                    },
                },
                data: lacking
            },
        ]
    }