echarts基本使用参考pink老师笔记

约定不等于承诺〃 2021-05-16 20:37 2712阅读 0赞

echarts

  • 可视化面板介绍
  • Echarts介绍
  • Echarts使用步骤
  • Echarts-基础配置
    • color：调色盘颜色列表
    • title：标题组件
    • tooltip：提示框组件
      • 触发类型
    • legend：图例组件
    • toolbox: 工具箱组件
      • saveAsImage
      • dataZoom:
      • dataView:
      • restore:
    • grid: 网格配置
    • xAxis：直角坐标系 grid 中的 x 轴
      • type
      • boundaryGap:
    • yAxis：直角坐标系 grid 中的 y 轴
    • series: 系列列表
      • name
      • data
      • type
        • line
        • bar
        • pie
      • stack
      • markPoint & markLine
  • 柱状图图表
    • 修改图表柱形颜色
    • 修改图表大小
    • 文本颜色和字体大小设置
    • X轴线的样式 不显示
    • Y 轴相关定制
    • 修改柱形为圆角以及柱子宽度 series 里面设置
    • 更换对应数据
    • 让图表跟随屏幕自适应
    • 图形上的文本标签
      • positon
      • formatter
  • 进度条样式的柱子
    • 条状
      • 设置第一组条状内百分比显示数据
      • 设置第一组柱子不同颜色
    • 框状
    • 给y轴添加第二组数据
    • 设置两组柱子层叠
    • 如果数据显示的和数组是反过来了
  • 完整代码
  • 折线图
    • 修改折线图大小，显示边框设置颜色，显示刻度标签
    • 修改图例组件中的文字颜色 距离右侧 right 为 10%
    • x轴相关配置
    • y轴的定制
    • 把折线修饰为圆滑
    • 完整代码
    • 填充颜色
    • 设置拐点
  • 饼形图
    • 修改图例组件
    • 修改水平居中 垂直居中，和大小
      • label
      • labelLine
        • length和length2
    • 南丁格尔玫瑰图
      • 颜色设置
      • 修改饼形图大小 ( series对象)
      • series对象 里面 data对象格式
      • 饼形图的显示模式
      • 控制饼形图的文字的一些样式。 label 对象设置
      • 防止缩放的时候，引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )
  • Echarts-社区介绍

我是物联网专业的学生，需要将单片机采集的数据显示在网页，当然图表方式显示更加直接，所以这里是跟着pink老师的笔记学习的一点心得。当然只是帮助大家入门如果需要还是去看官方文档更全更详细，建议多试一些样例，删一些属性看发生什么变化

可视化面板介绍

应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出

Echarts介绍

常见的数据可视化库：

  • D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
  • ECharts.js 百度出品的一个开源 Javascript 数据可视化库
  • Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
  • AntV 蚂蚁金服全新一代数据可视化解决方案 等等
  • Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

Echarts使用步骤

1.下载并引入echarts.js文件 ->图表依赖这个js库

  1. <script src="js/echarts.min.js"></script>

2.准备一个具备大小的DOM容器 ->生成的图表会放入这个容器

  1. <div class="box"></div>
  3. <style>
  4. .box{ 
  5.     width:600px;
  6.     height: 400px;
  7.         }
  8. </style>

3.初始化echarts实例对象 ->实例化echarts对象

  1. //初始化实例对象 echarts.init(dom容器);
  2.     var myChart=echarts.init(document.querySelector(".box"));

4.指定配置项和数据option ->根据具体需求修改配置选项

  1. // 指定图表的配置项和数据
  2.     var option = { 
  3.     title: { 
  4.         text: 'ECharts 入门示例'
  5.     },
  6.     tooltip: { },
  7.     legend: { 
  8.         data:['销量']
  9.     },
  10.     xAxis: { 
  11.         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  12.     },
  13.     yAxis: { },
  14.     series: [{ 
  15.         name: '销量',
  16.         type: 'bar',
  17.         data: [5, 20, 36, 10, 10, 20]
  18.     }]
  19. };

5.将配置项设置echarts实例对象 ->让echarts对象根据修改好的配置生效

  1. //把配置项给实例对象
  2. myChart.setOption(option);

注意，加载echarts.js的位置， echarts.js引用放在head中或者放在body中HTML代码的前面了，造成加载时阻塞后面的html。
造成echarts Cannot read property ‘getAttribute’ of null 报错
就是 不要把echarts.js放在head中 只要将其放在< /body>之前就可以了

