ECharts的学习 (三) ：折线图的学习

最新推荐文章于 2024-01-24 10:18:05 发布
最新推荐文章于 2024-01-24 10:18:05 发布
阅读量8.6k 收藏 12
点赞数 2
分类专栏： 控件学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aiyishengyishi/article/details/53435080
版权

之前在项目中利用canvas实现了折线图，在实现的过程中觉得过于繁琐，前两天看到Echarts这个插件，学习，模仿一下，中文学习网址：http://echarts.baidu.com/index.html
项目的需求为：当数据少于7个的时候，展现第一种样式，当数据多余7个的时候，采用第二种样式，如下图：

这里写图片描述这里写图片描述

实现的思路如下：
1.写出一条简单的折线图
2.修改折线图样式（7个点以内的样式和大于7个点的样式各来一个）
3.后期数据交互实现
4.完整代码

最后实现效果如下（这里把折线改成了曲线）：

这里写图片描述这里写图片描述

一.实现简单的折线图

效果图如下：
这里写图片描述
实现一个基本的折线图代码如下：
——css—–

<style type="text/css">
    html,body{
        margin:0;
        padding: 0;
    }
    .chartContainer{
        width:100%;
        height:10rem;
        border:1px solid pink;
        box-sizing:border-box;
    }
</style>

—–html—–

<body>
    <div class="chartContainer" id="chart1"></div>
</body>

——js——

<script type="text/javascript">
    //初始化echarts实例
    var chart1=$("#chart1").get(0);
    var myChart=echarts.init(chart1);
    var chartDate=[1,3,5,8,10,15,18,22,25,28,30];
    //var weight=[55.4,55.9,53];
    var weight=[55.4,55.9,53,56,57,58,56.7,53,55,54,53];
    //对echarts做基础配置
    option={
        xAxis:{
            data:chartDate
        },
        yAxis:{
        },
         series:[
            {
                name:"体脂",
                type:"line",//折线图，还有pie（饼状图），
                data:weight
            }
        ]
    }
    myChart.setOption(option);
</script>

二.修改折线图样式

1：少于7个点的样式
最后实现效果如下图：

这里写图片描述
<1>调整折线的折线颜色，隐藏x,y轴

这里写图片描述

 series:[
    {
        name:"体脂",
        type:"line",//折线图，还有pie（饼状图），
        data:weight,
        lineStyle:{//线条颜色
            normal:{
                color: '#1daffa',
            }
        },
    }
]

<2>调整标注的颜色

这里写图片描述

series:[
    {
        name:"体脂",
        type:"line",//折线图，还有pie（饼状图），
        data:weight,
        lineStyle:{//线条颜色
            normal:{
                color: 'rgba(29, 175, 250, 0.3)',
            }
        },
        itemStyle:{
            normal:{
                color: 'rgba(29, 175, 250, 0.3)',
            }
        }
    }
]

<3>调整y轴，使y坐标轴从数据最小点开始（不是从0开始，从0开始数据域范围太窄）

这里写图片描述

yAxis:{
   min:"dataMin",//可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
   show:false
},

<4>调整标注样式

这里写图片描述
本来是打算用代码实现外面是半透明，里面是蓝色实心的样式，但是没有找到设置的，看看以后能不能优化，现在用图片代替。
在series里面添加：

symbol:'image://image/dot1.png',
//设置标注点的图片，或者有('circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow')
symbolSize:10,//标注点的大小

<5>添加标注文本，修改样式

这里写图片描述
在series里面添加：

label:{
    normal:{
        show:true,
        position:[0,-20],
        textStyle:{
            color:"#1daffa"
        }
    }        
}

<6>去掉动画效果，把折线变成曲线
在option里面添加，和series同级

animation : false,//是否启用图表初始化动画，默认开启

这里写图片描述
在series里面添加

smooth:true,//是否平滑曲线显示。

2.大于7个点的实现
<1>首先实现一个简单的曲线，去掉标注

这里写图片描述

