Echarts在线免费图表

 
            var captions = ['2017', '2018', '2019', '2020', '2021', '2022'];
var values1 = [50, 73, 72, 60, 55, 80]; // 柱状
var values2 = [50, 73, 72, 60, 55, 80]; // 折线

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 max1 = Math.ceil(calMax([values1]) / 100) * 100;
var max2 = Math.ceil(calMax([values2]) / 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;'
   },
   legend: {
      data: ['项目数量', '到账经费'],
      top: "12",
      left: '24',
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 20,
      textStyle: {
         fontSize: 14,
         color: "rgba(0, 0, 0, 0.45)",
         fontFamily: 'Source Han Sans CN-Regular',
         padding: [0, 0, 0, 4]
      }
   },
   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: max1,
      interval: max1 / 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",
         }
      }
   },
   {
      type: 'value',
      name: "到账经费：万元",
      position: "right",
      min: 0,
      max: max2,
      interval: max2 / 5, //  平均分为5份
      splitNumber: 5,
      nameTextStyle: {
         color: 'rgba(0,0,0,0.65)',
         fontSize: 14,
         fontFamily: 'Source Han Sans CN-Regular',
         align: "right",
         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',
      name: "项目数量",
      data: values1,
      itemStyle: {
         color: "#5B8FF9",
      },
      barWidth: 16,
   },
   {
      name: '到账经费',
      type: 'line',
      data: values2,
      yAxisIndex: 1,
      symbolSize: 10, //标记的大小
      lineStyle: {
         color: "#F6BD16",
         width: 3,
      },
      itemStyle: {
         //折线拐点标志的样式
         color: "#F6BD16",
         borderColor: '#F6BD16',
         borderWidth: 3,
      },
      // smooth: true
   }]
};