Echarts在线免费图表

 
            let chartIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAiCAIAAACLAPPbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAJWmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0NDg4LCAyMDIwLzA3LzEwLTIyOjA2OjUzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjY1N2Q1MGFjLTM0ZGQtMTQ0NC04OTFkLTM3YTgyNDU4MGE0MSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpiMTFkYzdlZi0xNzlkLTk2NDQtYWE0ZS0xMjY4NDAyYjU1MWYiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0iNkU0Qjg2NjZENjc4QkM3MEIwNzc2MTNGNDEwNTU4NzIiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHRpZmY6SW1hZ2VXaWR0aD0iMjYwMCIgdGlmZjpJbWFnZUxlbmd0aD0iMTMwMCIgdGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0aW9uPSIyIiB0aWZmOlNhbXBsZXNQZXJQaXhlbD0iMyIgdGlmZjpYUmVzb2x1dGlvbj0iNzIvMSIgdGlmZjpZUmVzb2x1dGlvbj0iNzIvMSIgdGlmZjpSZXNvbHV0aW9uVW5pdD0iMiIgZXhpZjpFeGlmVmVyc2lvbj0iMDIzMSIgZXhpZjpDb2xvclNwYWNlPSIxIiBleGlmOlBpeGVsWERpbWVuc2lvbj0iMjYwMCIgZXhpZjpQaXhlbFlEaW1lbnNpb249IjEzMDAiIHhtcDpDcmVhdGVEYXRlPSIyMDIzLTA2LTI3VDE3OjIyOjUzKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMy0wNi0yN1QxNzo1OTo1MCswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMy0wNi0yN1QxNzo1OTo1MCswODowMCI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmY5NDgzNzA1LWVmZWEtYmM0NS1iZDgzLTgyYTBhNjAzN2IxMSIgc3RFdnQ6d2hlbj0iMjAyMy0wNi0yN1QxNzo1OTo1MCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjb252ZXJ0ZWQiIHN0RXZ0OnBhcmFtZXRlcnM9ImZyb20gaW1hZ2UvanBlZyB0byBpbWFnZS9wbmciLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImRlcml2ZWQiIHN0RXZ0OnBhcmFtZXRlcnM9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whw59smo1euwt/loEBilxMF7DddqNS4sr7z2+qtrSys/+f0fB0EQtdrtdjuIwnFebm3v7hwMfv5fn/7y1q+fbG8lhU2ShC53a0u01rp1WM3HzbCR9Xq4sNZ+6813X3/zrXPnL6owrpzuzy/tD/JHjze/+Xbjm/vr699t7OzsjFKnWrODjQ00GkEUtdttpdT+xgaiaGZ2lpnjOPbe7+3twftGu621TkYuXlgoHj9E1OgtnhvubIFdHIea5PKltQ/ee++9d95cW1tdmJvv9NrtqMHVIMuyx1vbd+7c+fyLX9z+6u7m1k5SVO1e92CQmCgsxxlaLaLeeSISVUe9uvbvIQhADjaHzzHTfOWVpctL/R/feOP1hf6lucas9m0po2KYbm9sbW39bE8ePti6e/fu9hY7RmAAwFmsri3lmR2libUWYK21EDOz8TAGpEFAo4tXL11594P3r7z+5tvvXFNBQ0ex1mGW55ubm98+fLC9tf8P//RZlmV1h/GouycCZjLPlFqnWaJmEEUICa5APoTPEKERcb55ONfGlfPqrZVz119dvfHa6qsLs81m81fn3mAfFEWxvze89+3DL29/fefO3Scbu2EcsFceQkRKwXtfVK6q8MG17tra2jvX333n2nurly62W31H4qxY79a/e/LFrdu3bt35dn19b29vnKVVyd2Zt4uiKIpCvK9DqohAhJR6tnCYbz3b9MO5vSQMYWIwIWekHiWDRc8urY6ywpUVYGBM0Gh0u91ut/unv7O0tLR04eKl2ZkFIu0dQIEx0f98/vn9+/f/99avnjx50u213n///Zs3f/vq1ashMxHpINBaJ1l+/96Dz7/4xa+/+faXt245ISdc18LsVeUrsUJhR7wHc92iVVoft3mfY8mkdbw6TpjhACZICA61mJgpTivvkwwghE0QoaoQBKrbpe2HMzM4t9hbXFhZWblw+bWrb719fW3tknVOROrbEik+ugSIoCju3Lnz808/vX379t7BIXuCIk8mL0sm7SHCmiHeAr6CFURdEEEpKKUm/fyp/vqxJb3rJ0q/+fknNi/zvHRWNAKjIyINMV5QliUFqtnreOIiS+ArRFFY7DHDM0RgtG7E7Ua7E0XRBz/6rbW1tatvXl5cXEyz0Zdffvnfn31679693fVUax0EQRAEoo33VLnSWQmbDe+pdBZWQEAQmDgKgiAf7ULrujsO4Pj/SifG/wE4i5+DAJ6iAQAAAABJRU5ErkJggg==`
let option = {
   backgroundColor: "#000",
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         lineStyle: {
            color: "rgba(255,255,255,.5)",
         }
      },
      backgroundColor: "rgba(255,255,255,0)",
      borderColor: 'rgba(255,255,255,0)',
      textStyle: {
         color: "rgba(255,255,255,0)"
      },
      formatter: () => {
         return ``;
      }
   },
   grid: {
      containLabel: true,
      right: '5%',
      left: '5%',
      bottom: '0%',
      top: '10%',
   },
   xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLine: {
         lineStyle: {
            color: "#16323d"
         }
      },
      axisTick: {
         show: false,
      },
      axisLabel: {
         color: "#fff",
         fontSize: 18,
         margin: 15
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: '#182828'
         }
      }
   },
   yAxis: {
      type: 'value',
      axisLine: {
         show: false,
         lineStyle: {
            color: "#16323d"
         }
      },
      axisTick: {
         show: false,
      },
      axisLabel: {
         color: "#c7dfe9",
         fontSize: 12
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: '#182828'
         }
      }
   },
   color: [
      '#23B3F7'
   ],
   series: [
      {
         data: [820, 932, 901, 934, 1290, 1330, 1320],
         type: 'line',
         smooth: true,
         //要把折线图的拐点symbol隐藏掉；鼠标悬浮时会显示；label也会在有symbol的点展示
         showSymbol: false,
         z: 100,
         label: {
            show: true,
            position: "top",
            distance: 10,
            formatter: (fparam) => {
               console.log(fparam);
               return `{a|${fparam.value}}`;
            },
            rich: {
               a: {
                  backgroundColor: {
                     image: chartIcon
                  },
                  width: 67,
                  height: 34,
                  align: 'center',
                  color: '#fff'
               }
            }
         },
         areaStyle: {
            color: {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [{
                  offset: 0, color: '#23B3F7' // 0% 处的颜色
               }, {
                  offset: .9, color: '#23B3F700' // 100% 处的颜色
               }],
               global: false // 缺省为 false
            }
         }
      }
   ]
}