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

2019-11-19 17:19:30

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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;   }   #line{    width:100%;    height:99%;   }  </style>  <script>   $(document).ready(function(){    var chart = document.getElementById("line");    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, 7890, 6230, 5210]      }     ]    };    echart.setOption(option);   });  </script> </head> <body>  <div id="line"></div> </body></html>

3、實現效果圖：