可视化例子(14)——ECharts波浪图(或者称为河流图)

最新推荐文章于 2024-03-01 11:00:35 发布

爱睡懒觉的老舅

最新推荐文章于 2024-03-01 11:00:35 发布

阅读量3.9k

点赞数 3

分类专栏：可视化 Echarts 文章标签： Echarts 可视化

本文链接：https://blog.csdn.net/ocean111best/article/details/104949242

版权

可视化同时被 2 个专栏收录

16 篇文章 4 订阅

订阅专栏

Echarts

15 篇文章 0 订阅

订阅专栏

主要是在 series.itemStyle 里面设置 areaStyle 属性

areaStyle:{  //有这个属性代表是波浪图
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#737373'},
                                {offset: 0.5, color: '#252525'},
                                {offset: 1, color: '#252525'}
                            ]
                        )
                    },

全部代码如下

<!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>
<title>广州市每日确诊人数</title>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/echarts-gl.min.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;

//广州市每日累计确诊总人数
dataGD01 = [2,5,7,14,14,39,51,63,79,106,137,175,189,216,237,
    255,284,298,304,313,317,323,327,328,335,338,339,339,339,339];
//广州市每日累计出院人数
dataGD02 = [0,0,0,0,0,0,0,0,0,1,3,3,3,3,7,
    13,20,27,36,42,49,70,78,93,106,121,131,142,148,157];

data_name = ['1/21','1/22','1/23','1/24','1/25','1/26',
    '1/27', '1/28', '1/29', '1/30', '1/31', '2/1',
    '2/2', '2/3', '2/4', '2/5', '2/6', '2/7', '2/8',
    '2/9', '2/10','2/11','2/12','2/13','2/14','2/15','2/16','2/17','2/18','2/19'];

option = {

    tooltip: {
        trigger: 'axis'
    },
    title: {
        text: '广州市每日累计确诊和累计出院人数变化趋势',
        top:12,
        left: 'center',
        textStyle:{
            fontSize: 25
        }
    },
    legend: {
        orient: 'vertical',
        itemWidth: 20,
        itemHeight:10,
        left: 30,
        top:10,
        data: [ '广州市每日累计确诊人数', '广州市每日累计出院人数']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '9%',
        containLabel: true
    },
    toolbox: {
        feature: {
            // saveAsImage: {}//将统计图保存为
        }
        ,right:100
        ,top:0
    },
    xAxis: {
        //'name':'时间',
        type: 'category',
        axisLabel: {
            show: true,
            interval:0,
            rotate:0,
            axisLabel:{'interval':0},
//            formatter:function(params) {
//                var newParamsName = "";
//                var paramsNameNumber = params.length;
//                var provideNumber = 3;  //一行显示几个字
//                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
//                if (paramsNameNumber > provideNumber) {
//                    for (var p = 0; p < rowNumber; p++) {
//                        var tempStr = "";
//                        var start = p * provideNumber;
//                        var end = start + provideNumber;
//                        if (p == rowNumber - 1) {
//                            tempStr = params.substring(start, paramsNameNumber);
//                        } else {
//                            tempStr = params.substring(start, end) + "\n";
//                        }
//                        newParamsName += tempStr;
//                    }
//
//                } else {
//                    newParamsName = params;
//                }
//                return newParamsName
//            },
            textStyle: {
                fontWeight:'bold',
                fontSize: 9, //横轴文字大小
                color: '#0712a6' //文字颜色
            }
        },
        boundaryGap:false,
        data:data_name
    },
    yAxis: {
        type: 'value',
        splitNumber:10,  //设置纵轴刻度
        splitLine:{
            show:true,
            lineStyle:{
                type:'dashed'
            }
        }
    },
    series: [
        {
            name:'广州市每日累计确诊人数',
            type:'line',
            stack: '总量1',   //要这个变量相同才能堆积起来
            smooth:true,
            symbolSize:14,
            data:dataGD01,
            //itemStyle : {normal : {color:'#ffc400'}},
            itemStyle: {
                normal: {
                    label : {
                        show:true,
                        position:'bottom',
                        formatter:'{c}'
                    },
                    areaStyle:{  //有这个属性代表是波浪图
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#737373'},
                                {offset: 0.5, color: '#252525'},
                                {offset: 1, color: '#252525'}
                            ]
                        )
                    },
                    color:'#08306B'
                }
            }
        },
        {
            name:'广州市每日累计出院人数',
            type:'line',
            stack: '总量1',
            smooth:true,
            symbolSize:14,
            data:dataGD02,
            //itemStyle : {normal : {color:'#ffc400'}},
            itemStyle: {
                normal: {
                    label : {
                        show:true,
                        position:'top',
                        formatter:'{c}'
                    },
                    areaStyle:{
                        color:new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#99D8C9'},
                                {offset: 0.5, color: '#238B45'},
                                {offset: 1, color: '#238B45'}
                            ]
                        )
                    },
                    color:'#238B45'
                }
            }
        }

    ]
};
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
</script>
</body>
</html>

爱睡懒觉的老舅

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
4
评论
可视化例子(14)——ECharts波浪图(或者称为河流图)

主要是在 series.itemStyle 里面设置 areaStyle 属性areaStyle:{ //有这个属性代表是波浪图 color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, ...
复制链接

扫一扫