编程 Javascript

jQuery插件echarts实现的多折线图效果示例【附demo源码下载】

Posted in Javascript onMarch 04, 2017

本文实例讲述了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、实现效果图：

jQuery插件echarts实现的多折线图效果示例【附demo源码下载】

附：完整实例代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery插件echarts实现的多折线图效果示例【附demo源码下载】

- Author -

翱翔天地

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js 获取class的元素的方法以及创建方法getElementsByClassName

Mar 11 Javascript

raphael.js绘制中国地图地图绘制方法

Feb 12 Javascript

js事件绑定快捷键以ctrl+k为例

Sep 30 Javascript

深入分析JQuery和JavaScript的异同

Oct 23 Javascript

jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图

Mar 16 Javascript

深入学习JavaScript中的Rest参数和参数默认值

Jul 28 Javascript

js实现3D图片逐张轮播幻灯片特效代码分享

Sep 09 Javascript

jQuery超精致图片轮播幻灯片特效代码分享

Sep 10 Javascript

微信小程序页面传参实例详解

Nov 16 Javascript

荐书|您有一份JavaScript书单待签收

Jul 21 Javascript

easyui datagrid 表格中操作栏按钮图标不显示的解决方法

Jul 27 Javascript

Javascript刷新页面的实例

Sep 23 Javascript

Vue.js实现多条件筛选、搜索、排序及分页的表格功能

Nov 24 #Javascript

纯JS单页面赛车游戏制作代码分享

Mar 03 #Javascript

JS html时钟制作代码分享

Mar 03 #Javascript

AngularJS路由实现页面跳转实例

Mar 03 #Javascript

vue2笔记 — vue-router路由懒加载的实现

Mar 03 #Javascript

求js数组的最大值和最小值的四种方法

Mar 03 #Javascript

jQuery控制元素隐藏和显示

Mar 03 #Javascript