这里主要对这个官网案例进行讲解： https://echarts.apache.org/examples/en/editor.html?c=scatter-exponential-regression
echarts.min.js文件下载
ecStat.min.js文件下载
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Scatter</title> </head> <script src="js/echarts.min.js"></script> <script src="js/jquery-3.2.1.js"></script> <script src="js/ecStat.min.js"></script> <body> <div id="scatter" style="width: 1200px;height:600px;"></div> </body> <script> // 指数回归散点图 scatter(); function scatter() { var myChart = echarts.init(document.getElementById("scatter")); var data = [ [1, 4862.4], [2, 5294.7], [3, 5934.5], [4, 7171.0], [5, 8964.4], [6, 10202.2], [7, 11962.5], [8, 14928.3], [9, 16909.2], [10, 18547.9], [11, 21617.8], [12, 26638.1], [13, 34634.4], [14, 46759.4], [15, 58478.1], [16, 67884.6], [17, 74462.6], [18, 79395.7] ]; // See https://github.com/ecomfe/echarts-stat(ecStat.min.js下载链接),根据传入的数据生成一个指数回归的ecStat对象 var myRegression = ecStat.regression('exponential', data); //将内部数据进行从小到大排序 myRegression.points.sort(function (a, b) { return a[0] - b[0]; }); var option = { title: { text: '1981 - 1998 gross domestic product GDP (trillion yuan)', subtext: 'By ecStat.regression', sublink: 'https://github.com/ecomfe/echarts-stat', left: 'center' }, tooltip: { trigger: 'axis', // 自定义formatter formatter: function (params) { var result = '' // 设置散点图的小圆点为黄色 var scatter = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:yellow"></span>' // 设置折线图的小圆点为粉色 var line = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:pink"></span>' // 将年份显示在formatter中 var month = [] for (var i = 0; i < (1998 - 1981 + 1); i++) { month[i] = i + 1981 } for (var i = 0; i < params.length; i++) { // 这里可以打印params来查看自己所需要的参数 // console.log(params) var item = params[i] // 散点图 if (i == 0) { //将所有结果累加 // item.axisValue为x轴的值 result += month[item.axisValue - 1] + "</br>" + scatter + item.data[1] } // 折线图 if (i == 1) { result += "</br>" + line + item.data[1] } } return result }, // 坐标轴指示器 axisPointer: { // 十字准星指示器 type: 'cross' } }, xAxis: { type: 'value', // 分割线 splitLine: { lineStyle: { // 虚线 type: 'dashed' } }, // 坐标轴的分割段数（只是个预估值） splitNumber: 20 }, yAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed' } } }, series: [{ name: 'scatter', type: 'scatter', // 高亮标签 emphasis: { label: { show: true, position: 'left', color: 'blue', fontSize: 16 } }, data: data }, { name: 'line', type: 'line', // 是否显示 symbol showSymbol: false, // 是否平滑曲线 smooth: true, data: myRegression.points, // 右上角的方程 markPoint: { itemStyle: { color: 'transparent' }, label: { show: true, position: 'left', formatter: myRegression.expression, color: '#333', fontSize: 14 }, data: [{ coord: myRegression.points[myRegression.points.length - 1] }] } }] }; myChart.setOption(option); } </script> </html>附上一张最后的效果图（自定义tooltip.formatter的显示格式）：
