• Echarts案例-折线图


    一:先在官网下载

    https://www.echartsjs.com/zh/download.html

    然后再建立工程,导入这两个包:

     写代码:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="utf-8">
     5     <title>ECharts</title>
     6     <!-- 引入 echarts.js -->
     7     <!-- 这里是加载刚下好的echarts.min.js,注意路径 -->
     8     <script src="echarts.min.js"></script>
     9 </head>
    10 <body>
    11     <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    12     <div id="main" style=" 1000px;height:600px;"></div>
    13     <script type="text/javascript">
    14         // 基于准备好的dom,初始化echarts实例
    15 
    16 var myChart = echarts.init(document.getElementById('main'));
    17 
    18 // 指定图表的配置项和数据
    19 var option = {
    20         title: {
    21             text: '折线图堆叠'
    22         },
    23         tooltip: {
    24             trigger: 'axis'
    25         },
    26         legend: {
    27             data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    28         },
    29         grid: {
    30             left: '3%',
    31             right: '4%',
    32             bottom: '3%',
    33             containLabel: true
    34         },
    35         toolbox: {
    36             feature: {
    37                 saveAsImage: {}
    38             }
    39         },
    40         xAxis: {
    41             type: 'category',
    42             boundaryGap: false,
    43             data: ['周一','周二','周三','周四','周五','周六','周日']
    44         },
    45         yAxis: {
    46             type: 'value'
    47         },
    48         series: [
    49             {
    50                 name:'邮件营销',
    51                 type:'line',
    52                 stack: '总量',
    53                 data:[120, 132, 101, 134, 90, 230, 210]
    54             },
    55             {
    56                 name:'联盟广告',
    57                 type:'line',
    58                 stack: '总量',
    59                 data:[220, 182, 191, 234, 290, 330, 310]
    60             },
    61             {
    62                 name:'视频广告',
    63                 type:'line',
    64                 stack: '总量',
    65                 data:[150, 232, 201, 154, 190, 330, 410]
    66             },
    67             {
    68                 name:'直接访问',
    69                 type:'line',
    70                 stack: '总量',
    71                 data:[320, 332, 301, 334, 390, 330, 320]
    72             },
    73             {
    74                 name:'搜索引擎',
    75                 type:'line',
    76                 stack: '总量',
    77                 data:[820, 932, 901, 934, 1290, 1330, 1320]
    78             }
    79         ]
    80     };
    81 
    82 // 使用刚指定的配置项和数据显示图表。
    83 myChart.setOption(option);
    84 // 处理点击事件并且跳转到相应的百度搜索页面
    85 myChart.on('click', function (params) {
    86     window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
    87 });
    88     </script>
    89 </body>
    90 </html>
  • 相关阅读:
    【NOI2015】品酒大会 SAM
    4566: [Haoi2016]找相同字符 SAM
    3709: [PA2014]Bohater 贪心
    1925: [Sdoi2010]地精部落 dp, 抖动子序列
    4205: 卡牌配对 最大流+建图技巧
    留言板
    self-introduction
    最近比赛
    STOI补番队胡策
    BZOJ 3503: [Cqoi2014]和谐矩阵( 高斯消元 )
  • 原文地址:https://www.cnblogs.com/smartisn/p/11788486.html
Copyright © 2020-2023  润新知