echarts 多折线图

最新推荐文章于 2023-11-22 14:13:10 发布

采精小蝴蝶

最新推荐文章于 2023-11-22 14:13:10 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/jrrfgj/article/details/83834814

版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

1、问题背景

设计一个折线图，折线图展示苹果、香蕉的销售量

2、实现源码

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>echarts-多折线图</title>  <script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>  <script type="text/javascript" src="../js/echarts-2.2.7/build/dist/echarts-all.js" ></script>  <style>   body,html{    width: 99%;    height: 99%;    font-family: "微软雅黑";    font-size: 12px;   }   #someline{    width:100%;    height:99%;   }  </style>  <script>   $(document).ready(function(){    var chart = document.getElementById("someline");    var echart = echarts.init(chart);    var option = {        title: {            text: '水果销售量'        },        tooltip : {            trigger: 'axis'        },        legend: {            data:['苹果','香蕉']        },        toolbox: {            feature: {                saveAsImage: {}            }        },        grid: {            left: '3%',            right: '4%',            bottom: '3%',            containLabel: true        },        xAxis : [            {                type : 'category',                boundaryGap : false,                data : ['第一季度','第二季度','第三季度','第四季度']            }        ],        yAxis : [            {                type : 'value'            }        ],        series : [            {                name:'苹果',                type:'line',                stack: '销量',                areaStyle: {normal: {}},                data:[1270, 6382, 2091, 1034]            },            {                name:'香蕉',                type:'line',                stack: '销量',                areaStyle: {normal: {}},                data:[2270, 3456, 5432, 3423]            }        ]    };        echart.setOption(option);     });  </script> </head> <body>  <div id="someline"></div> </body></html>