Echarts在线免费图表

 
            let XData = ['0-17', '18-30', '31-50', '51-80', '80以上']
let YData = [20, 120, 30, 80, 90, 170]
option = {
   grid: {
          top: "10%",
          width: "87%", // 宽度
          height: "82%"// 高度
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#fff',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          padding: 0,
          formatter:(params)=> {
            return `<div style="padding: 8px;min-width: 100px;border-radius: 5px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
                            ${params[0].axisValueLabel}
                            <div style="display: flex;justify-content: space-between;align-items: center;"><p><span style="display: inline-block;margin-right:5px;width: 10px;height: 10px;border-radius: 50%;background-color: rgba(42, 130, 228, 1)"></span>数据</p>   <span>${params[0].value}</span></div>
                       </div>`
          },
          textStyle: {
            color: 'rgba(0, 0, 0, .8)'
          }
        },

        xAxis: {
          type : 'category',
          splitLine: {show:false},
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 0, 0, .5)'
            }
          },
          axisTick: {
            lineStyle: {
              color: 'rgba(0, 0, 0, .5)'
            }
          },
          data : XData
        },
        yAxis: {
          type : 'value',
          max:'250',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(0, 0, 0, .5)',
            }
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize:16,
          }
        },
        series: [
          {
            name: '生活费',
            type: 'bar',
            stack: '总量',
            barWidth: 25,
            itemStyle: {
              color: 'rgba(42, 130, 228, 1)'
            },
            data: YData
          }
        ]
};