option2={
    xAxis:{
        data:chartDate,
        show:false
    },
    yAxis:{
        boundaryGap:false,
        min:"dataMin",
        show:false
    },
    animation : false,//是否启用图表初始化动画，默认开启
    series:[
        {
            name:"体脂",
            type:"line",//折线图，还有pie（饼状图），
            smooth:true,
            symbol:"none",//去掉标注
             lineStyle:{//线条颜色
                normal:{
                    color: '#1daffa',
                    width:1
                }
            },
            itemStyle:{
                normal:{
                    color: 'rgba(29, 175, 250, 0.3)',

                }
            },
            data:weight
        }
    ]
}

<2>实现极点的标注

这里写图片描述

在series里面添加：

markPoint: {
    data: [
        { 
            type:'max',
            symbolSize:2,
            label: {
                normal: {
                    position: 'top',
                    formatter: '{c}',
                    textStyle:{
                        color:"#1daffa"
                    }
                }
            }                       
        },
        {
            type:'min',
            symbolSize:2,
            label: {
                normal: {
                    position: 'bottom',
                    formatter: '{c}',
                    textStyle:{
                        color:"#1daffa"
                    }
                }
            }                       
        }
      ]
},

三.后期数据交互

1.当数据少于7个点的时候

var weight=[55.4,55.9,53];

这里写图片描述

//初始化echarts实例
var chart1=$("#chart1").get(0);
var myChart=echarts.init(chart1);
var chartDate=[1,3,5,8,10,15,18,22,25,28,30];
var weight=[55.4,55.9,53];
//var weight=[55.4,55.9,53,56,57,58,56.7,53,55,54,53];
var dataLength=weight.length;



var symbolImg='image://image/1.png';
if(dataLength <=7 ){
    var dataText="[";
    var dataArr=new Array();
    for(var i=0;i<7;i++){
        var noDataText="{value:"+weight[dataLength-1]+",symbol:'emptyCircle',symbolSize:5,label:{ normal:{show:false}}},";
        if(i < dataLength){
            dataArr.push({"value":weight[i],"symbol":symbolImg,"symbolSize":10});
        }else{
            dataArr.push({"value":weight[dataLength-1],"symbol":'emptyCircle',"symbolSize":5,"label":{"normal":{"show":false}}});
        }
    }
}else{
    dataArr=weight;
}

2.多余7个点

var weight=[55.4,55.9,53,56,57,58,56.7,53,55,54,53];

这里写图片描述

四.完整代码

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.js"></script>
    <script src="js/jquery-3.0.0.min.js"></script>

</head>
<style type="text/css">
    html,body{
        margin:0;
        padding: 0;
    }
    .chartContainer{
        width:100%;
        height:10rem;
        border:1px solid pink;
        box-sizing:border-box;
    }
