ECharts学习--折线图

最新推荐文章于 2022-09-17 16:37:08 发布

有一种陪伴叫做jay

最新推荐文章于 2022-09-17 16:37:08 发布

阅读量220

点赞数

分类专栏： ECharts 文章标签：数据可视化

本文链接：https://blog.youkuaiyun.com/weixin_46198692/article/details/110248974

版权

本文介绍了ECharts中如何创建折线图，包括基本配置和堆叠图的实现方法，通过使用stack属性来实现数据的堆叠展示，并提供了堆叠图的示例效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（一）常见的折线图配置

<div style="width: 700px;height: 400px;"></div>
<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var yData = [3000, 2000, 1000, 3500, 2000, 5000, 7000, 2000, 10000, 4000, 2400, 1200];
    var xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
    var option = {
        title: {
            text: '工资表',
            textStyles: {
                color: '#555'
            }
        },
        tooltip: { // 提示框组件
            tigger: 'item', // 鼠标移动到点显示
        },
        xAxis: {
            type: 'category',
            data: xData,
            boundaryGap: false, // 紧挨边缘
            scale: true // 缩放 脱离0值比例
        },
        yAxis: {
            type: 'value'