基础样式

根据散点画出趋势图，目标如下：

代码：
可直接在echarts官网里运行

// See https://github.com/ecomfe/echarts-stat
echarts.registerTransform(ecStat.transform.regression);let 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, 50478.1],[16, 40884.6],[17, 30462.6],[18, 20395.7]]option = {dataset: [{source: data}, {transform: {type: 'ecStat:regression',config: { method: 'polynomial', order: 3 }}}],tooltip: {trigger: 'axis',axisPointer: {type: 'cross'}},xAxis: {splitLine: {show: false},axisTick: {show: false,},axisLine: {// x轴线隐藏show: false,},splitNumber: 20,},yAxis: {min: -40,axisTick: {show: false,},axisLine: {show: false,},},// symbol的类型：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'series: [{name: 'scatter',type: 'scatter',symbol:'circle',// symbolSize: 20,   // 设定实心点的大小}, {name: 'line',type: 'line',smooth: true,datasetIndex: 1,symbolSize: 0.1,symbol: 'circle',labelLayout: { dx: -20 },encode: { label: 2, tooltip: 1 }}]
};

在angular里引入

1、下载

cnpm i echarts-stat --save

2、在所需页面引入

这是我的引入，不知道正规的怎么引入，有知道怎么引入的留言下，不胜感激
我引入后使用是没问题的

import * as echarts from 'echarts';
import * as  ecStat from 'echarts-stat';

3、使用

  option1: any = {};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, 50478.1],[16, 40884.6],[17, 30462.6],[18, 20395.7]];myRegression: any;constructor() { }ngOnInit(): void {this.myRegression = ecStat.regression('polynomial', this.data, 3);this.Echarts();}// tslint:disable-next-line:typedefEcharts() {this.option1 = {color: ['#3583CB', '#1991FF'],dataset: [{source: this.data}, {transform: {type: 'ecStat:regression',config: { method: 'polynomial', order: 3 }}}],tooltip: {trigger: 'axis',axisPointer: {type: 'cross'}},xAxis: {splitLine: { show: false },axisTick: {show: false,},axisLine: {// x轴线隐藏show: false,},splitNumber: 20,},yAxis: {min: -40,axisTick: {show: false,},axisLine: {show: false,},},series: [{name: 'scatter',type: 'scatter'}, {name: 'line',type: 'line',smooth: true,showSymbol: false,data: this.myRegression.points,// markPoint: {//   itemStyle: {//     normal: {//       color: 'transparent'//     }//   },//   label: {//     normal: {//       show: true,//       position: 'left',//       formatter: this.myRegression.expression,//       textStyle: {//         color: '#333',//         fontSize: 14//       }//     }//   },//   data: [{//     coord: this.myRegression.points[this.myRegression.points.length - 1]//   }]// },datasetIndex: 1,symbolSize: 0.1,symbol: 'circle',label: { show: true, fontSize: 16 },labelLayout: { dx: -20 },encode: { label: 2, tooltip: 1 }}]};}

<div class="echarts"><div echarts [options]='option1' style="width: 100%; height: 100%;"></div>
</div>

Echarts16 ---散点图-趋势图相关推荐

Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图
目录 Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图 1.基本图表绘制 plt.plot() ts.plot() 由Seri ...
Excel应该这么玩——7、我是预言家：绘制趋势图
让我们先看一个场景:你是公司销售部的员工,你手里有公司最近几年的销售额相关的数据,经理希望你预测下个月的销售额.盯着一堆数据,你或许会想到画一张XY坐标图,然后将每个月份的销售额标定为一个坐标.但是下 ...
根据“坐标”生成趋势图
数据库环境:SQL SERVER 2008R2 有一"坐标"表t,表结构如下: id int, num int 字段id是序号,递增且连续,字段nu ...
仿中国比特币首页趋势图，折线图，k线图
LineChart android line chart 仿照中国比特币的首页行情趋势图 www.chbtc.com Github Repository and Library https://git ...
用python做自己主动化測试--绘制系统性能趋势图和科学计算
在性能測试中.我们常常须要画出CPU memory 或者IO的趋势图. 预计大学里.大多数人都学习过matlib, 领略了matlib绘图的强大. python提供了强大的绘图模块matplotlib ...
Py之Seaborn：数据可视化Seaborn库的柱状图、箱线图(置信区间图)、散点图/折线图、核密度图/等高线图、盒形图/小提琴图/LV多框图的组合图/矩阵图实现
Py之Seaborn:数据可视化Seaborn库的柱状图.箱线图(置信区间图).散点图/折线图.核密度图/等高线图.盒形图/小提琴图/LV多框图的组合图/矩阵图实现目录
十分钟用 Python 绘制了近十年编程语言趋势图
先来个视频体验一下效果,文末还有视频教程 1. 分析我们需要获取数据,所以第一步需要从tiobe抓取近几年的top编程语言的占比情况,其次存入 csv,最后使用 Python 绘制成表格. 2. 安 ...
python的发展趋势图_用Python绘制趋势图
我在数据帧中有以下数据:+----------------------+--------------+-------------------+ | Physician Profile Id | Pro ...
graphics | 基础绘图系统（七）——各式各样的散点图/折线图
前面已经用了六篇推文系统地介绍了R语言的基础绘图系统的主要函数用法,以及柱状图.直方图.箱形图.扇形图等常见图形的绘制方法,接下来将计划用四篇推文介绍使用基础绘图系统能够绘制的其他各类图形. 本篇介绍 ...
Echart.js的趋势图入门与实例
在平时开发项目时,免不了需要对数据进行图表显示的需求,比如:趋势图.饼状图.柱形图等.自己身为一个PHPer,除了PHP本身的功能,不得不需要借助js来实现显示.在了解众多趋势图插件,国内外开源的项目 ...

Echarts16 ---散点图-趋势图

基础样式

在angular里引入

Echarts16 ---散点图-趋势图相关推荐

最新文章

热门文章