1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>ECharts-基本线性图及其配置要求</title>
  6.     <!-- ECharts单文件引入 -->
  7. <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11.         <div id="box" style="height:400px;width: 800px;padding: 20px"></div>
  12.     </div>
  13.     <script>
  14.     // 获取到这个DOM节点，然后初始化
  15.  
  16.     var myChart = echarts.init(document.getElementById("box"));
  17.     var option = {
  18.         // 标题
  19.         title: {
  20.             text: '红包活动数据',
  21.             subtext: '数据来源：华秉科技-dancer'
  22.         },
  23.         tooltip: {
  24.             trigger: 'axis'
  25.         },
  26.         //图例名
  27.         legend: {
  28.             data:['参加活动人数','分享人数','关注人数','注册人数','领取红包人数']
  29.         },
  30.         grid: {
  31.             left: '3%',   //图表距边框的距离
  32.             right: '4%',
  33.             bottom: '3%',
  34.             containLabel: true
  35.         },
  36.         //工具框，可以选择
  37.         toolbox: {
  38.             feature: {
  39.                 saveAsImage: {}
  40.             }
  41.         },
  42.         //x轴信息样式
  43.         xAxis: {
  44.             type: 'category',
  45.             boundaryGap: false,
  46.             data: ['12-01','12-02','12-03','12-04','12-05','12-05','12-06','12-07','12-08','12-09','12-10','12-11','12-12','12-13'],
  47.             //坐标轴颜色
  48.             axisLine:{
  49.                 lineStyle:{
  50.                     color:'red'
  51.                 }
  52.             },
  53.             //x轴文字旋转
  54.             axisLabel:{
  55.                 rotate:30,
  56.                 interval:0
  57.             },
  58.         },
  59.  
  60.         yAxis : [
  61.             {
  62.                 type : 'value',
  63.                 axisLabel : {
  64.                     formatter: '{value} 人'
  65.                 }
  66.             }
  67.         ],
  68.         series: [
  69.             //虚线
  70.             {
  71.                 name:'参加活动人数',
  72.                 type:'line',
  73.                 symbolSize:4,   //拐点圆的大小
  74.                 color:['red'],  //折线条的颜色
  75.                 data:[1000, 300, 500, 800, 300, 600,500,800, 300, 500, 800, 300, 600,500],
  76.                 smooth:false,   //关键点，为true是不支持虚线的，实线就用true
  77.                 itemStyle:{
  78.                     normal:{
  79.                         lineStyle:{
  80.                             width:2,
  81.                             type:'dotted'  //'dotted'虚线 'solid'实线
  82.                         }
  83.                     }
  84.                 }
  85.             },
  86.             //实线
  87.             {
  88.                 name:'分享人数',
  89.                 type:'line',
  90.                 symbol:'circle',
  91.                 symbolSize:4,
  92.                 itemStyle:{
  93.                     normal:{
  94.                         color:'red',
  95.                         borderColor:'red'  //拐点边框颜色
  96.                     }
  97.                 },
  98.                 data:[220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310]
  99.             },
  100.             {
  101.                 name:'关注人数',
  102.                 type:'line',
  103. //                stack: '总量',
  104.                 symbolSize:4,
  105.                 color:['orange'],
  106.                 smooth:false,   //关键点，为true是不支持虚线的，实线就用true
  107.                 itemStyle:{
  108.                     normal:{
  109.                         lineStyle:{
  110.                             width:2,
  111.                             type:'dotted'  //'dotted'虚线 'solid'实线
  112.                         }
  113.                     }
  114.                 },
  115.                 data:[500, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410]
  116.             },
  117.             {
  118.                 name:'注册人数',
  119.                 type:'line',
  120.                 symbolSize:4,
  121.                 color:['blue'],
  122.                 itemStyle:{
  123.                     normal:{
  124.                         lineStyle:{
  125.                             width:2,
  126.                             type:'dotted'  //'dotted'虚线 'solid'实线
  127.                         }
  128.                     }
  129.                 },
  130.                 data:[300, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410]
  131.             },
  132.             {
  133.                 name:'领取红包人数',
  134.                 type:'line',
  135.                 color:['green'],
  136.                 symbol:'circle',
  137.                 symbolSize:4,
  138.                 data:[310, 352, 280, 334, 373, 310, 340,300, 350, 280, 350, 340, 370, 310],
  139.                 itemStyle:{
  140.                     normal:{
  141.                         color:'green',
  142.                         borderColor:'green'
  143.                     }
  144.                 }
  145.             }
  146.         ]
  147.     };
  148.  
  149.     myChart.setOption(option);
  150. </script>
  151. </body>
  152. </html>

