实例首页
自学教程
IT工具箱
源代码
下载代码
上下布局
点击运行 >
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ECharts 5 使用外部的数据转换器 echarts-stat 指数回归线 (Exponential Regression) 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/5.4.3/echarts.min.js"></script> <script src="https://demo.runoops.com/static/lib/echarts-stat/ecStat.min.js"></script> </head> <body> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style="width: 800px;height:600px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var option; // See https://github.com/ecomfe/echarts-stat echarts.registerTransform(ecStat.transform.regression); option = { dataset: [ { source: [ [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] ] }, { transform: { type: 'ecStat:regression', config: { method: 'exponential' // 'end' by default // formulaOn: 'start' } } } ], 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', axisPointer: { type: 'cross' } }, xAxis: { splitLine: { lineStyle: { type: 'dashed' } } }, yAxis: { splitLine: { lineStyle: { type: 'dashed' } } }, series: [ { name: 'scatter', type: 'scatter', datasetIndex: 0 }, { name: 'line', type: 'line', smooth: true, datasetIndex: 1, symbolSize: 0.1, symbol: 'circle', label: { show: true, fontSize: 16 }, labelLayout: { dx: -20 }, encode: { label: 2, tooltip: 1 } } ] }; option && myChart.setOption(option); </script> </body> </html>
运行结果: