仿echarts的折线图

最新推荐文章于 2023-05-10 13:29:56 发布
最新推荐文章于 2023-05-10 13:29:56 发布
阅读量348 收藏
点赞数
分类专栏： js html 文章标签： canvas javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daily886/article/details/78716424
版权
js 同时被 2 个专栏收录
38 篇文章 0 订阅
订阅专栏
html
10 篇文章 0 订阅
订阅专栏
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿echarts的折线图</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            width:100%;
            height:100%;
        }
        #canvas{
            position:relative;
            margin:50px auto;
        }
    </style>
</head>
<body>
    <div id="canvas" style="width:500px;height:400px;"></div>
</body>
</html>
<script>
    var jquery = (function(){
        var $ = function(id){  //仿jquery $() 函数
            return document.getElementById(id) || id;
        }
        return $;
    }());


    var line = (function($){
        var extend = function(target,source){  //继承选项
            for(var key in source){
                if(key in target){
                    target[key] = source[key];
                }
            }
            return target;
        }
        var addEvent = function(obj,event,func){  //绑定事件
            obj.addEventListener ? obj.addEventListener(event,func) : obj.attachEvent("on"+event,function(){func.call(obj);});
        }
        window.requestAnimation = function(){  //window.requestanimation一秒60帧动画
            return  window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    function(fn){
                        window.setTimeout(fn,1000/60);
                    };
        }()
        var set = 0;
        var init = function(opt){
            this.option = {
                element : null,   //canvas的父元素id
                offsetleft : "6%",  //距离左侧的距离
                offsetright : "6%", //距离右侧的距离
                offsettop : "5%",   //距离顶部的距离
                offsetbottom : "95%", //x轴距离顶部的距离
                textoffsetx : 0,  //x轴文字的左右偏移量 ,正数往右，负数往左
                textoffsety : 20, //x轴文字的上下偏移量 ，整数往下 ，负数往上
                x : [],    //x轴的坐标数据
                data : [], //数据
                speed : 5  //动画移动的速度  1开始
            }
            this.coord = {
                x : [],  //储存x轴坐标
                xmin : 0,
                xmax : 0,
                xinterval : 0,
                y : [],  //储存y轴坐标
                ymin : 0,
                ymax : 0,
                yinterval : 0,
                data : []  //储存data坐标
            }
            extend(this.option,opt);
            this.option.offsetleft = this.option.offsetleft.substr(0,this.option.offsetleft.length-1)/100;
            this.option.offsetright = this.option.offsetright.substr(0,this.option.offsetright.length-1)/100;
            this.option.offsettop = this.option.offsettop.substr(0,this.option.offsettop.length-1)/100;
            this.option.offsetbottom = this.option.offsetbottom.substr(0,this.option.offsetbottom.length-1)/100;
            this.initialize();
        }


        init.prototype = {
            initialize : function(){
                this.canvas = this.createCanvas();
                this.canvas2 = this.createCanvas();
                this.canvas2.style = "position:absolute;z-index:1,top:0;left:0;";
                this.ctx = this.canvas.getContext("2d");
                this.ctx2 = this.canvas2.getContext("2d");
                this.drawCoordx();  //画x轴
                this.drawCoordy();  //画y轴
                this.drawData();  //画数据
                this.loopLine(this.coord.data[0].x,this.coord.data[0].y,this.coord.data[1].x,this.coord.data[1].y,1);  //画线条
            },
            loopLine : function(sx,sy,ex,ey,index){  //动画画线 ，参数：起始坐标x,起始坐标y,终点坐标x,终点坐标y, this.coord.data的下标
                var _this = this,xproportion = ex-sx,yproportion = ey-sy,yset = yproportion/xproportion;
                _this.option.speed = _this.option.speed > 1 ? _this.option.speed : 1;  //动画速度最小是1
                _this.ctx.save();
                _this.ctx.beginPath();
                _this.ctx.lineWidth=2;
                _this.ctx.strokeStyle="#aa0000";
                _this.ctx.moveTo(sx,sy);
                sx+= 1*_this.option.speed;
                sy+= (yset*_this.option.speed);
                if((sx >= ex && sy >= ey) || (sx >= ex && sy <= ey)){  //到达位置时
                    sx = ex;
                    sy = ey;
                    index++;
                    if(index !== _this.coord.data.length){ 
                        ex = _this.coord.data[index].x;
                        ey = _this.coord.data[index].y;
                    }
                }
                _this.ctx.lineTo(sx,sy);
                _this.ctx.stroke();
                _this.ctx.restore();
                if(index == _this.coord.data.length){ //循环到data的最大值就结束
                    return;
                }
                window.requestAnimation(function(){_this.loopLine(sx,sy,ex,ey,index);});
            },
            drawLine : function(){  //直接画线
                this.ctx.save();
                this.ctx.beginPath();
                this.ctx.lineWidth=2;
                this.ctx.strokeStyle="#aa0000";
                this.ctx.moveTo(this.coord.data[0].x,this.coord.data[0].y);
                for(var i = 1,len = this.coord.data.length;i < len;i++){  //循环数据直接使用lineTo画线
                    this.ctx.lineTo(this.coord.data[i].x,this.coord.data[i].y);
                }
                this.ctx.stroke();
                this.ctx.restore();


            },
            drawData : function(){  //画数据的坐标圆圈
                var coordyinterval = this.coord.y[0] !== "undefined" && this.coord.y[1] !== "undefined" ? this.coord.y[0].y - this.coord.y[1].y : 0,
                    proportion = coordyinterval/this.coord.yinterval; //获取的比例  


                for(var i = 0,len = this.option.data.length;i < len;i++){
                    var tmpcoord = {};
                    tmpcoord.x = Math.round(this.coord.xmin+(i*this.coord.xinterval),0);
                    tmpcoord.y = (this.canvas.height*this.option.offsetbottom-(this.option.data[i]*proportion));
                    this.coord.data.push(tmpcoord);


                    this.ctx2.save();
                    this.ctx2.beginPath();
                    this.ctx2.fillStyle = "#ffffff";
                    // this.ctx2.moveTo(tmpcoord.x,tmpcoord.y);
                    this.ctx2.arc(tmpcoord.x,tmpcoord.y,2,0,360*Math.PI/180);
                    this.ctx2.fill();
                    this.ctx2.restore();
                    
                    this.ctx2.save();
                    this.ctx2.beginPath();
                    this.ctx2.strokeStyle = "#aa0000";
                    // this.ctx2.moveTo(tmpcoord.x,tmpcoord.y);
                    this.ctx2.arc(tmpcoord.x,tmpcoord.y,2,0,360*Math.PI/180);
                    this.ctx2.stroke();
                    this.ctx2.restore();
                }
            },
            drawCoordy : function(){ //画y轴
                var lineheight = this.canvas.height-(this.canvas.height*this.option.offsettop+this.canvas.height*(1-this.option.offsetbottom)),  //y轴的长度
                    linewidth = this.canvas.width-(this.canvas.width*this.option.offsetleft+this.canvas.width*this.option.offsetright),  //x轴的长度
                    datamin = 0,  //数据最小值
                    datamax = 0,  //数据最大值
                    lineeachheight = lineheight/(this.option.data.length-1);  //单个y轴的长度
                for(var i = 0,len = this.option.data.length,datanum;i < len;i++){
                    datanum = 1;
                    for(var w = 1,lengs = this.option.data[i].toString().length;w < lengs;w++){
                        datanum = datanum+"0";
                    }
                    datamin = this.option.data[i] < datamin ? Math.floor(this.option.data[i]/datanum)*datanum : datamin;
                    datamax = this.option.data[i] > datamax ? Math.ceil(this.option.data[i]/datanum)*datanum : datamax;
                }
                this.coord.ymin = datamin;
                this.coord.ymax = datamax;
                this.coord.yinterval = Math.round(datamax/(this.option.data.length-1),0);
                this.ctx.save();
                this.ctx.beginPath();
                this.ctx.lineWidth = 1;
                this.ctx.strokeStyle = "#000";
                this.ctx.translate(0.5,0.5);  //linewidth = 1画出来的线，看起来和2一样，要使用translate(0.5,0.5) 就可以解决了
                this.ctx.moveTo(this.canvas.width*this.option.offsetleft,this.canvas.height*this.option.offsetbottom);
                this.ctx.lineTo(this.canvas.width*this.option.offsetleft,this.canvas.height*this.option.offsetbottom-lineheight);
                this.ctx.stroke();
                this.ctx.restore();
                for(var i = 0,len = this.option.data.length,offx,offy;i < len;i++){
                    var tmpcoord = {};
                    offx = this.canvas.width*this.option.offsetleft;
                    offy = this.canvas.height*this.option.offsetbottom-(i*lineeachheight);
                    if(i == 0){
                        tmpcoord.x = offx-this.ctx.measureText(this.coord.ymin).width-8;
                        tmpcoord.y = offy+5;
                    }else{
                        tmpcoord.x = offx-this.ctx.measureText(this.coord.ymin+(i*this.coord.yinterval)).width-8;
                        tmpcoord.y = offy+5;
                    }
                    this.coord.y.push(tmpcoord);
                    //画y轴刻度
                    this.ctx.save();
                    this.ctx.beginPath();
                    this.ctx.lineWidth = 1;
                    this.ctx.strokeStyle = "#000";
                    this.ctx.translate(0.5,0.5);  //linewidth = 1画出来的线，看起来和2一样，要使用translate(0.5,0.5) 就可以解决了
                    this.ctx.moveTo(offx,offy);
                    this.ctx.lineTo(offx-5,offy);
                    this.ctx.stroke();
                    this.ctx.restore();
                    if(i > 0){  //起点不画y轴刻线
                        //画y轴刻线
                        this.ctx.save();
                        this.ctx.beginPath();
                        this.ctx.lineWidth = 1;
                        this.ctx.strokeStyle = "#ccc";
                        this.ctx.translate(0.5,0.5);  //linewidth = 1画出来的线，看起来和2一样，要使用translate(0.5,0.5) 就可以解决了
                        this.ctx.moveTo(offx,offy);
                        this.ctx.lineTo(offx+linewidth,offy);
                        this.ctx.stroke();
                        this.ctx.restore();
                    }
                    //画y轴标点
                    this.ctx.save();
                    this.ctx.fillStyle = "#000";
                    this.ctx.fillText(this.coord.ymin+(i*this.coord.yinterval),
                        tmpcoord.x,
                        tmpcoord.y);
                    this.ctx.restore();
                    
                }
            },
            drawCoordx : function(){  //画x轴
                var linewidth = this.canvas.width-(this.canvas.width*this.option.offsetleft+this.canvas.width*this.option.offsetright),  //x轴的长度
                    lineeachwidth = linewidth/(this.option.x.length-1);  //单个x轴的长度
                this.coord.xmin = this.canvas.width*this.option.offsetleft;
                this.coord.xmax = this.canvas.width*this.option.offsetleft+linewidth;
                this.coord.xinterval = lineeachwidth;


                this.ctx.save();
                this.ctx.beginPath();
                this.ctx.lineWidth = 1;
                this.ctx.strokeStyle = "#000";
                this.ctx.translate(0.5,0.5);  //linewidth = 1画出来的线，看起来和2一样，要使用translate(0.5,0.5) 就可以解决了
                this.ctx.moveTo(this.canvas.width*this.option.offsetleft,this.canvas.height*this.option.offsetbottom);
                this.ctx.lineTo(this.canvas.width*this.option.offsetleft+linewidth,this.canvas.height*this.option.offsetbottom);
                this.ctx.stroke();
                this.ctx.restore();
                for(var i = 0,len = this.option.x.length,offx,offy;i < len;i++){
                    var tmpcoord = {};
                    offx = this.canvas.width*this.option.offsetleft+(i*lineeachwidth);
                    offy = this.canvas.height*this.option.offsetbottom;
                    tmpcoord.x = offx-(this.ctx.measureText(this.option.x[i]).width/2)+this.option.textoffsetx;  //x坐标
                    tmpcoord.y = offy+this.option.textoffsety; //y坐标
                    this.coord.x.push(tmpcoord);
                    //画x轴刻度
                    this.ctx.save();
                    this.ctx.beginPath();
                    this.ctx.lineWidth = 1;
                    this.ctx.strokeStyle = "#000";
                    this.ctx.translate(0.5,0.5);  //linewidth = 1画出来的线，看起来和2一样，要使用translate(0.5,0.5) 就可以解决了
                    this.ctx.moveTo(offx,offy);
                    this.ctx.lineTo(offx,offy+5);
                    this.ctx.stroke();
                    this.ctx.restore();
                    //画x轴标点
                    this.ctx.save();
                    this.ctx.fillStyle = "#000";
                    this.ctx.fillText(this.option.x[i],
                        tmpcoord.x,
                        tmpcoord.y);
                    this.ctx.restore();
                    
                }
            },
            createCanvas : function(){//创建canvas
                var canvas = document.createElement("CANVAS");
                canvas.innerHTML = "您的浏览器不支持canvas,赶紧换一个吧";
                $(this.option.element).appendChild(canvas);
                canvas.width = parseInt($(this.option.element).style.width);  //canvas的宽度要使用width
                canvas.height = parseInt($(this.option.element).style.height);//canvas的高度要使用height
                return canvas;
            }
        }
        return init;  //暴露参数给调用
    }(jquery || {})) //调用jquery module


    window.onload = function(){
        var option = {  //功能没echart强大，凑合着用
            element : "canvas",
            x : ["2017-11-01","2017-11-02","2017-11-03","2017-11-04","2017-11-05","2017-11-06","2017-11-07"],
            // x : ["狗","猫","山羊","猫头鹰","猪","老鼠","牛"],
            data : [10,0,35,20,67,4,89],
            offsetleft : "6%",  //距离左侧的距离，使用百分比
            offsetright : "6%", //距离右侧的距离，使用百分比
            offsettop : "5%",   //距离顶部的距离，使用百分比
            offsetbottom : "90%", //x轴距离顶部的距离，使用百分比
            textoffsetx : 1,  //x轴文字的左右偏移量 ,正数往右，负数往左
            textoffsety : 20, //x轴文字的上下偏移量 ，整数往下 ，负数往上
            speed : 5  //动画移动的速度  1开始
        }
        new line(option);  //初始化module
    }
