jQuery插件echarts實現的多折線圖效果示例【附demo源碼下載】

2019-11-19 17:19:35

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery插件echarts實現的多折線圖效果。分享給大家供大家參考，具體如下：

1、問題背景：

設計一個折線圖，折線圖展示蘋果、香蕉的銷售量

2、實現代碼：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>echarts-多折線圖</title>    <script type="text/javascript" src="jquery-1.4.2.min.js" ></script>    <script type="text/javascript" src="echarts.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>

3、實現效果圖：