</style>
    <body>
        <div class="chartContainer" id="chart1">

        </div>
    </body>
    <script type="text/javascript">
    //初始化echarts实例
    var chart1=$("#chart1").get(0);
    var myChart=echarts.init(chart1);
    var chartDate=[1,3,5,8,10,15,18,22,25,28,30];
    //var weight=[55.4,55.9,53];
    var weight=[55.4,55.9,53,56,57,58,56.7,53,55,54,53];
    var dataLength=weight.length;



    var symbolImg='image://image/1.png';
    if(dataLength <=7 ){
        var dataText="[";
        var dataArr=new Array();
        for(var i=0;i<7;i++){
            var noDataText="{value:"+weight[dataLength-1]+",symbol:'emptyCircle',symbolSize:5,label:{ normal:{show:false}}},";
            if(i < dataLength){
                dataArr.push({"value":weight[i],"symbol":symbolImg,"symbolSize":10});
            }else{
                dataArr.push({"value":weight[dataLength-1],"symbol":'emptyCircle',"symbolSize":5,"label":{"normal":{"show":false}}});
            }
        }
    }else{
        dataArr=weight;
    }


    //对echarts做基础配置
    option={
        xAxis:{
            data:chartDate,
            show:false
        },
        yAxis:{
            min:"dataMin",//可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
            show:false
        },
        animation : false,//是否启用图表初始化动画，默认开启
        series:[
            {
                name:"体脂",
                type:"line",//折线图，还有pie（饼状图），
                smooth:true,//是否平滑曲线显示。
                symbol:'image://image/dot1.png',//设置标注点的图片，或者有('circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow')
                symbolSize:10,//标注点的大小
                lineStyle:{//线条颜色
                    normal:{
                        color: 'rgba(29, 175, 250, 0.3)',
                    }
                },
                itemStyle:{
                    normal:{
                        color: 'rgba(29, 175, 250, 0.3)',

                    }
                },
                label:{
                    normal:{
                        show:true,
                        position:[0,-20],
                        textStyle:{
                            color:"#1daffa"
                        }
                    }        
                },
                data:dataArr,
            }
        ]
    }


    option2={
        xAxis:{
            data:chartDate,
            show:false
        },
        yAxis:{
            boundaryGap:false,
            min:"dataMin",
            show:false
        },
        animation : false,//是否启用图表初始化动画，默认开启
        series:[
            {
                name:"体脂",
                type:"line",//折线图，还有pie（饼状图），
                smooth:true,
                symbol:"none",//去掉标注
                 lineStyle:{//线条颜色
                    normal:{
                        color: '#1daffa',
                        width:1
                    }
                },
                itemStyle:{
                    normal:{
                        color: 'rgba(29, 175, 250, 0.3)',

                    }
                },
                markPoint: {
                    data: [
                        { 
                            type:'max',
                            symbolSize:2,
                            label: {
                                normal: {
                                    position: 'top',
                                    formatter: '{c}',
                                    textStyle:{
                                        color:"#1daffa"
                                    }
                                }
                            }                       
                        },
                        {
                            type:'min',
                            symbolSize:2,
                            label: {
                                normal: {
                                    position: 'bottom',
                                    formatter: '{c}',
                                    textStyle:{
                                        color:"#1daffa"
                                    }
                                }
                            }                       
                        }
                      ]
                },
                data:dataArr
            }
        ]
    }
    var dataLength=weight.length;
    if(dataLength <= 7){
        myChart.setOption(option);
    }else{
        myChart.setOption(option2);
    }
    </script>