</script>
daily886
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿echarts写自己的插件之线性图
编程界明世隐的博客
02-03 1531
看了echarts的实例，感觉蛮溜的，但是源码看得我伤神，干脆自己写一个，就花了点时间自己整了个线性图，发出来大家看看，我个人觉得代码比框架大佬的更容易理解，更容易看懂，哈哈，有点自恋，是框架大佬的太高深了吧，看的我头痛。 首先来分析一下，这个图 从图中，我们可以大概将这个线性图分解成多个元素 xy坐标 text文本 线段line 圆Circle 提示框toast（图中没显示出来） 这里我们就可以想到，如果我们写5个构造函数，分别对应这个5种元素，需要什么元素就new一个，然...
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
10-20
主要介绍了jQuery插件echarts实现的多折线图效果,结合完整实例形式分析了echarts插件绘制多折线图效果的具体步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
纯canvas绘制折线图，实现类似echarts基础折线图的效果
YangAYao的博客
08-07 1467
使用canvas绘制出类似echarts的基础折线图 最终实现效果如下图： 话不多说，直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { text-align: center;
数据可视化工具 - ECharts折线图的编写
一个搬砖工人
05-10 1114
以下是后台送过来数据（ajax请求过来的）// 使用刚指定的配置项和数据显示图表。// 使用刚指定的配置项和数据显示图表。// 2. 指定配置和数据。// 2. 指定配置和数据。// 1. 实例化对象。// 1. 实例化对象。
高仿一个echarts饼图
sinat_33488770的博客
08-02 353
开头 饼图，很常见的一种图表，使用任何一个图表库都能轻松的渲染出来，但是，我司的交互想法千奇百怪，布局捉摸不透，本身饼图是没啥可变的，但是配套的图例千变万化，翻遍ECharts配置文档都还原不出来，那么有两条路可以选，一是跟交互说实现不了，说服交互按图表库的布局来，但是一般交互可能会对你灵魂拷问，为什么别人都能做出来，你做不出来？所以我选第二种，自己做一个得了。 用canvas实现一个饼图很简单，所以本文在介绍使用vue高仿一个ECharts饼图的实现过程中会顺便回顾一下canvas的一些知识点，先来看一下
快速入门前端图表插件E-chart
qq_39581763的博客
03-07 591
在前端项目开发中，有很多地方会遇到绘制图表的需求，一般的图表可以通过canvas来绘制，但是遇到复杂一点的图表怎么办呢？ 而且黑马的课程大纲已经把canvas课程删掉了，既然canvas有用，为什么要把他从课程大纲里面删掉呢？ canvas主要是用作前端小游戏的渲染，还有图表的制作。我们去公司做的项目，游戏类的项目，很少。然后自己手写canvas图表，非常的复杂，可...
仿小米运动折线图
10-01
3. **图表库**：为了快速实现折线图，开发者可能会选择使用现有的图表库，如ECharts、AntV G2、D3.js等。这些库提供了丰富的API和配置选项，可以方便地定制图表样式和交互。 4. **API接口**：如果数据来自服务器，...
自定义控件仿天气折线图的绘制，有天气图片 温度显示等
11-07
总结，自定义控件“仿天气折线图的绘制，有天气图片 温度显示等”是一个涉及图形绘制、数据处理和用户交互的综合性任务。通过这个项目，开发者可以深入理解Android绘图机制，提升自己的定制化开发能力。同时，源码...
心跳图-echarts.zip
04-20
ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，并且支持在Web浏览器中展示复杂的数据。在本案例中，"心跳图-echarts.zip" 是一个包含ECharts...
echarts2.0热力图实例
09-30
ECharts是一款由百度开发的开源JavaScript数据可视化库，它提供了一系列丰富的图表类型，包括柱状图、折线图、饼图以及我们今天要讨论的热力图。在ECharts 2.0版本中，热力图是一个强大的工具，用于展示数据的分布和...
Android 折线图(模仿支付宝月账单的折线图)
11-25
通过Android自带的path类自定义的一个仿支付宝的折线图，X,Y轴是写死的，需要重新赋值
《原生js开发仿ECharts的canvas柱图实例教程》源码
03-29
本文件属于文章《原生js开发仿ECharts的canvas柱图实例教程》的完整代码，在读完原创文章之后可以下载查看代码。代码中有详细的注释说明，如果有不明白的地方，建议你可以输出数值。html、css、js代码都在同一个文件中。也可以供有需要的朋友在开发中直接使用。
原生html配合canvas仿echarts图标组件合集源码.zip
06-07
原生html配合canvas仿echarts图标组件合集源码.zip
支付宝折线图
11-07
仿照实现支付宝折线图 基于Eclipse的android工程源码demo
echarts 百度统计图表类..基于JS
08-27
百度旗下开发的基于js的大型数据统计图表
基于Echarts的HTML5 Canvas折线图柱状图DEMO演示
Pioneer
11-28 934
HTML代码 ： &lt;div id="barChart" style="height: 400px;width:600px;background:white;margin:20px 0 0;"&gt;&lt;/div&gt; JavaScript代码 ： var barChart = { title: { text: '折柱混合图' ...
基于Echarts的HTML5 Canvas折线图DEMO演示
Pioneer
11-28 1276
HTML代码：  &lt;div id="lineChart" style="height: 400px;width:600px;background:white;margin:20px 0 0;"&gt;&lt;/div&gt; JavaScript代码：  // 绘制图表，准备数据 var lineChart = { dataZoom: { ...
原生html配合canvas仿echarts图标组件合集
weixin_44996854的博客
08-16 686
介绍 这是一个多人项目中的一个模块，我负责了数据展示的部分，用原生的Canvas实现了进度条，饼图，雷达图，水滴图，日历图等图表的展现。采用面向对象的方式，将每个图表分为一个独立的类，将dom元素和option选项，option选项尽可能模仿echarts的选项配置。 开源地址 https://gitee.com/tyoubin_admin/echarts-canvas.git 欢迎fork和star！ 预览地址 http://hikari.top:8104/ 饼图：用于展示笔记的分类。 亮点：1.开场动画
avue引入echarts折线图
最新发布
09-13
要在Avue中引入echarts折线图，可以按照以下步骤进行操作： 1. 首先，根据给出的代码，我们可以看到在Avue中创建了三种类型的图表组件（BarEchart柱状图、LineEchart折线图、PieEchart饼图）。 2. 接下来，在src/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值