01-Echarts折线图基本实现、最大值、最小值、堆叠折线图等等

最新推荐文章于 2024-06-28 17:04:30 发布

请问大家代码怎么敲

最新推荐文章于 2024-06-28 17:04:30 发布

阅读量4.6k

点赞数 1

分类专栏： Echarts 数据可视化

本文链接：https://blog.csdn.net/liumuye88888/article/details/116720774

版权

Echarts 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

数据可视化

7 篇文章 0 订阅

订阅专栏

Echarts折线图基本实现

特点

折线图常用来分析数据随时间的变化趋势

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        type:'category',
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {
        type:'value'
    },
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>

最大值、最小值、平均值、标注区间显示

都是写在series中

 series: [
        {
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20],
        markPoint: {
            data:[
                {
                    type:'max' //最大值
                },
                {
                    type:'min' //最小值
                }
            ]
        },
        markLine:{
            data:[
                {
                    type:'average' //平均值
                }
            ]
        },
        markArea:{ //标注区间 x轴衬衫-到雪纺衫有阴影
            data:[
                [
                {
                    xAxis:'衬衫'
                },
                {
                    xAxis:'雪纺衫'
                }
            ]
            ]
        }
    }
]

在这里插入图片描述

折线线条平滑效果、风格、填充效果

 		smooth:true, //线条平滑 风格
        lineStyle:{
            color:'green',
            type:'dashed' //dotted solid
        },
        areaStyle:{ //填充风格
            color:'red'
        } //填充

在这里插入图片描述

紧挨边缘

xAxis:中设置 boundaryGap:false

  xAxis: {
        type:'category',
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
        boundaryGap:false, //紧挨边缘
    },

在这里插入图片描述

脱离0值比例

**使用在数值离0都比较远并且数值都相差不多
在yAxis中加scale:true **

  yAxis: {
        type:'value',
        scale:true //脱离0值比例  离0远值都相差不多
    },
series: [
        {
        name: '销量',
        type: 'line',
        data: [1000, 1005, 1100, 1050, 1200, 980],
        stack:'all', //堆叠图
        areaStyle:{}
        }
        ]

未脱离0值比例
在这里插入图片描述
脱离0值比例显示更明显

堆叠折线图

在series中再创建一个对象,在对象中加stack:'all’是为了不让两条折线交叉,不然显得杂乱无章

series: [
        {
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20],
        stack:'all', //堆叠图
        areaStyle:{}  //填充效果 有默认颜色
        },
         {
        name: '销量',
        type: 'line',
        data: [30, 50, 10, 6, 5, 30],
        stack:'all',
        areaStyle:{
            color:'green'
        }
    }
        ]

在这里插入图片描述
更多配置请去Echarts官网学习
Echarts官网:请点击

请问大家代码怎么敲

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
01-Echarts折线图基本实现、最大值、最小值、堆叠折线图等等

目录Echarts折线图基本实现特点最大值、最小值、平均值、标注区间显示折线线条平滑效果、风格、填充效果紧挨边缘脱离0值比例堆叠折线图Echarts折线图基本实现特点折线图常用来分析数据随时间的变化趋势<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
复制链接

扫一扫

专栏目录