Echarts-基础配置

color：调色盘颜色列表

color设置我们线条的颜色 注意后面是个数组

  1. color: ['pink', 'red', 'green', 'skyblue'],

title：标题组件

设置图标标题

  1. title: { 
  2.         text: '折线图堆叠'
  3.     },

tooltip：提示框组件

设置图标的提示框组件

  1. tooltip: { 
  2.       //触发方式 axis是坐标轴触发
  3.         trigger: 'axis'
  4.     },

触发类型

  1. item
  2. 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
  4. axis
  5. 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
  7. none
  8. 什么都不触发。

legend：图例组件

  1. legend: { 
  3. // series里面有了 name值则 legend里面的data可以删掉
  4.         data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
  5.     },

在这里插入图片描述
把那个点成灰色的那个对应的折线就消失了

toolbox: 工具箱组件

saveAsImage

可以另存为图片等功能，就是旁边那个下载按钮

  1. toolbox: { 
  2.         feature: { 
  3.             saveAsImage: { }
  4.         }
  5.     },

dataZoom:

区域缩放

  1. dataZoom: { 
  2.                 yAxisIndex: 'none'
  3.             },

dataView:

数据视图，转化为文本的格式

  1. dataView: { readOnly: false},

restore:

还原

  1. restore: { },
  3. toolbox: { 
  4.         show: true,
  5.         feature: { 
  6.             dataZoom: { 
  7.                 yAxisIndex: 'none'
  8.             },
  9.             dataView: { readOnly: false},
  10.             magicType: { type: ['line', 'bar']},
  11.             restore: { },
  12.             saveAsImage: { }
  13.         }
  14.     },

grid: 网格配置

grid可以控制线形图 柱状图 图表大小

  1. grid: { 
  2.         left: '3%', 
  3.         right: '4%',
  4.         bottom: '3%',
  5.         // 是否显示刻度标签 如果是true 就显示 否则反之
  6.         containLabel: true
  7.     },

left，riht都是相当于当前dom容器左侧或右侧来计算的

xAxis：直角坐标系 grid 中的 x 轴

  1. xAxis: { 
  2.         type: 'category',
  3.         // 是否让我们的线条和坐标轴有缝隙
  4.         boundaryGap: false,
  5.         data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  6.     },

type

坐标轴类型

  1. 'value' 数值轴，适用于连续数据。
  3. 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
  5. 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
  7. 'log' 对数轴。适用于对数数据。

boundaryGap:

  1. 是否让我们的线条和坐标轴有缝隙
  3. 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
  5. 一般设置为false不要留缝隙

yAxis：直角坐标系 grid 中的 y 轴

  1. yAxis: { 
  2.         type: 'value'
  3.     },

series: 系列列表

每个系列通过 type 决定自己的图表类型
大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
注意series里面是个数组，每个数组元素又是一个对象

series里面有了 name值则 legend里面的data可以删掉

  1. // 系列图表配置 它决定着显示那种类型的图表
  2.  series: [
  3.         { 
  4.             name: '邮件营销',
  5.             type: 'line',
  6.             stack: '总量',
  7.             data: [120, 132, 101, 134, 90, 230, 210]
  8.         },
  9.         { 
  10.             name: '联盟广告',
  11.             type: 'line',
  12.             stack: '总量',
  13.             data: [220, 182, 191, 234, 290, 330, 310]
  14.         },
  15.         { 
  16.             name: '视频广告',
  17.             type: 'line',
  18.             stack: '总量',
  19.             data: [150, 232, 201, 154, 190, 330, 410]
  20.         },
  21.         { 
  22.             name: '直接访问',
  23.             type: 'line',
  24.             stack: '总量',
  25.             data: [320, 332, 301, 334, 390, 330, 320]
  26.         },
  27.         { 
  28.             name: '搜索引擎',
  29.             type: 'line',
  30.             stack: '总量',
  31.             data: [820, 932, 901, 934, 1290, 1330, 1320]
  32.         }
  33.     ]

name

系列名称，用于tooltip的显示，series里面有了 name值则 legend里面的data可以删掉

data

里面存放的是数组是数据

type

line

折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。可用于直角坐标系和极坐标系上。

bar

柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型

pie

饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例

stack

数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加，但是我们一般不让它堆叠允许重复

markPoint & markLine

