線上demo：https://my.weblf.cn/alone_page/echarts/line1.html
祥見代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>line1</title> <script src="https://cdn.jsdelivr.net/npm/echarts@4.4.0/dist/echarts.min.js"></script> </head> <body> <div id="charts1" style="width: 500px;;height:500px;"></div> </body> <script> var mycharts1; var days=[ //天數 "10月1日", "10月2日", "10月3日", "10月4日", "10月5日", "10月6日", "10月7日" ]; var step_num1=[1000, 1587, 5815, 3548, 2456, 1984, 3214] function ini_map() { mycharts1 = echarts.init(document.getElementById("charts1")); var option = { grid: { left: "0%", right: "20px", bottom: "3%", top: "20px", containLabel: true }, tooltip: { show: true, trigger: "axis", // 'item'，數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。'axis'，坐標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。 axisPointer: { // 坐標軸指示器，坐標軸觸發有效 type: "line", // 默認為直線，可選為：'line' | 'shadow' z: 1, lineStyle: { color: 'rgba(125, 187, 195, 1)', type: 'dotted' }, }, position: [10000, 10000], formatter: "{b}: {c}次", // 需要展示的數據，b為名稱，c為數值 confine: false // 是否將懸浮框限定在特定區域 }, xAxis: [{ type: "category", boundaryGap: false, data: days, axisLine: { //是否顯示刻度軸 show: false }, axisTick: { //是否顯示刻度線 show: false }, axisLabel: { //刻度文本樣式 show: true, interval: 0, //刻度間距，0為全部展示 rotate: 0, //刻度標簽旋轉，可解決文本顯示不全的問題 formatter: '{value}', textStyle: { //改變刻度字體樣式 color: '#666666' } } }], yAxis: [{ type: "value", axisLine: { //是否顯示刻度軸 show: false }, axisTick: { //是否顯示刻度線 show: false }, axisLabel: { //刻度文本樣式 formatter: '{value}', textStyle: { //改變刻度字體樣式 color: '#B4BBBB' } } }], series: [{ name: "郵件營銷", type: "line", stack: "總量", smooth: true, // 這個可以顯示為平滑過渡的線條 symbol: 'circle', symbolSize: 8, // 拐點大小，數字隨意，跟下面的線寬一樣或少 1 像素 areaStyle: { normal: { color: 'rgba(125, 187, 195, 0.2)' //區域顏色 } }, itemStyle: { normal: { borderColor: 'white', borderWidth: 2, color: 'rgba(125, 187, 195, 1)', //改變折線點的顏色 lineStyle: { color: 'rgba(125, 187, 195, 1)' //改變折線顏色 }, label: { //拐點上的lable show: true, color: 'white', backgroundColor: '#7dbbc3', padding: [2, 4], borderRadius: 8 } } }, data: step_num1 }] }; mycharts1.setOption(option); window.onresize = mycharts1.resize; //默認高亮 setTimeout(() => { mycharts1.dispatchAction({ type: 'highlight', dataIndex: 6 }); }, 1000) } ini_map() </script> </html>
效果圖