　　附带：

　　附带1：http://echarts.baidu.com/examples/editor.html?c=pie-legend

　　附带2：http://echarts.baidu.com/examples/editor.html?c=radar2

echarts之折线图配置（附带图例很多做成分页效果）的更多相关文章

  1. ECharts使用—折线图动态加载

    最近需求中用到折线图,单线条,多线交错,之前是散点图,用的是另一个 amcharts.js,这个文档也能找的到,回归早本次重点:ECharts 一.首先引入echarts.common.min.js文 ...

  2. echarts折现图配置

    js引用和div容器 <div id="container" style="height: 100%"></div> <scrip ...

  3. Echarts line折线图使用(vue)

    实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/ ...

  4. echarts自定义折线图横坐标时间间隔踩坑总结

    折线图需求:横坐标为时间,要求按一定间隔展示,鼠标移至折线上间隔时间内的数据也可展示 其实很简单的一个配置就可搞定,但在不熟悉echarts配置的情况下,就很懵逼 xAxis: { boundaryG ...

  5. ECharts绘制折线图

    首先看实现好的页面 实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require ...

  6. echarts版本折线图

    1.效果如下:         绘制折线图,应该算是说echarts中使用最简单也算使用频率最高的一种功能了吧.根据官网列子能找出规律,只是有些属性对于初接触者来说,会有点陌生,不过仔细阅读一下还是不 ...

  7. 移动端引用echarts的折线图

          移动端写一个图表引用echarts,highcharts插件,本次要找一个能够显示最新数据的折线图,最后只找到显示最大值: 找到echarts的实例:记一下个各功能.   <!DOC ...

  8. echarts实现折线图

    前端框架使用的angular,折线图使用echarts实现. 这里实现的折线图只是简单是折线图,折线图显示在table中,不需要xy轴的数据说明. 1. item.component.html < ...

  9. Echarts案例-折线图

    一:先在官网下载 https://www.echartsjs.com/zh/download.html 然后再建立工程,导入这两个包: 写代码: <!DOCTYPE html> <h ...

随机推荐

  1. C/S和B/S的应用的区别

    C/S: C是指Client,S是指Server.C/S模式就是指客户端/服务器模式.通过它可以充分利用两端硬件环境的优势,将任务合理分配到Client端和Server端来实现,降低了系统的通讯开销. ...

  2. Java ee第四周作业

    代码下载链接:https://github.com/javaee/tutorial-examples/tree/master/web/jsf/hello1 代码内容: /*** Copyright ( ...

  3. web前端，多语言切换，data-localize,

    demo: 链接:https://pan.baidu.com/s/1zhFHTv4P_epbBfpiggVDXg 提取码:aqts 要想有效果,必须发布在服务器上,可以在IIS上测试. 我只用到了中文 ...

  4. 10.9-uC/OS-III任务管理

    1.OSTaskCreate () 要使用 uC/OS 的任务必须先声明任务控制块和创建任务,调用 OSTaskCreate () 函数可以创建一个任务. 2.OSTaskSuspend () OST ...

  5. layer知识点总结

    1,本弹窗直接跳转父页面: <script>        window.parent.location.reload(); //刷新父页面        var index = pare ...

  6. docker+kafka+zookeeper+zipkin的安装

    1. 启动zookeeper容器 docker search zookeeper docker pull wurstmeister/zookeeper docker run -d --name zoo ...

  7. java框架之SpringBoot(12)-消息及整合RabbitMQ

    前言 概述 大多数应用中,可通过消息服务中间件来提升系统异步通信.扩展解耦的能力. 消息服务中两个重要概念:消息代理(message broker)和目的地(destination).当消息发送者发送 ...

  8. python框架之Django(5)-O/RM

    字段&参数 字段与db类型的对应关系 字段 DB Type AutoField integer AUTO_INCREMENT BigAutoField bigint AUTO_INCREMEN ...

  9. 通过android studio的gradle强制cmake输出命令详情

    https://stackoverflow.com/questions/43439549/force-cmake-in-verbose-mode-via-gradle-and-the-android- ...

  10. 监听器&上传下载&I18N

    监听器(Listener) 监听Java对象 的方法调用和属性改变() web的一个组件 事件驱动编程:事件源,事件名称,事件响应函数,事件对象 以后在Spring中的配置 WEB中有哪些监听器?  ...