最大值最小值的点

  1. markPoint: { 
  2.                 data: [
  3.                     { type: 'max', name: '最大值'},
  4.                     { type: 'min', name: '最小值'}
  5.                 ]
  6.             },
  7.             markLine: { 
  8.                 data: [
  9.                     { type: 'average', name: '平均值'}
  10.                 ]
  11.             }

完整示例加注解

  1. option = { 
  2.     // color设置我们线条的颜色 注意后面是个数组
  3.     color: ['pink', 'red', 'green', 'skyblue'],
  4.     // 设置图表的标题
  5.     title: { 
  6.         text: '折线图堆叠123'
  7.     },
  8.     // 图表的提示框组件 
  9.     tooltip: { 
  10.         // 触发方式
  11.         trigger: 'axis'
  12.     },
  13.     // 图例组件
  14.     legend: { 
  15.        // series里面有了 name值则 legend里面的data可以删掉
  16.     },
  17.     // 网格配置 grid可以控制线形图 柱状图 图表大小
  18.     grid: { 
  19.         left: '3%',
  20.         right: '4%',
  21.         bottom: '3%',
  22.         // 是否显示刻度标签 如果是true 就显示 否则反之
  23.         containLabel: true
  24.     },
  25.     // 工具箱组件 可以另存为图片等功能
  26.     toolbox: { 
  27.         feature: { 
  28.             saveAsImage: { }
  29.         }
  30.     },
  31.     // 设置x轴的相关配置
  32.     xAxis: { 
  33.         type: 'category',
  34.         // 是否让我们的线条和坐标轴有缝隙
  35.         boundaryGap: false,
  36.         data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
  37.     },
  38.      // 设置y轴的相关配置
  39.     yAxis: { 
  40.         type: 'value'
  41.     },
  42.     // 系列图表配置 它决定着显示那种类型的图表
  43.     series: [
  44.         { 
  45.             name: '邮件营销',
  46.             type: 'line',
  48.             data: [120, 132, 101, 134, 90, 230, 210]
  49.         },
  50.         { 
  51.             name: '联盟广告',
  52.             type: 'line',
  54.             data: [220, 182, 191, 234, 290, 330, 310]
  55.         },
  56.         { 
  57.             name: '视频广告',
  58.             type: 'line',
  60.             data: [150, 232, 201, 154, 190, 330, 410]
  61.         },
  62.         { 
  63.             name: '直接访问',
  64.             type: 'line',
  66.             data: [320, 332, 301, 334, 390, 330, 320]
  67.         }
  68.     ]
  69. };

柱状图图表

  • 官网找到类似实例， 适当分析，并且引入到HTML页面中

  • 根据需求定制图表

    <!DOCTYPE html>

    1. <head>
    2.     <meta charset="utf-8" />
    3.     <title></title>
    4.     <script src="js/jquery.js"></script>
    5.     <script src="js/bootstrap.min.js">
    7.     </script>
  1.         <style>
  2.             .box{ 
  3.             width:600px;
  4.             height: 400px;
  5.         }
  6.         </style>
  8.     </head>
  12.     <body>
  13.         <div class="box">
  15.         </div>
  17.         <script src="js/echarts.min.js">
  19.         </script>
  21. <script>
  22.     //舒适化实例对象 echarts.init(dom容器);
  23.     var myChart=echarts.init(document.querySelector(".box"));
  24.     // 指定图表的配置项和数据
  25.     option = { 
  27.     tooltip: { 
  28.         trigger: 'axis',
  29.         axisPointer: {             // 坐标轴指示器，坐标轴触发有效
  30.             type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
  31.         }
  32.     },
  33.     grid: { 
  34.         left: '3%',
  35.         right: '4%',
  36.         bottom: '3%',
  37.         containLabel: true
  38.     },
  39.     xAxis: [
  40.         { 
  41.             type: 'category',
  42.             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  43.             axisTick: { 
  44.                 alignWithLabel: true
  45.             }
  46.         }
  47.     ],
  48.     yAxis: [
  49.         { 
  50.             type: 'value'
  51.         }
  52.     ],
  53.     series: [
  54.         { 
  55.             name: '直接访问',
  56.             type: 'bar',
  57.             barWidth: '60%',
  58.             data: [10, 52, 200, 334, 390, 330, 220]
  59.         }
  60.     ]
  61. };
  62. //把配置项给实例对象
  63. myChart.setOption(option);
  65. </script>
  66.     </body>
  69. </html>

