Echarts在线免费图表

 
            let captions = ["学院1", "学院2", "学院3", "学院4", "学院5"];
let values = [60, 55, 63, 78, 49];

let maxValue = Math.max(...values);
let minValue = Math.min(...values);

let 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 => {
         console.log(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: {
      left: '24',
      right: '24',
      top: '48',
      bottom: '24',
      containLabel: true
   },
   xAxis: {
      type: 'category',
      data: captions,
      axisTick: {
         show: false //隐藏X轴刻度
      },
      axisLine: {
         lineStyle: {
            color: 'rgba(204, 204, 204, 1)',
         }
      },
      axisLabel: {
         show: true,
         showMaxLabel: true,
         showMinLabel: true,
         // interval: 0, // 间距
         // 设置X轴标签自定义样式  换行显示         
         formatter: function (value, index) {
            if (index === 0 || index === values.length - 1) {
               return value
            } else {
               return " "
            }
         },
         fontSize: 14,
         color: "rgba(0, 0, 0, 0.65)", //X轴文字颜色
         fontFamily: 'Source Han Sans CN-Regular'
      },
   },
   yAxis: {
      name: "论文：篇/人",
      nameTextStyle: {
         fontSize: 14,
         color: "rgba(0, 0, 0, 0.65)", //X轴文字颜色
         fontFamily: 'Source Han Sans CN-Regular',
         align: "left",
         verticalAlign: "center",
      },
      type: 'value',
      axisTick: {
         show: false
      },
      splitLine: {
         lineStyle: {
            type: 'dashed',
            width: 1,
            color: 'rgba(223, 223, 223, 1)',
            opacity: '1',
         }
      },
      axisLine: {
         show: false,
      },
      axisLabel: {
         show: true,
         fontSize: 14,
         color: "rgba(0, 0, 0, 0.65)",
         fontFamily: 'HarmonyOS Sans-Regular'
      },
      splitArea: {
         show: false
      }
   },
   series: [
      {
         name: 'line',
         type: 'line',
         data: values,
         symbolSize: 10, //标记的大小
         symbol: "circle",
         lineStyle: {
            color: "rgba(255,255,255,0)",
            width: 0,
         },
         itemStyle: {
            //折线拐点标志的样式
            color: (params) => {
               console.log(params)
               let data = params.data;
               if(data === minValue){
                  return "#000"
               }else if(data === maxValue){
                  return "#999"
               }else {
                  return "#FA8974"
               }
            },
         },
         emphasis: {
            scale: 1.5
         }
      },
   ]
};