Echarts在线免费图表

 
            var captions = ['国家级', '省部级', '其他'];
var values = [50, 73, 72];

function calMax(arr) {
   let max = 0;
   arr.forEach((el) => {
      el.forEach((el1) => {
         if (!(el1 === undefined || el1 === '')) {
            if (max < el1) {
               max = el1;
            }
         }
      });
   });
   let maxint = Math.ceil(max / 9.5);
   //不让最高的值超过最上面的刻度
   let maxval = maxint * 10;
   //让显示的刻度是整数
   return maxval;
}

var max = Math.ceil(calMax([values]) / 100) * 100;

var option = {
   tooltip: {
      trigger: "axis",
      axisPointer: {
         type: 'none'
      },
      position: function (point, params, dom, rect, size) { // 提示框位置
         let x = 0;
         let y = 0;
         if (point[0] + size.contentSize[0] + 10 > size.viewSize[0]) {
            x = point[0] - size.contentSize[0] - 10
         } else {
            x = point[0] + 10
         }
         if (point[1] + size.contentSize[1] + 10 > size.viewSize[1]) {
            y = point[1] - size.contentSize[1] - 10
         } else {
            y = point[1] + 10
         }
         return [x, y];
      },
      formatter: params => {
         const {
            name,
            data,
         } = params[0];
         return `
            <div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:12px;">${name}年</div>
            <div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:4px;">到账经费：${data}万元</div>`
      },
      extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
   },
   grid: {
      top: '10%',//上边距
      right: '20',//右边距
      left: '20',//左边距
      bottom: '10%',//下边距
      containLabel: true,
   },
   xAxis: {
      type: 'category',
      data: captions,
      axisTick: {
         show: false //隐藏X轴刻度
      },
      axisLine: {
         lineStyle: {
            color: "#CCCCCC"
         }
      },
      axisLabel: {
         show: true,
         textStyle: {
            color: 'rgba(0,0,0,0.65)',
            fontSize: 14,
            fontFamily: 'Source Han Sans CN-Regular',
         }
      },
   },
   yAxis: [{
      type: 'value',
      name: "单位：项",
      min: 0,
      max: max,
      interval: max / 5, //  平均分为5份
      splitNumber: 5,
      nameTextStyle: {
         color: 'rgba(0,0,0,0.65)',
         fontSize: 14,
         fontFamily: 'Source Han Sans CN-Regular',
         align: "left",
         verticalAlign: "center",
      },
      axisLabel: {
         color: 'rgba(0,0,0,0.65)',
         textStyle: {
            fontSize: 14
         },
      },
      axisLine: {
         show: false,
         lineStyle: {
            color: 'rgba(223, 223, 223, 1)',
         }
      },
      axisTick: {
         show: false
      },
      splitLine: {
         lineStyle: {
            color: 'rgba(223, 223, 223, 1)',
            type: "dashed",
         }
      }
   }],
   series: [{
      type: 'bar',
      data: values,
      itemStyle: {
         color: "#5B8FF9",
      },
      barWidth: 16,
   }]
};