修改图表柱形颜色

  1. color: ["#2f89cf"],

修改图表大小

grid决定我们的柱状图的大小
可以跟%数也可以跟px单位

  1. grid: { 
  2.      left: "0%",
  3.      top: "10px",
  4.      right: "0%",
  5.      bottom: "4%",
  6.      // 是否显示刻度标签 如果是true 就显示 否则反之
  7.      containLabel: true
  8.    },

文本颜色和字体大小设置

  1. // 设置x轴标签文字样式
  2.   // x轴的文字颜色和大小
  3.         axisLabel: { 
  4.           color: "rgba(255,255,255,.6)",
  5.           fontSize: "12"
  6.         },

X轴线的样式 不显示

  1. // x轴样式不显示
  2.    axisLine: { 
  3.        show: false
  4.        // 如果想要设置单独的线条样式 
  5.         lineStyle: { 
  6.           color: "rgba(255,255,255,.1)",
  7.           width: 1,
  8.           type: "solid"
  9.       }
  10.    }

Y 轴相关定制

axisLabel 刻度标签

  1. // y 轴文字标签样式
  2.    axisLabel: { 
  4.          color: "rgba(255,255,255,.6)",
  5.           fontSize: "12"
  6.    },
  8.     // y轴线条样式
  9.     axisLine: { 
  10.          lineStyle: { 
  11.             color: "rgba(255,255,255,.1)",
  12.             // width: 1,
  13.             // type: "solid"
  14.          }
  15.    5232},
  17.     // y 轴分隔线样式
  18.    splitLine: { 
  19.        lineStyle: { 
  20.           color: "rgba(255,255,255,.1)"
  21.         }
  22.    }
  24.     // 不显示刻度
  25.     axisTick: { 
  26.        show: false
  27.     },

修改柱形为圆角以及柱子宽度 series 里面设置

  1. series: [
  2.          { 
  3.            name: "直接访问",
  4.            type: "bar",
  5.            // 修改柱子宽度
  6.            barWidth: "35%",
  7.            data: [10, 52, 200, 334, 390, 330, 220],
  8.            itemStyle: { 
  9.              // 修改柱子圆角
  10.              barBorderRadius: 5
  11.            }
  12.          }
  13.        ]
  14.      };

更换对应数据

  1. // x轴中更换data数据
  2.     data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
  4.    // series 更换数据
  5.     data: [200, 300, 300, 900, 1500, 1200, 600]

让图表跟随屏幕自适应

  1. window.addEventListener("resize", function() { 
  2.     myChart.resize();
  3.   });

图形上的文本标签

  1. // 图形上的文本标签
  2. label: { 
  3.     normal: { 
  4.          show: true,
  5.          // 图形内显示
  6.          position: "inside",
  7.          // 文字的显示格式
  8.          formatter: "{c}%"
  9.      }
  10. },

positon

  1. top / left / right / bottom / inside / insideLeft / insideRight / 
  2. insideTop / insideBottom / insideTopLeft / insideBottomLeft /
  3. insideTopRight / insideBottomRight
  5. 也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置

示例

  1. position: 'top'
  4.  // 绝对的像素值
  5.   position: [10, 10],
  6.   // 相对的百分比
  7.   position: ['50%', '50%']

formatter

标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
字符串模板 模板变量有：

  1. { a}：系列名。
  2. { b}：数据名。
  3. { c}：数据值。

进度条样式的柱子

核心原理就是两个柱子一个柱子的样式设为条，另一个的柱子的样式设为框，然后让框压着条

条状

  1. name: "条",
  2. // 柱子之间的距离
  3. barCategoryGap: 50,
  4. //柱子的宽度
  5. barWidth: 10,
  6. // 柱子设为圆角
  7. itemStyle: { 
  8.     normal: { 
  9.       barBorderRadius: 20,       
  10.     }
  11. },

设置第一组条状内百分比显示数据

  1. // 图形上的文本标签
  2. label: { 
  3.     normal: { 
  4.          show: true,
  5.          // 图形内显示
  6.          position: "inside",
  7.          // 文字的显示格式 {c}会自动解析data里的数据
  8.          formatter: "{c}%"
  9.      }
  10. },

