echarts实现折线图的绘制

最新推荐文章于 2025-03-19 10:47:06 发布

qq_42566295

最新推荐文章于 2025-03-19 10:47:06 发布

阅读量8.4k

点赞数 2

分类专栏：日常总结--javascript

本文链接：https://blog.youkuaiyun.com/qq_42566295/article/details/81129835

版权

先来看一下效果图：

实现的是2013年到2017年，每个产品的数量统计折线图

代码如下：

首先从echarts官网上下载echarts.js文件

<script src="echarts.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="jquery1.3.2.min.js"></script>
    <script src="echarts.js"></script>
</head>
<body>
<div id="product3" style="width: 30%;height: 300px;"></div><!--折线图容器-->
<script>
    $(function(){
        /*
        * 折线图 按年份分析产品的数量
        */
        // 基于准备好的dom，初始化echarts实例
        var productChart3 = echarts.init(document.getElementById('product3'));
        //假设datalist是我们从后台获取到得数据
        var datalist = [
            {
                "name": "apple",
                'y2013':{
                    "counts": "9"
                },
                'y2014':{
                    "counts": "6"
                },
                'y2015':{
                    "counts": "9"
                },
                'y2016':{
                    "counts": "4"
                },
                'y2017':{
                    "counts": "5"
                }
            },
            {
                "name": "banana",
                'y2013':{
                    "counts": "56"
                },

最低0.47元/天解锁文章