ECharts 自学笔记 | 折线图

最新推荐文章于 2024-09-07 20:53:35 发布

SoI_

最新推荐文章于 2024-09-07 20:53:35 发布

阅读量62

点赞数

文章标签： echarts 笔记前端

本文链接：https://blog.csdn.net/m0_74062159/article/details/130855271

版权

该代码示例展示了如何使用EchartsJavaScript库创建一个基本的折线图，包括设置x轴和y轴数据，添加提示信息，配置图表样式，如颜色、线条类型和平滑度，以及显示最大值、最小值和平均值标记。同时，还包含了区域填充和堆叠效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>折线图的基本实现</title>
    <script src="./echarts.min.js"></script>
</head>


<body>
    <div id = 'main' style="width: 500px;height: 500px;"></div>


    <script>
        
        var myChart = echarts.init(document.getElementById('main'));
        var xDataArr = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
        var yDataArr =  ['600','900','666','500','666','555','900','666','500','666','555','600'];
        var yDataArr2 =  ['1600','1900','1666','1500','1666','1555','1900','1666','1500','1666','1555','1600'];


        var option = {

            title: {
                 text: '折线图',
                 textStyle:{
                 color:'darkred',
                 fontSize:'35px'
                }
            },
            tooltip: {
                show:true ,//默认位true
                // trigger:'axis'
                trgger: 'item'
            },


            xAxis : {
                data : xDataArr,
                type : 'category',//按x轴的数据化为类
                boundaryGap: false //x第一个紧紧贴着y轴
            },


            yAxis :{
                type:'value',//会自动按照series下的几个对象的data来对应y轴的值
                scale:true //y轴不必从0开始
            },


            toolbox:{
                feature:{
                    magicType:{
                       type: ['line','bar']
                    },
                    dataView:{},
                    dataZoom:{}
                }
            },

            legend:{
                data:['工资']
            },


            series :[{
                type:'line',
                name :'工资',
                data : yDataArr,
                color:'yellowgreen',
                //柱的宽度
                barWidth:'40%',
                //每条线的属性
                label:{
                    show:true,
                    color:'brown',
                    rotate:0,
                    position:'inside'
                },
                //标记最大最小值
                markPoint: {
                    data:[
                        {
                            
                            type:'max',name:'最大值'
                        },
                        {
                            
                            type:'min',name:'最大值'
                        }
                    ]
                },
                //标记平均值
                markLine:{
                    data:[
                        {
                            type:'average',name:'平均值'
                        }
                    ]
                },


                //对一段区域进行着色重点
                markArea:{
                    data:[
                        [
                            {xAxis:'1月'},
                            {xAxis:'3月'}
                        ],
                        [   
                            {xAxis:'7月'},
                            {xAxis:'8月'}]
                        
                    ]
                },

                //使线条变得平滑
                smooth:true,
                lineStyle:{
                    //线条颜色
                    color:'yellowgreen',
                    // 虚线、点线、实线
                    // type:'dashed'
                    // type:'dotted'
                    type:'solid'//默认实线  
                },
                //曲线以下的填充
                areaStyle:{ 
                    color:'pink'
                },
                stack:'s1'//stack俩series数组应相等
            },
            {
                name:'负债',
                type:'line',
                data : yDataArr2,
                color:'yellowgreen',
                //柱的宽度   
                barWidth:'40%',
                smooth:true,
                stack:'s1',
                areaStyle:{ 
                    color:'grey'
                },
            }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>