设置第一组柱子不同颜色

  1. // 声明颜色数组
  2. var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  3. // 2. 给 itemStyle 里面的color 属性设置一个 返回值函数
  4.   itemStyle: { 
  5.           normal: { 
  6.             barBorderRadius: 20,  
  7.             color:function(params){ 
  8.              // params 传进来的是柱子对象
  9.             console.log(params);
  10.             // dataIndex 是当前柱子的索引号
  11.             return myColor[params.dataIndex];
  12.            }
  14.           }
  16. },

框状

把柱状图的颜色去掉，价格边框的颜色

  1. name: "框",
  2.         type: "bar",
  3.         barCategoryGap: 50,
  4.         barWidth: 15,
  5.         itemStyle: { 
  6.             color: "none",
  7.             borderColor: "#00c1de",
  8.             borderWidth: 3,
  9.             barBorderRadius: 15
  10.         },
  11.         data: [19325, 23438, 31000, 121594, 134141, 681807]
  12.       }

给y轴添加第二组数据

在图的右边也显示数据

  1. yAxis: [
  2.       { 
  3.       type: "category",
  4.       data: ["印尼", "美国", "印度", "中国", "世界人口(万)"],
  5.       // 不显示y轴的线
  6.       axisLine: { 
  7.         show: false
  8.       },
  9.       // 不显示刻度
  10.       axisTick: { 
  11.         show: false
  12.       },
  13.       // 把刻度标签里面的文字颜色设置为白色
  14.       axisLabel: { 
  15.         color: "#fff"
  16.       }
  17.     },
  18.       { 
  19.         show: true,
  20.         data: [702, 350, 610, 793, 664],
  21.            // 不显示y轴的线
  22.       axisLine: { 
  23.         show: false
  24.       },
  25.       // 不显示刻度
  26.       axisTick: { 
  27.         show: false
  28.       },
  29.         axisLabel: { 
  30.           textStyle: { 
  31.             fontSize: 12,
  32.             color: "#fff"
  33.           }
  34.         }
  35.       }
  36.     ],

设置两组柱子层叠

也就是让框状柱子压住条状柱子

  1. // 给series 第一个对象里面的 添加 
  2. yAxisIndex: 0,
  3. // 给series 第二个对象里面的 添加 
  4. yAxisIndex: 1,

如果数据显示的和数组是反过来了

可以在yAxis里面添加一个inverse默认是false

  1. inverse:true

完整代码

  1. // 柱状图2
  2. (function() { 
  3.   var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  4.   // 1. 实例化对象
  5.   var myChart = echarts.init(document.querySelector(".bar2 .chart"));
  6.   // 2. 指定配置和数据
  7.   var option = { 
  8.     grid: { 
  9.       top: "10%",
  10.       left: "22%",
  11.       bottom: "10%"
  12.       // containLabel: true
  13.     },
  14.     // 不显示x轴的相关信息
  15.     xAxis: { 
  16.       show: false
  17.     },
  18.     yAxis: [
  19.       { 
  20.         type: "category",
  21.         inverse: true,
  22.         data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
  23.         // 不显示y轴的线
  24.         axisLine: { 
  25.           show: false
  26.         },
  27.         // 不显示刻度
  28.         axisTick: { 
  29.           show: false
  30.         },
  31.         // 把刻度标签里面的文字颜色设置为白色
  32.         axisLabel: { 
  33.           color: "#fff"
  34.         }
  35.       },
  36.       { 
  37.         data: [702, 350, 610, 793, 664],
  38.         inverse: true,
  39.         // 不显示y轴的线
  40.         axisLine: { 
  41.           show: false
  42.         },
  43.         // 不显示刻度
  44.         axisTick: { 
  45.           show: false
  46.         },
  47.         // 把刻度标签里面的文字颜色设置为白色
  48.         axisLabel: { 
  49.           color: "#fff"
  50.         }
  51.       }
  52.     ],
  53.     series: [
  54.       { 
  55.         name: "条",
  56.         type: "bar",
  57.         data: [70, 34, 60, 78, 69],
  58.         yAxisIndex: 0,
  59.         // 修改第一组柱子的圆角
  60.         itemStyle: { 
  61.           barBorderRadius: 20,
  62.           // 此时的color 可以修改柱子的颜色
  63.           color: function(params) { 
  64.             // params 传进来的是柱子对象
  65.             console.log(params);
  66.             // dataIndex 是当前柱子的索引号
  67.             return myColor[params.dataIndex];
  68.           }
  69.         },
  70.         // 柱子之间的距离
  71.         barCategoryGap: 50,
  72.         //柱子的宽度
  73.         barWidth: 10,
  74.         // 显示柱子内的文字
  75.         label: { 
  76.           show: true,
  77.           position: "inside",
  78.           // {c} 会自动的解析为 数据 data里面的数据
  79.           formatter: "{c}%"
  80.         }
  81.       },
  82.       { 
  83.         name: "框",
  84.         type: "bar",
  85.         barCategoryGap: 50,
  86.         barWidth: 15,
  87.         yAxisIndex: 1,
  88.         data: [100, 100, 100, 100, 100],
  89.         itemStyle: { 
  90.           color: "none",
  91.           borderColor: "#00c1de",
  92.           borderWidth: 3,
  93.           barBorderRadius: 15
  94.         }
  95.       }
  96.     ]
  97.   };
  99.   // 3. 把配置给实例对象
  100.   myChart.setOption(option);
  101. })();

