echarts实践总结（常用二）：折线图（特点：渐变、面积区域）

目录

第一章 echarts基本使用

第二章 echarts实践——折线图

---

• 效果展示

第一章 echarts基本使用

Echarts常用配置项(详细入门)_echarts配置项手册-优快云博客

柱状图案例：

echarts实践总结(常用一)：柱状图（特点：渐变色、点击缩放、左右滑动、悬浮展示样式）-优快云博客

第二章 echarts实践——折线图

• 实现的效果主要为：折线下区域渐变展示。
• html部分：

<div class="view" style="width: 1000px;height: 500px;">
    <!-- 折线图 -->
    <div id="handlerView" style="width: 100%;height: 100%;"></div>
</div>

• js部分：

<script src="./base_js/echarts.min.js"></script>
<script>
    const lineChartDom = document.getElementById('handlerView')
    // 指定图表的配置项和数据
    const MONTHS = [
        '01月',
        '02月',
        '03月',
        '04月',
        '05月',
        '06月',
        '07月',
        '08月'
    ]
    const SHIPMENT_DATA = new Array(8).fill(0).map(() => Math.floor(Math.random() * 8000))
    function renderChartEcharts() {
        // 基于准备好的dom，初始化echarts实例
        const lineChart = echarts.init(lineChartDom)
        const chartOptions = {
            tooltip: { // 提示框组件
                trigger: 'axis', // 坐标轴触发
                // 提示框浮层内容格式器：自定义
                formatter: ` 
                    <span class="chart-title">{b}访问量</span><br />
                    <h4 class="chart-data">
                      访问量： <span>{c0}</span>次<br />
                    </h4>
                `,
                valueFormatter: () => '', // tooltip 中数值显示部分的格式化回调函数
                axisPointer: { // 指示器样式
                    type: 'line',
                    label: {
                        backgroundColor: '#6a7985'
                    },
                    lineStyle: {
                        type: 'dashed',
                        color: '#87B1FE'
                    }
                }
            },
            legend: {
                right: 0 // 图例组件离容器右侧的距离
            },
            grid: { // 图表位置
                left: '2%',
                top: '12%',
                right: '2%',
                bottom: '2%',
                containLabel: true
            },
            xAxis: [ // x轴
                {
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        show: false
                    },
                    data: MONTHS // x轴数据
                }
            ],
            yAxis: [ // y轴
                {
                    type: 'value',
                    name: '单位(件)',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: '#E7E7E7'
                        }
                    },
                }
            ],
            series: [
                {
                    name: '办件数量',  // 系列名称
                    color: '#528DFB', // 颜色
                    type: 'line', // 图表类别
                    /*
                        'samesign' 只在要堆叠的值与当前累积的堆叠值具有相同的正负符号时才堆叠。
                        'all' 堆叠所有的值，不管当前或累积的堆叠值的正负符号是什么。
                        'positive' 只堆积正值。
                        'negative' 只堆叠负值。
                    */
                    stack: 'Shipment', // 数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置
                    symbol: 'circle',
                    areaStyle: { // 区域填充样式。设置后显示成区域面积图。
                        color: { // 填充的颜色 -- 自定义区域渐变颜色
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0.25,
                                    color: '#CBDDFE'
                                },
                                {
                                    offset: 1,
                                    color: '#fff'
                                }
                            ]
                        }
                    },
                    lineStyle: { // 线条样式
                        color: '#528DFB'
                    },
                    emphasis: { // 折线图的高亮状态
                        /*
                            'none' 不淡出其它图形，默认使用该配置。
                            'self' 只聚焦（不淡出）当前高亮的数据的图形。
                            'series' 聚焦当前高亮的数据所在的系列的所有图形。
                        */
                        focus: 'series'
                    },
                    data: SHIPMENT_DATA
                }
            ]
        }
        // 使用刚指定的配置项和数据显示图表。
        lineChart.setOption(chartOptions)
        lineChart.resize()
        window.addEventListener('resize', () => {
            lineChart.resize()
        })
    }
    renderChartEcharts()
</script>