折线图基础应用

最新推荐文章于 2023-07-21 16:39:26 发布

紫苏炒米饭

最新推荐文章于 2023-07-21 16:39:26 发布

阅读量131

点赞数

分类专栏： echarts 文章标签：前端

本文链接：https://blog.csdn.net/weixin_45615607/article/details/121754838

版权

echarts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了折线图的基础应用，包括如何使用markPoint标记最大、最小和平均值，通过markArea进行区间标注，以及线条的控制如平滑处理、lineStyle样式和颜色设定。此外，还讨论了线条类型的设置，如实线、虚线和点线。填充风格利用areaStyle实现，并且可以通过设置boundaryGap为false使图表紧挨边缘。最后，文章提到了缩放功能和堆叠图的实现，通过scale属性控制比例，并使用stack属性实现数据堆叠。

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

标记：

最大，小值：markPoint，

平均值：markLine，

标注区间：markArea

线条控制：

smooth：true//平滑

lineStyle//样式

coloer//颜色

type：线条类型

dashed：虚线

solid：实线

dotted：点线

填充风格：

areaStyle

紧挨边缘：

boundaryGap:false

缩放：脱离0值比例：

scale：true

堆叠图：

stack：'all'

<!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>Document</title>
    <script src="../lib/echarts.min.js"></script>
</head>

<body>
    <div id="main" style="width: 600px;height: 500px;"></div>
    <script>
        var mCharts = echarts.init(document.querySelector('div'))
        var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        var yDataArr = [3000, 1800, 900, 1000, 1800, 1700, 1400, 1300, 1900, 1000, 800, 600]
        //[3000, 2800, 2600, 2400, 2200, 2000, 1800, 1600, 1400, 1200, 1000, 900]
        
        var yDataArr2 = [3005, 3003, 3001, 3002, 3009, 3007, 3003, 3001, 3005, 3004, 3001, 3009]
        var option = {
            xAxis: {
                type: 'category',
                data: xDataArr,
                boundaryGap:false
            },
            yAxis: {
                type: 'value',
                scale:true
            },
            series:
                [
                    {
                        name: '牛老板',
                        data: yDataArr,
                        type: 'line',
                        stack:'all',
                        areaStyle:{},
                        markPoint: {
                            data: [
                                { type: 'max' },
                                { type: 'min' }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: 'average' }

                            ]
                        },
                        markArea: {
                            data: [
                                [
                                    { xAxis: '1月' },
                                    { xAxis: '2月' }
                                ],
                                [
                                    { xAxis: '11月' },
                                    { xAxis: '12月' }
                                ],
                                [
                                    { yAxis: '1500' },
                                    { yAxis: '2000' }
                                ]
                            ]
                        },
                        smooth:true,//平滑
                        lineStyle:{
                            color:'black',
                            type:'dashed'//solid,dotted
                        },
                        areaStyle:{}

                    },
                    //堆叠图
                    // {
                    //     type:'line',
                    //     data:yDataArr2,
                    //     stack:'all',
                    //     areaStyle:{}
                    // }
                ]
        }
        mCharts.setOption(option)
    </script>
</body>

</html>