基于Echarts的HTML5 Canvas折线图DEMO演示

谁借莪１个温暖的怀抱￠ 2022-04-13 08:51 320阅读 0赞

HTML代码：

<div id="lineChart" style="height: 400px;width:600px;background:white;margin:20px 0 0;"></div>

JavaScript代码：

// 绘制图表，准备数据
        var lineChart = {
            dataZoom: {
                type:'inside',//slider
                //orient:'horizontal'//vertical
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {yAxisIndex:'none'}
                }
            },
            title: {
                text: '折线图'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };
    
        //初始化echarts实例
        var myLineChart = echarts.init(document.getElementById('lineChart'));
    
        //使用制定的配置项和数据显示图表
        myLineChart.setOption(lineChart);

发表评论取消回复

表情：

评论列表（有 0 条评论，320人围观）

还没有评论，来说两句吧...

相关阅读

相关基于echarts对折线图的封装

核心库 echarts lodash ResizeListener 代码 <!-- @Author: your name

雨点打透心脏的1/2处/ 2022年12月24日 02:58/ 0 赞/ 198 阅读

相关 echarts折线图

记录echarts折现图配置我们先来看看效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

拼搏现实的明天。/ 2022年11月18日 13:44/ 0 赞/ 269 阅读

相关 php 折线图canvas,canvas绘制折线图(仿echarts)

1 2 3 4 5 echarts绘制 6 7 8 9 10 varscale= 2;11 varcanvas遇新是直朋能到=document.getEle

╰+攻爆jí腚メ/ 2022年11月18日 08:30/ 0 赞/ 272 阅读

相关 html5 canvas word,HTML5 Canvas

Canvas 转为图片我们可以使用 Canvas2image 库将 canvas 转换为图片。使用方式如下： Canvas2Image.saveAsImage(can

朴灿烈づ我的快乐病毒、/ 2022年10月07日 12:47/ 0 赞/ 257 阅读

相关基于html5 canvas的进度显示图表

文章出处：[http://blog.csdn.net/huoer\_12/article/details/38960955][http_blog.csdn.net_huoer_

你的名字/ 2022年08月11日 16:49/ 0 赞/ 190 阅读

相关 echarts折线图案例基于echarts-plain.js

最近接触前端,要写个报表,但是由于公司用的是echarts-plain.js,导致我在网上找到的许多属性设置的东西由于就是不同而失去作用. 使用echarts-plain.

比眉伴天荒/ 2022年05月11日 18:04/ 0 赞/ 306 阅读

相关 echarts折线图

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0J

我不是女神ヾ/ 2022年04月18日 04:09/ 0 赞/ 359 阅读

相关基于Echarts的HTML5 Canvas折线图柱状图DEMO演示

HTML代码： <div id="barChart" style="height: 400px;width:600px;background:white;margi

今天药忘吃喽~/ 2022年04月13日 08:58/ 0 赞/ 272 阅读

相关基于Echarts的HTML5 Canvas折线图DEMO演示

HTML代码： <div id="lineChart" style="height: 400px;width:600px;background:white;marg

谁借莪１个温暖的怀抱￠/ 2022年04月13日 08:51/ 0 赞/ 321 阅读

相关 HTML5画布canvas实战(1)--折线图

画布基本教程 [画布基础知识和绘制][Link 1] [Canvas MDN][] 唠唠叨叨 > canvas 是 HTML5 新增的元素，可用于通过使用Ja

左手的ㄟ右手/ 2022年02月23日 06:34/ 0 赞/ 696 阅读