折线图

  • 官网找到类似实例， 适当分析，并且引入到HTML页面中
  • 根据需求定制图表

修改折线图大小，显示边框设置颜色，显示刻度标签

  1. // 设置网格样式
  2.     grid: {  
  3.       top: '20%',
  4.       left: '3%',
  5.       right: '4%',
  6.       bottom: '3%',
  7.       show: true,// 显示边框
  8.       borderColor: '#012f4a',// 边框颜色
  9.       containLabel: true // 包含刻度文字在内
  10.     },

修改图例组件中的文字颜色 距离右侧 right 为 10%

默认都是auto 居中对齐

  1. // 图例组件
  2.     legend: { 
  3.       textStyle: { 
  4.         color: '#4c9bfd' // 图例文字颜色
  5.       },
  6.       right: '10%' // 距离右边10%
  7.     },

x轴相关配置

刻度去除
x轴刻度标签字体颜色
剔除x坐标轴线颜色（将来使用Y轴分割线)
轴两端是不需要内间距 boundaryGap

  1. xAxis: { 
  2.       type: 'category',
  3.       data: ["周一", "周二"],
  4.       axisTick: { 
  5.          show: false // 去除刻度线
  6.        },
  7.        axisLabel: { 
  8.          color: '#4c9bfd' // 文本颜色
  9.        },
  10.        axisLine: { 
  11.          show: false // 去除轴线
  12.        },
  13.        boundaryGap: false  // 去除轴内间距
  14.     },

y轴的定制

刻度去除
字体颜色
分割线颜色

  1. yAxis: { 
  2.       type: 'value',
  3.       axisTick: { 
  4.         show: false  // 去除刻度
  5.       },
  6.       axisLabel: { 
  7.         color: '#4c9bfd' // 文字颜色
  8.       },
  9.       splitLine: { 
  10.         lineStyle: { 
  11.           color: '#012f4a' // 分割线颜色
  12.         }
  13.       }
  14.     },

把折线修饰为圆滑

series 数据中添加 smooth 为 true

  1. series: [{ 
  2.       name:'新增粉丝',
  3.       data: [820, 932, 901, 934, 1290, 1330, 1320],
  4.       type: 'line',
  5.       // 折线修饰为圆滑
  6.       smooth: true,
  7.       },{ 
  8.       name:'新增游客',
  9.       data: [100, 331, 200, 123, 233, 543, 400],
  10.       type: 'line',
  11.       smooth: true,
  12.     }]