</html>
长安古意
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
echarts后台读取数据动态生成折线图
05-09
实现了由php读取数据库后json编码传到前端ajax中，实现echarts折线图的实时刷新，(得放到你的Apache htdocs文件下用浏览器打开)内附我的echarts包和jQuery包。
Echarts：读取动态数据
Junehhhhh的博客
04-03 7200
使用Echarts画图时，数据一般不是静态写死的，而是通过后端接口动态获取的，因此本文结合官网提供的demo来演示Echarts怎么获取动态数据
01-echarts如何绘制三维折线图
最新发布
jiuliangliang的博客
01-24 994
echarts、三维折线图
Echarts折线图动态获取数据实例（附java后台代码）
Tomcat猫炸了
05-19 1万+
前一段时间项目中要做数据统计，最后采用百度的echarts来做。之前写了一篇柱状图的用法，今天把折线图的写法分享一下。当时也是跳了很多坑参考了不少大神的文章，不过许多只是把jsp页面的js代码贴了出来没有java后台的，而我的项目需求是要能动态获取后台写法只能自己慢慢琢磨，虽然过程有点波折好在是按时完成需求，为了以后使用echarts动态获取数据的同学少跳坑我把代码分享出来，以供参考。先前根据dem
echarts折线图x轴不从0开始
qq_41451744的博客
08-25 8238
在xAxis中的boundaryGap属性，设置为false代表是零刻度开始，设置为true代表离零刻度间隔一段距离。使用折线图展示相关数量时，发现在x轴上，折线不是从0开始的，结束的时候也不是在x最后。在echarts图表x轴配置信息中有一个属性来控制是不是从0开始的。修改过该属性后，就可以看到x轴就从0开始了。
vue+echarts 实现动态折线图
weixin_43453621的博客
04-15 2893
components文件夹下创建 TrendsSort.vue 文件。
echarts多条折线图动态分层的实现方法
10-16
主要介绍了echarts多条折线图动态分层的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
10-17
制作一个折线图用于显示当前24小时的数据，并且可以通过拖动折现图设置数据，接下来通过本文给大家分享vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置），感兴趣的朋友跟随一起学习吧
vue+echarts实现动态折线图的方法与注意
10-14
主要给大家介绍了关于vue+echarts实现动态折线图的方法与注意事项，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-nCov疫情实时趋势数据可视化Echarts学习(3):JSON数据和echarts柱图和折线图表的开发
01-07
了解本次学习，先回顾《2019-nCov疫情实时趋势数据可视化Echarts学习(2):获取API数据接口后数据的清洗、处理及JSON标准格式的输出》 一，将JSON数据按照echarts的data要求进行格式化； var area = [], confirmed = ...
ECharts 学习笔计——折线图
08-12
NULL 博文链接：https://llyilo.iteye.com/blog/2272690
ECharts折线从x轴原点（0点）开始
热门推荐
weixin_46021847的博客
09-20 2万+
xAxis. boundaryGap 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。 类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。 非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。 示例： boundaryGap: [‘20%’, ‘20%.
Echart常用折线图
m0_51431448的博客
05-24 9805
1. 渐变色折线图 <template> <div :id="id" style="width: 100%; height: 100%"></div> </template> <script> import { fontChart } from "@/utils/echartPxToRem"; import * as echarts from "echarts"; export default { data() { ret.
ECharts 入门级绘图（折线图 , 饼图，柱状图与进度条）
qq_45596525的博客
01-16 740
文章目录前言一、ECharts是什么？二、ECharts的使用1.环境搭建2.折线图3.柱状图与进度条4.饼图 前言 好久没正经学习了。之前一直对数据可视化超级感兴趣的，好怀念以前自由自在，能学自己喜欢的东西的日子呀！ 提示：以下是本篇文章正文内容，下面案例可供参考 一、ECharts是什么？ 二、ECharts的使用 1.环境搭建 代码如下（示例）： 在这里插入代码片 2.折线图 代码如下（示例）： 在这里插入代码片 3.柱状图与进度条 在这里插入代码片 4.饼图 在这里插入代码片 ..
echarts3的简单实践（饼图、柱形图、折线图、地图+散点图）
书写人生
02-08 2312
echarts3是向下兼容echarts2的，所以echarts2切换到echarts3基本无需改代码。饼图、柱形图、折线图：用的echarts2的配置项，但是能正常显示代码片段：[javascript] view plain copy    function loadCharts(orgCode){      /** 构建故障原因饼图 */          myChart1.showLoadi...
echarts 时间轴折线图根某个状态改变该阶段颜色
weixin_48687228的博客
08-03 398
echarts 时间轴折线图根某个状态改变该阶段颜色
echarts三段渐变色 折线图
ET_ing的博客
07-29 448
将折线分三段： 1、大于8cm的线段为红色，并且波峰部分为红色。 2、大于5cm的线段为橙色，并且渐变为橙色。 3、大于1cm的线段为黄色，并且渐变成黄色。 4、小于1cm的线段为灰色。 5、数字、标记名称分别局图形左右。............
echarts折线图y轴不从0开始
well_kk的博客
04-15 2万+
话不多说，先上结果图看看 echarts折线图默认是从0开始计算，有时候遇到统计值都波动在一定范围，不需要从0开始。 有两种方式解决: 1.设置 scale:true 2.设置min,max 这种情况是因为考虑到，折线图上会加标线markline,如果markline的值超出y轴中value的最大值，就不会显示标线了，所以要设置折线图的max 我们又希望最小值从非0开始，所以可以再设一个min,同时要考虑到markline的值比y轴value最小值小的情况。配置如下： ...
ECharts从零开始（一）
邱邱邱的博客
09-03 1764
最近发现了一个高逼格的可视化工具ECharts，在简单接触后发现是用JAVA写的，奈何不会JAVA。于是在网上搜了搜整理了下，把一些思路及参考文献放在这。 ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safa...
echarts图列折线图
08-25
Echarts折线图是一种常用的图表类型，用于展示数据的趋势和变化。它可以将多组数据以直观的方式呈现在同一个图表中。通过Echarts的配置和细节设置，可以根据需要定制出漂亮且可读性很高的可视化图表。 如果你想要在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值