echarts 折线图模板

最新推荐文章于 2024-08-13 12:00:00 发布
最新推荐文章于 2024-08-13 12:00:00 发布
阅读量920 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Caroline_Yang/article/details/81909545
版权
本文详细介绍了如何利用ECharts库创建一个交互式的动态折线图，包括设置图表数据、配置项，以及实现数据实时更新的功能，适合前端开发者参考学习。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/echarts.js"></script>
</head>
<body>
<div id="main" style="height:500px;width: 800px"></div>
<script>
    var sex;
    if(Math.floor(Math.random()*2+1)==1){
        sex='男';
    }else{
        sex='女';
    }
    // 基于准备好的dom，初始化echarts图表
    Date.prototype.format = function (format) {
        var args = {
            "M+": this.getMonth() + 1,
            "d+": this.getDate(),
            "h+": this.getHours(),
            "m+": this.getMinutes(),
            "s+": this.getSeconds(),
            "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
            "S": this.getMilliseconds()
        };
        if (/(y+)/.test(format))
            format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var i in args) {
            var n = args[i];
            if (new RegExp("(" + i + ")").test(format))
                format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? n : ("00" + n).substr(("" + n).length));
        }
        return format;
    };
    function timestampToTime(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate() + ' ';
        return Y+M+D;
    }
    var date=new Date();
    var dates=[];
    function randomDate(date,num) {
        // var num=Math.floor(Math.random()*10+1);
        for(let i=0;i<num;i++){
            var d=timestampToTime((date.getTime()-2592000000*i)/1000);
            dates.push(d);
        }
        return dates;
    }
    var times=randomDate(date,Math.floor(Math.random()*11+1));//有多少个日期
    console.log(times);
    function perColor(num) {
        var colorArr=['#e03134','#eea345','#ffd104', '#43a546'];
        if(num>=0 && num<25){
            var pColor=colorArr[3];
        }else if(num>=25 && num<50){
            var pColor=colorArr[2];
        }
        else if(num>=50 && num<75){
            var pColor=colorArr[1];
        }else{
            var pColor=colorArr[0];
        }
        return pColor;
    }
    function menPercent(sum) {
        var score=[];
        var percent=[3,3,4,4,5,5,6,7,8,10,11,13,15,17,20,22,26,29,33,37,42,47,52,57,63,68,74,79,84,88];
        for(let i=1;i<=30;i++){
            score.push(i);
        }
        for(let i=0;i<score.length;i++){
            if(sum==score[i]){
                per=percent[i];
            }
        }
        if(sum>30){
            per=88;
        }
        return per;
    }
    function womenPercent(sum) {
        var score=[];
        var percent=[1,1,2,2,2,3,4,4,5,6,8,9,11,13,16,19,23,27,32,37,43,50,57,64,71,78,84];
        for(let i=1;i<=27;i++){
            score.push(i);
        }
        for(let i=0;i<score.length;i++){
            if(sum==score[i]){
                per=percent[i]
            }
        }
        if(sum>27){
            per=84;
        }
        return per;
    }
    var colNameArr=['COL_8769','COL_8770','COL_8771','COL_8772','COL_8768','COL_8773','COL_8774','COL_8775','COL_8776','COL_8777','COL_8778','COL_8779','COL_8780','COL_8781','COL_8782','COL_8783'];
    var DanArr=['0','1','2','3','4','5','6','7','8','9','10'];
    var DanArr1=['0','2'];
    var DanArr2=['0','3'];
    var DanArr3=['0','4'];
    var DanArr4=['0','5'];
    var DanArr5=['0','6'];
    var age=Math.floor (Math.random()*(DanArr.length));
    function faker() {
        function fake() {
            var datee=Math.floor (Math.random()*2);
            return datee;
        }
        var rtList=[];
        for(var i=0;i<times.length;i++) {
            if(sex=='男'){
                rtList.push({
                    COL_8608:times[i],
                    COL_8769:DanArr[age],
                    COL_8770:DanArr[Math.floor (Math.random()*(DanArr.length))],
                    COL_8771:DanArr[Math.floor (Math.random()*(DanArr.length))],
                    COL_8772:DanArr1[fake()],
                    COL_8768:DanArr2[fake()],
                    COL_8773:DanArr3[fake()],
                    COL_8774:DanArr3[fake()],
                    COL_8775:DanArr4[fake()],
                    // COL_8776:DanArr[fakelis()],
                    // COL_8777:DanArr[fakelis()],
                    // COL_8778:DanArr[fakelis()],
                    // COL_8779:DanArr[fakelis()],
                    // COL_8780:DanArr[fakelis()],
                    // COL_8781:DanArr[fakelis()],
                    // COL_8782:DanArr[fakelis()],
                    // COL_8783:DanArr[fakelis()]

                });
            }else{
                rtList.push({
                    COL_8608:times[i],
                    COL_8769:DanArr[age],
                    COL_8770:DanArr[Math.floor (Math.random()*(DanArr.length))],
                    COL_8771:DanArr[Math.floor (Math.random()*(DanArr.length))],
                    COL_8772:DanArr2[fake()],
                    COL_8768:DanArr2[fake()],
                    COL_8773:DanArr1[fake()],
                    COL_8774:DanArr5[fake()],
                    COL_8775:DanArr3[fake()],
                    // COL_8776:DanArr[fakelis()],
                    // COL_8777:DanArr[fakelis()],
                    // COL_8778:DanArr[fakelis()],
                    // COL_8779:DanArr[fakelis()],
                    // COL_8780:DanArr[fakelis()],
                    // COL_8781:DanArr[fakelis()],
                    // COL_8782:DanArr[fakelis()],
                    // COL_8783:DanArr[fakelis()]

                });
            }

        }
        return rtList;
    }
    // var dateArrlength=Math.floor (Math.random()*(times.length));//随机条数
    a=faker();
    // console.log(a[1]);
    function sum1(a) {
        var k=0;
        for(var index in a){
            if(index!="COL_8608"){
                k=k+parseInt(a[index]);
            }
        }
        return k
    }
    console.log('sum1(a[1])=',sum1(a[1]));
    if(sex=="男"){
        var k=[];
        var arr=0;
        for(let i=0;i<times.length;i++){
            k.push(menPercent(sum1(a[i])));

        }
    }else{
        var k=[];
        for(let i=0;i<times.length;i++){
            k.push(womenPercent(sum1(a[i])));
        }
    }
    console.log(k)
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '10年卒中风险',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {//鼠标滑过的线条样式
                type: 'line',
                lineStyle: {
                    color: 'red',//颜色
                    width: 1,//宽度
                    type: 'solid'//实线
                },

            },
            formatter: function (value) {//鼠标滑过时显示内容的格式化
                var res = "<div>日期：" + value[0].axisValue + "</div>";
                res += "<div>10年卒中风险：<span style='color:" + perColor(value[0].data) + ";'>" + value[0].data + "%</span></div>";
                return res;
            }
        },
        //右上角工具条
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},//目前还不知道有啥用
                dataView: {show: true, readOnly: true},//数据视图
                magicType: {show: true, type: ['line', 'bar']},//折线与柱状的切换
                restore: {show: true},//重置
                saveAsImage: {show: true}//保存为图片
            }
        },
        calculable: true,
        xAxis: [{
            type: 'category',
            name: '日期',
            boundaryGap: false,//若为true,则x轴的值不在刻度上.
            data: times,
        }],
        yAxis: [{
            type: 'value',
            name: "百分比",
            axisLabel: {//y轴的内容格式化,很有用的属性
                formatter: '{value}%'
            }
        }],
        legend: {
            data: ['10年卒中风险']//要与series中的name一致
        },
        series: [{
            itemStyle: {
                normal: {
                    lineStyle: {
                        color: '#fff'//控制折线颜色
                    }
                }
            },
            name: '10年卒中风险',
            type: 'line',
            data: k,
            markPoint: {
                data: [/*显示最值*/
                    {type: 'max'},
                    {type: 'min'},
                ],
            },
            markLine: {
                data: [
                    {type: 'average'}//显示平均值
                ]
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#e03134'//['#e03134','#eea345','#ffd104', '#43a546']
                    }, {
                        offset: 0.5,
                        color: '#eea345'
                    },{
                        offset: 0.75,
                        color: '#ffd104'
                    },
                        {
                        offset: 1,
                        color: '#43a546'
                    }]),
                }
            }

        }]
    };
    // 为echarts对象加载数据
    myChart.setOption(option);
