echarts趋势线

最近项目里需要绘制echarts图表的趋势线，查过资料后得知除了引入echarts之外还要引入ecStat.js辅助绘制，代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="echarts.min.js"></script><script src="ecStat.js"></script><style type="text/css">#test {width: 600px;height: 400px;margin: 100px auto;}</style></head><body><div id="test"></div><script type="text/javascript">var data=[[10.0, 8.04],[13.0, 7.58],[9.05, 8.81],[14.0, 7.66],[13.4, 6.81],[10.0, 6.33],[9.15, 7.20],[3.03, 4.23],[12.2, 7.83],[1.05, 3.33],[4.05, 4.96],[12.0, 6.26],[12.0, 8.84],[5.02, 5.68]]var myChart = echarts.init(document.getElementById('test'))var myRegression=ecStat.regression('linear',data)myRegression.points.sort(function(a,b){return a[0]-b[0]})var option = {xAxis: {},yAxis: {},series: [{symbolSize: 20,data: data,type: 'scatter'},{name:'',type:'line',data:myRegression.points,lineStyle:{color:'#00f'}}]};myChart.setOption(option)</script></body>
</html>

其中ecStat.regression('linear',data)里面的data数据需要是[[],[],[]]这种数组套数组的格式，也适用于折线柱状图之类的图表。

myRegression.points.sort(function(a,b){return a[0]-b[0]})

上面这句代码似乎是为了排序，但是注释掉后也没啥影响？（有大神知道为啥吗）

最终效果图如下：

希望可以帮到大家。

此外，echarts有各种不同的版本，不同的版本对图表的支持不尽相同，想问下大家在使用echarts绘制图表的时候一般是怎么选择所用版本的呢，有一个项目需要使用不同版本的情况吗？

echarts趋势线相关推荐

回归统计在 echarts 中的实现---在散点图中加趋势线
回归统计在 echarts 中的实现贵在随心关注 0.5 2019.03.13 13:55 字数 432 阅读 483评论 0喜欢 3 在做数据的统计的时候,难免会涉及到线性拟合问题,也就是回归 ...
基于html5 Canvas图表库 : ECharts
基于html5 Canvas图表库 : ECharts 分类编程技术 ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生 ...
echart图片库_基于html5 Canvas图表库 : ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
echarts图表x轴基准线（平行y轴）
1. 生成当前时间基准线 option = {title: {text: '折线图堆叠'},tooltip: {trigger: 'axis'},legend: {data: ['邮件营销']},gr ...
echarts地图列表_ECharts · Feature
Architecture ECharts (Enterprise Charts 商业技工图表库) 提供商业技工常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例, ...
echarts数据变了不重新渲染，以及重新渲染了前后数据会重叠渲染的问题
1.echarts数据变了但是视图不重新渲染新建Chart.vue文件 <template> <p :id="id" :style="style&q ...
r语言echarts画箱线图_echarts学习笔记之箱线图的分析与绘制详解
一.箱线图 box-plot 箱线图(boxplot)也称箱须图(box-whisker plot),它是用一组数据中的最小值.第一四分位数.中位数.第三四分位数和最大值来反映数据分布的中心位置和散布 ...
echarts x轴文字个数太多_echarts x轴标签文字过多导致显示不全，最有效的3种解决方法...
echarts x轴标签文字过多导致显示不全,只是我之前在csdn发表过,经过实践,效果不错! 如图: 办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用 ...
获取this_小程序获取微信运动步数并集成echarts报表显示
需求现在运动计步非常的火,大家常用的计步工具一般有keep.咕咚.微信运动和其他移动设备等,本文是基于微信小程序获取用户的微信运动数据并可视化呈现出来. 先看一下最终实现效果: 微信运动规则在开发 ...

echarts趋势线

echarts趋势线相关推荐

最新文章

热门文章