完整代码

  1. // 折线图1模块制作
  2. (function() { 
  3.   var yearData = [
  4.     { 
  5.       year: "2020", // 年份
  6.       data: [
  7.         // 两个数组是因为有两条线
  8.         [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
  9.         [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
  10.       ]
  11.     },
  12.     { 
  13.       year: "2021", // 年份
  14.       data: [
  15.         // 两个数组是因为有两条线
  16.         [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
  17.         [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
  18.       ]
  19.     }
  20.   ];
  21.   // 1. 实例化对象
  22.   var myChart = echarts.init(document.querySelector(".line .chart"));
  23.   // 2.指定配置
  24.   var option = { 
  25.     // 通过这个color修改两条线的颜色
  26.     color: ["#00f2f1", "#ed3f35"],
  27.     tooltip: { 
  28.       trigger: "axis"
  29.     },
  30.     legend: { 
  31.       // 如果series 对象有name 值，则 legend可以不用写data
  32.       // 修改图例组件 文字颜色
  33.       textStyle: { 
  34.         color: "#4c9bfd"
  35.       },
  36.       // 这个10% 必须加引号
  37.       right: "10%"
  38.     },
  39.     grid: { 
  40.       top: "20%",
  41.       left: "3%",
  42.       right: "4%",
  43.       bottom: "3%",
  44.       show: true, // 显示边框
  45.       borderColor: "#012f4a", // 边框颜色
  46.       containLabel: true // 包含刻度文字在内
  47.     },
  49.     xAxis: { 
  50.       type: "category",
  51.       boundaryGap: false,
  52.       data: [
  53.         "1月",
  54.         "2月",
  55.         "3月",
  56.         "4月",
  57.         "5月",
  58.         "6月",
  59.         "7月",
  60.         "8月",
  61.         "9月",
  62.         "10月",
  63.         "11月",
  64.         "12月"
  65.       ],
  66.       axisTick: { 
  67.         show: false // 去除刻度线
  68.       },
  69.       axisLabel: { 
  70.         color: "#4c9bfd" // 文本颜色
  71.       },
  72.       axisLine: { 
  73.         show: false // 去除轴线
  74.       }
  75.     },
  76.     yAxis: { 
  77.       type: "value",
  78.       axisTick: { 
  79.         show: false // 去除刻度线
  80.       },
  81.       axisLabel: { 
  82.         color: "#4c9bfd" // 文本颜色
  83.       },
  84.       axisLine: { 
  85.         show: false // 去除轴线
  86.       },
  87.       splitLine: { 
  88.         lineStyle: { 
  89.           color: "#012f4a" // 分割线颜色
  90.         }
  91.       }
  92.     },
  93.     series: [
  94.       { 
  95.         name: "新增粉丝",
  96.         type: "line",
  97.         // true 可以让我们的折线显示带有弧度
  98.         smooth: true,
  99.         data: yearData[0].data[0]
  100.       },
  101.       { 
  102.         name: "新增游客",
  103.         type: "line",
  104.         smooth: true,
  105.         data: yearData[0].data[1]
  106.       }
  107.     ]
  108.   };
  110.   // 3. 把配置给实例对象
  111.   myChart.setOption(option);
  112.   // 4. 让图表跟随屏幕自动的去适应
  113.   window.addEventListener("resize", function() { 
  114.     myChart.resize();
  115.   });
  117.   // 5.点击切换效果
  118.   $(".line h2").on("click", "a", function() { 
  119.     // alert(1);
  120.     // console.log($(this).index());
  121.     // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
  122.     // console.log(yearData[$(this).index()]);
  123.     var obj = yearData[$(this).index()];
  124.     option.series[0].data = obj.data[0];
  125.     option.series[1].data = obj.data[1];
  126.     // 需要重新渲染
  127.     myChart.setOption(option);
  128.   });
  129. })();

注意：每次series里data数据改变需要重新渲染echarts
myChart.setOption(option);

填充颜色

  1. // 填充区域
  2.         areaStyle: { 
  3.               // 渐变色，只需要复制即可
  4.             color: new echarts.graphic.LinearGradient(
  5.               0,
  6.               0,
  7.               0,
  8.               1,
  9.               [
  10.                 { 
  11.                   offset: 0,
  12.                   color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
  13.                 },
  14.                 { 
  15.                   offset: 0.8,
  16.                   color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
  17.                 }
  18.               ],
  19.               false
  20.             ),
  21.             shadowColor: "rgba(0, 0, 0, 0.1)"
  22.         },

设置拐点

symbol

  1. 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
  3. // 设置拐点 小圆点
  4.         symbol: "circle",
  5.         // 拐点大小
  6.         symbolSize: 8,
  7.         // 设置拐点颜色以及边框
  8.        itemStyle: { 
  9.             color: "#0184d5",
  10.             borderColor: "rgba(221, 220, 107, .1)",
  11.             borderWidth: 12
  12.         },
  13.         // 开始不显示拐点， 鼠标经过显示
  14.         showSymbol: false,
  16. //第一条 线是圆滑
  17.        smooth: true,
  18.         // 单独修改线的样式
  19.         lineStyle: { 
  20.             color: "#0184d5",
  21.             width: 2 
  22.         },
  23.          // 填充区域
  24.         areaStyle: { 
  25.               // 渐变色，只需要复制即可
  26.             color: new echarts.graphic.LinearGradient(
  27.               0,
  28.               0,
  29.               0,
  30.               1,
  31.               [
  32.                 { 
  33.                   offset: 0,
  34.                   color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
  35.                 },
  36.                 { 
  37.                   offset: 0.8,
  38.                   color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
  39.                 }
  40.               ],
  41.               false
  42.             ),
  43.             shadowColor: "rgba(0, 0, 0, 0.1)"
  44.         },
  45.         // 设置拐点 小圆点
  46.         symbol: "circle",
  47.         // 拐点大小
  48.         symbolSize: 8,
  49.         // 设置拐点颜色以及边框
  50.        itemStyle: { 
  51.             color: "#0184d5",
  52.             borderColor: "rgba(221, 220, 107, .1)",
  53.             borderWidth: 12
  54.         },
  55.         // 开始不显示拐点， 鼠标经过显示
  56.         showSymbol: false,

饼形图

修改图例组件

修改图例组件在底部并且居中显示
修改小图标的宽度和高度
修改文字大小为

  1. legend: { 
  2.       // 距离底部为0%
  3.       bottom: "0%",
  4.       // 小图标的宽度和高度
  5.       itemWidth: 10,
  6.       itemHeight: 10,
  7.       data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
  8.       // 修改图例组件的文字为 12px
  9.       textStyle: { 
  10.         color: "rgba(255,255,255,.5)",
  11.         fontSize: "12"
  12.       }
  13.  },

修改水平居中 垂直居中，和大小

带有直角坐标系的比如折线图柱状图是 grid修改图形大小，而饼形图是通过 radius 修改大小
分为内圆半径和外圆半径，饼形图的大小主要是由外圆半径

  1. series: [
  2.       { 
  3.         name: "年龄分布",
  4.         type: "pie",
  5.         // 设置饼形图在容器中的位置
  6.         center: ["50%", "50%"],
  7.         // 修改内圆半径和外圆半径为 百分比是相对于容器宽度来说的
  8.         radius: ["40%", "60%"],
  9.         // 不显示标签文字
  10.         label: {  show: false },
  11.         // 不显示连接线
  12.         labelLine: {  show: false },
  13.       }
  14.     ]

label

饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等

labelLine

标签的视觉引导线配置。在 label 位置 设置为’outside’的时候会显示视觉引导线，简单说就是用线指向饼图的文本

length和length2

length 视觉引导线第一段的长度。也就是连接图形的那段线的长度
length2 视觉引导项第二段的长度，也就是连接文字的线段的长度

南丁格尔玫瑰图

它有两种模式一个是半径模式，另一个是面积模式

颜色设置

  1. color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],

修改饼形图大小 ( series对象)

  1. radius: ['10%', '70%'],

series对象 里面 data对象格式

  1. {  value: 20, name: '云南' },
  2.           {  value: 26, name: '北京' },
  3.           {  value: 24, name: '山东' },
  4.           {  value: 25, name: '河北' },
  5.           {  value: 20, name: '江苏' },
  6.           {  value: 25, name: '浙江' },
  7.           {  value: 30, name: '四川' },
  8.           {  value: 42, name: '湖北' }

饼形图的显示模式

  1. roseType: "radius",//半径模式
  3. roseType: 'area',//面积模式

控制饼形图的文字的一些样式。 label 对象设置

  1. series: [
  2.       { 
  3.         name: "面积模式",
  4.         type: "pie",
  5.         radius: [30, 110],
  6.         center: ["50%", "50%"],
  7.         roseType: "radius",
  8.         // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
  9.         label: { 
  10.           fontSize: 10
  11.         },
  12.       }
  13.     ]
  14.   };

防止缩放的时候，引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )

  1. // 文字调整
  2.         label:{ 
  3.           fontSize: 10
  4.         },
  5.         // 引导线调整
  6.         labelLine: { 
  7.            // 连接扇形图线长
  8.          length: 6,
  9.           // 连接文字线长
  10.          length2: 8
  11.         } 
  12.       }
  13.     ],

Echarts-社区介绍

Echarts-社区就是一些，活跃的echart使用者，交流和贡献定制好的图表的地方

发表评论

表情：
评论列表 （有 0 条评论，2712人围观）

还没有评论，来说两句吧...

相关阅读

    相关 echarts 基本使用

       最近项目中要做图形报表，要求使用echarts实现，图形报表有很多中实现之前也接触过，但echarts还是头一次听说，正好可以趁这个机会好好学习一下它。   之前不知道

    深碍√TFBOYSˉ_深碍√TFBOYSˉ_/ 0 赞/ 237 阅读