</script>
</body>
</html>

 

Caroline_Yang
关注
echarts折线图不显示y轴值_Echarts 折线图y轴标签值太长时显示不全的解决办法
weixin_33907300的博客
01-13 5706
问题先看一下正常的情况再看一下显示不全的情况所有的数据都是从后台取的，也就是说动态变化的，一开始的时候数据量不大不会出现问题，后面y轴的值越来越大的时候就出现了这个显示不全的情况。分析先贴一下页面代码HTML最近30天最近15周最近12个月CSS.row-wrapper {padding: 10px 15px;border-top: 8px #eee solid;font-size: 15px;c...
ECHARTS模板
03-18
4个ECHARTS模板，基于大数据DASHBOARD的几个漂亮的ECHART模板，
echarts 图表 折线图
07-21
echarts 图表 折线图
echarts 折线图_数据量大_自动滚动加载_相关属性dataZoom_常用图表配置_数据可视化
最新发布
aibujin的博客
08-13 1109
echarts 项目可视化、echarts 数据量大，自定滚动，加载数据、echarts 阶梯瀑布图、echarts 阶梯折线图、 ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts 关系图、echarts 知识图谱、ecahrts 地图、ecahrts 地图 josn 文件、地图json免费下载、echarts k线图、echarts环形图、echarts 3D 柱状图、echarts 象形柱图、echarts 自定义样式
Echarts饼图显示模板
weixin_30905981的博客
04-05 304
图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。可选为： 'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图） 'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图） 饼图：'echarts/chart/pie' // 使用柱状图就加载bar模...
ECharts 图形化看板 模板（简单实用）
qq_65142821的博客
06-04 850
select: {name: "商品展示",},},
echarts模版
07-22
echarts模版
echarts折线图模板
09-06
这是一个基本的 Echarts 折线图模板： ```html <!DOCTYPE html> <title>Echarts 折线图 <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"> ; height: 400px;"> // 初始...
echarts折线图+饼图双图联动示例
07-15
echarts折线图+饼图双图联动示例
vue+echarts实现动态折线图的方法与注意
10-14
在Vue.js框架中结合ECharts库创建动态折线图，主要涉及到以下几个关键步骤和技术要点： 1. **引入ECharts库**： 在项目中安装ECharts依赖，可以通过npm或yarn进行安装： ``` npm install echarts ``` 2. **在...
echarts 折线图 设置y轴最小刻度_手把手教你玩转echarts(二)折线图
weixin_39717692的博客
11-21 2487
茫茫人海中与你相遇相信未来的你不会很差作者：婷酱Yaaa来源：https://juejin.im/post/5f0292d35188252e5a5dbed0前言哈喽，everybody,我又来了。话不多说，这次给大家带来的是echarts系列之折线图，满满的干货。一个小实例让你对echarts折线图不再陌生！剖析你的心啊呸，错了，是剖析设计图。心有啥好剖析的????简简单单的设计图，那让我们来...
Echarts模板.rar
11-19
一个基于echarts做的大数据可视化模板，一个基于echarts做的大数据可视化模板，一个基于echarts做的大数据可视化模板
echarts模版.rar
06-24
echarts各类模版，仅仅个人使用
echarts模板.rar
08-21
主要是一些有关echarts的模板，方便使用，避免浪费大量时间去做，并不需要积分
Echarts开发模板
12-07
模板上包括地图，折线图、柱状图、散点图、K线图、饼状图、雷达图、和弦图、仪表盘、漏斗图和力导图等等，复制过去既可使用，非常的方便高效能应用到项目组中去。
四套Echarts模板（基于大数据DASHBOARD）.rar
12-12
4个ECHARTS模板，基于大数据DASHBOARD的几个漂亮的ECHART模板
echarts模板
longbao_1的博客
11-22 449
一、成果样式 二、代码配置 数据内容 cdata: { category: [ "50", "31", "42", "33", "54", "55", "56", "57", "58", "59", "60", "11", .
Echart通用模板
KeepLearningDay的博客
10-09 1091
Echarts中所有数据的通用模板 只需要将数据添加至 myChart.setOption( //放入Echart数据对象 ) <template> <div> <div class="pie"> <div :id="id" class="chart"></div> </div> </div> </template>
Echarts数据可视化通用模板
07-04
Echarts html 相关的 数据可视化通用模板，可借鉴设计
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值