用ECharts绘制折线图

蛋黄酥要不要来一口阿

于 2021-03-19 14:25:02 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

分类专栏： Echarts 前端文章标签：前端 echarts 程序人生经验分享

本文链接：https://blog.youkuaiyun.com/Kepler_II/article/details/115005431

本文分享如何使用ECharts库来绘制折线图，并详细介绍了如何设置填充底部及自定义填充颜色，为前端开发者提供了实用的经验和技巧。

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

type:'line'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折线图</title>
    <script src="script/echarts.min.js"></script>
</head>
<body>
<!--为echarts准备一个容器，画图就画在里面-->
<div id="box" style="width: 600px;height: 600px;"></div>
<script>
    //初始化ehcharts实例
    var myChart=echarts.init(document.getElementById("box"));
    //指定图表的配置项和数据
    var option={
        //标题
        title:{
          text:'生鲜销量统计'
        },
        //工具箱
        //保存图片
        toolbox:{
            show:true,
            feature:{
                saveAsImage:{
                    show:true
                }
            }
        },
        //图例-每一条数据的名字叫销量
        legend:{
            data:['销量']
        },
        //x轴
        xAxis:{