用echarts画回归图,并实现一个按钮点击事件

最新推荐文章于 2024-05-11 11:31:38 发布

weixin_42766327

最新推荐文章于 2024-05-11 11:31:38 发布

阅读量2k

点赞数

分类专栏： echarts 文章标签： echarts 线性回归点击事件

本文链接：https://blog.csdn.net/weixin_42766327/article/details/82082086

版权

echarts 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
/*
定义变量
*/
   var data1 = [
       [632.9596185602,618.6494050718],
       [599.932723451,   586.8184818698],
       [582.8077237746,568.4958863896],
       [566.7842516503,557.4253467591],
       [552.7122143328,542.010010233],
       [547.2960753281,535.7560113766],
       [532.3796638687,528.2429228304],
       [521.6630108449,525.6624991943],
       [515.790563439,   504.6113788091],
       [505.2125747904,511.074227995],
       [495.4077766322,500.3258083795],
       [488.9337161922,491.4089923228],
       [479.1469289149,469.6397804615],
       [467.741502221,   462.2827517558],
       [455.6958543206,454.1417092521],
       [449.4915169637,453.7372145715],
       [441.4343941579,450.3160528593],
       [418.4513233214,437.149387396],
       [395.3958880075,413.0736926565],
       [353.9191157083,390.8440051248],
       [499.9925091365,499.997608893]

       ];
       var data=data1;
       var data2 = [
       [632,618],
       [599.932723451,   586.8184818698],
       [582.8077237746,568.4958863896],
       [566.7842516503,557.4253467591],
       [552.7122143328,542.010010233],
       [547.2960753281,535.7560113766],
       [532.3796638687,528.2429228304],
       [521.6630108449,525.6624991943],
       [515.790563439,   504.6113788091],
       [505.2125747904,511.074227995],
       [495.4077766322,500.3258083795],
       [488.9337161922,491.4089923228],
       [479.1469289149,469.6397804615],
       [340,500]

       ];

       var k1=0.8362882475;
       var b1=81.8071700018;
       var r1=0.9871614311;

       var k2=0.836;
       var b2=81.807;
       var r2=0.987;

       var k=k1;
       var b=b1;
       var r=r1;
       var myRegression = ecStat.regression('linear', data);
       myRegression.points.sort(function(a, b) {
       return a[0] - b[0];
       });
       var flag=true;
       /*
       *通过容器id读取元素,初始化画布
       */
       var dom = document.getElementById("container");
       var myChart = echarts.init(dom);
       option = {
           /*
           *定义标题,包括标题名称,标题位置,标题样式
           */
       title: {
               left:'25%',
       top:'2%',
       text: '201801髙一语文标准分与中考语文标准分回归分析(二十层)',
       textStyle:{
       color:'#707070',
           fontSize:25,
       }},
           /* 定义工具箱选项,
           *包括是否显示按钮,
           *数据试图,
           *是否可以下载保存为图片,
           *还有自定义按钮的设置
           */
           toolbox: {
           show : true,
           feature : {
           mark : {show: true},
           dataView : {show: true, readOnly: false},
           saveAsImage : {show: true},
           /* 自定义按钮,
           *名字自定义即可,
           *利用 onclick:function() {}来完成点击事件(即点击按钮之后,页面不刷新,刷新数据,重新画图)
           */
           myTool2:{
           show:true,
           title:'数据转换',
           icon:'path://M525.4 721.2H330.9c-9 0-18.5-7.7-18.5-18.1V311c0-9 9.3-18.1 18.5-18.1h336.6c9.3 0 18.5 9.1 18.5 18.1v232.7c0 6 8.8 12.1 15 12.1 6.2 0 15-6 15-12.1V311c0-25.6-25.3-48.9-50.1-48.9h-335c-26.2 0-50.1 23.3-50.1 48.9v389.1c0 36.3 20 51.5 50.1 51.5h197.6c6.2 0 9.3-7.5 9.3-15.1 0-6-6.2-15.3-12.4-15.3zM378.8 580.6c-6.2 0-12.3 8.6-12.3 14.6s6.2 14.6 12.3 14.6h141.4c6.2 0 12.3-5.8 12.3-13.4 0.3-9.5-6.2-15.9-12.3-15.9H378.8z m251.6-91.2c0-6-6.2-14.6-12.3-14.6H375.7c-6.2 0-12.4 8.6-12.4 14.6s6.2 14.6 12.4 14.6h240.8c6.2 0.1 13.9-8.5 13.9-14.6z m-9.2-120.5H378.8c-6.2 0-12.3 8.6-12.3 14.6s6.2 14.6 12.3 14.6h240.8c7.7 0 13.9-8.6 13.9-14.6s-6.2-14.6-12.3-14.6z m119.4 376.6L709 714.1c9.2-12 14.6-27 14.6-43.2 0-39.4-32.1-71.4-71.8-71.4-39.7 0-71.8 32-71.8 71.4s32.1 71.4 71.8 71.4c16.3 0 31.3-5.4 43.4-14.5l31.6 31.5c3.8 3.8 10 3.8 13.8 0 3.8-3.8 3.8-10 0-13.8z m-88.8-23.6c-28.3 0-51.3-22.8-51.3-51s23-51 51.3-51c28.3 0 51.3 22.8 51.3 51s-23 51-51.3 51z', //图标
           onclick:function() {
                                               if(flag){
                                                   flag=false;
                                                   k=k2;
                                                   myRegression = ecStat.regression('linear', data2);
                                                   option.series[0].data = data2;
                                                   option.series[1].data=myRegression.points;
                                               }else{
                                                   flag=true;
                                                   myRegression = ecStat.regression('linear', data1);
                                                   option.series[0].data = data1;
                                                   option.series[1].data=myRegression.points;
                                                   };
                                               myChart.setOption(option,true);
                               }}}},
           /*
           *设置x轴,注意类型为value,(x轴默认为'category')
           *设置x轴坐标的起始值,
           *设置坐标轴的分割段数,
           *设置是否显示坐标轴的分割线 (数值轴默认显示,类目轴默认不显示)
           */
           xAxis: {
                       type:'value',
               min:'300',
               max:'650',
               splitNumber:'7',
                       splitLine: {
                   show: true
                       }
                       },

           yAxis: {
               type:'value',
                      min:'300',
                  max:'650',
                      splitNumber:'7',
                       splitLine: {
                   show: true
                   }
                       },
           series: [
               /* 设置散点图数据,包括数据类型,数据点样式 */
               {
               name: 'scatter',
               type: 'scatter',
               /* 设置图形样式,即给数据点设置样式,不设置也可,有默认设置 */
                       itemStyle:{
                                       color:'#87CEFF'
                                   },
               data: data

                       },
                       /* 设置折线图数据
                       *是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
                       *设置折线的样式(此处为虚线),设置线的颜色
                       *设置画折线图所需的数据
                       */
                       {
                       name:'line',
                       type:'line',
                      showSymbol: false,
                      lineStyle: {
                                   type:'dashed',
                   color: '#87CEFF'
                      },
               data: myRegression.points,
               /* 设置图表标注 */
               markPoint: {
               itemStyle: {

                       normal: {
                           //将标志点设置为透明
                           color: 'rgba(0,0,0,0)'
                                  }
                           },
                           /* 设置标注的文本信息,
                           *包括是否显示标注的文本信息,
                           *标注的位置,
                           *输出信息及格式,
                           *以及输出信息文字对齐方式,及文字样式
                           */
                           label: {
                               normal: {
                                       show: true,
                                       position: 'top',
                                                   offset:[-700,100],
                                   formatter:function(){
                                                       if(flag){
                                                                                       return`f(x)=${k}x+${b}\n\nR^2=${r}`;
                                                                                       }else{
                                                                                       return`f(x)=${k2}x+${b2}\n\nR^2=${r2}`;
                                                                                       };
                                                                           },

                                                   align:'left',
                                           textStyle: {
                                           color: '#333',
                                           fontSize: 25
                                               }
                                           }
                               },
                                           data: [{
                                           coord: myRegression.points[myRegression.points.length-1]
                                           }]
                       }
               }

           ]};
           myChart.setOption(option,true);

       </script>
   </body>
</html>

weixin_42766327

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用echarts画回归图,并实现一个按钮点击事件

&lt;!DOCTYPE html&gt;&lt;html style="height: 100%"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;/head&gt; &lt;body style="height: 100%; margin: 0"&gt;
复制链接

扫一扫