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

约定不等于承诺〃 2021-05-16 20:37 2646阅读 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库

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

<div class="box"></div>
    
    <style>
    .box{ 
    	width:600px;
    	height: 400px;
    		}
    </style>

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

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

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

// 指定图表的配置项和数据
    	var option = { 
    	title: { 
    		text: 'ECharts 入门示例'
    	},
    	tooltip: { },
    	legend: { 
    		data:['销量']
    	},
    	xAxis: { 
    		data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    	},
    	yAxis: { },
    	series: [{ 
    		name: '销量',
    		type: 'bar',
    		data: [5, 20, 36, 10, 10, 20]
    	}]
    };

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

//把配置项给实例对象
    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设置我们线条的颜色 注意后面是个数组

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

## title：标题组件 ##

设置图标标题

title: { 
            text: '折线图堆叠'
        },

## tooltip：提示框组件 ##

设置图标的提示框组件

tooltip: { 
          //触发方式 axis是坐标轴触发
            trigger: 'axis'
        },

### 触发类型 ###

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

## legend：图例组件 ##

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

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

## toolbox: 工具箱组件 ##

### saveAsImage ###

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

toolbox: { 
            feature: { 
                saveAsImage: { }
            }
        },

### dataZoom: ###

区域缩放

dataZoom: { 
                    yAxisIndex: 'none'
                },

### dataView: ###

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

dataView: { readOnly: false},

### restore: ###

还原

restore: { },

toolbox: { 
            show: true,
            feature: { 
                dataZoom: { 
                    yAxisIndex: 'none'
                },
                dataView: { readOnly: false},
                magicType: { type: ['line', 'bar']},
                restore: { },
                saveAsImage: { }
            }
        },

## grid: 网格配置 ##

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

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

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

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

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

### type ###

坐标轴类型

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

### boundaryGap: ###

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

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

yAxis: { 
            type: 'value'
        },

## series: 系列列表 ##

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

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

// 系列图表配置 它决定着显示那种类型的图表
     series: [
            { 
                name: '邮件营销',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            { 
                name: '联盟广告',
                type: 'line',
                stack: '总量',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            { 
                name: '视频广告',
                type: 'line',
                stack: '总量',
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            { 
                name: '直接访问',
                type: 'line',
                stack: '总量',
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            { 
                name: '搜索引擎',
                type: 'line',
                stack: '总量',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]

### name ###

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

### data ###

里面存放的是数组是数据

### type ###

#### line ####

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

#### bar ####

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

#### pie ####

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

### stack ###

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

### markPoint & markLine ###

最大值最小值的点

markPoint: { 
                    data: [
                        { type: 'max', name: '最大值'},
                        { type: 'min', name: '最小值'}
                    ]
                },
                markLine: { 
                    data: [
                        { type: 'average', name: '平均值'}
                    ]
                }

**完整示例加注解**

option = { 
        // color设置我们线条的颜色 注意后面是个数组
        color: ['pink', 'red', 'green', 'skyblue'],
        // 设置图表的标题
        title: { 
            text: '折线图堆叠123'
        },
        // 图表的提示框组件 
        tooltip: { 
            // 触发方式
            trigger: 'axis'
        },
        // 图例组件
        legend: { 
           // series里面有了 name值则 legend里面的data可以删掉
        },
        // 网格配置 grid可以控制线形图 柱状图 图表大小
        grid: { 
            left: '3%',
            right: '4%',
            bottom: '3%',
            // 是否显示刻度标签 如果是true 就显示 否则反之
            containLabel: true
        },
        // 工具箱组件 可以另存为图片等功能
        toolbox: { 
            feature: { 
                saveAsImage: { }
            }
        },
        // 设置x轴的相关配置
        xAxis: { 
            type: 'category',
            // 是否让我们的线条和坐标轴有缝隙
            boundaryGap: false,
            data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
         // 设置y轴的相关配置
        yAxis: { 
            type: 'value'
        },
        // 系列图表配置 它决定着显示那种类型的图表
        series: [
            { 
                name: '邮件营销',
                type: 'line',
               
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            { 
                name: '联盟广告',
                type: 'line',
    
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            { 
                name: '视频广告',
                type: 'line',
              
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            { 
                name: '直接访问',
                type: 'line',
              
                data: [320, 332, 301, 334, 390, 330, 320]
            }
        ]
    };

# 柱状图图表 #

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

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script src="js/jquery.js"></script>
    		<script src="js/bootstrap.min.js">
    			
    		</script>
    		
    		
    		<style>
    			.box{ 
    			width:600px;
    			height: 400px;
    		}
    		</style>
    		
    	</head>
    	
    	
    	
    	<body>
    		<div class="box">
    			
    		</div>
    
    		<script src="js/echarts.min.js">
    			
    		</script>
    
    <script>
    	//舒适化实例对象 echarts.init(dom容器);
    	var myChart=echarts.init(document.querySelector(".box"));
    	// 指定图表的配置项和数据
    	option = { 
    	
        tooltip: { 
            trigger: 'axis',
            axisPointer: {             // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: { 
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            { 
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: { 
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            { 
                type: 'value'
            }
        ],
        series: [
            { 
                name: '直接访问',
                type: 'bar',
                barWidth: '60%',
                data: [10, 52, 200, 334, 390, 330, 220]
            }
        ]
    };
    //把配置项给实例对象
    myChart.setOption(option);
    
    </script>
    	</body>
    
    	
    </html>

## 修改图表柱形颜色 ##

color: ["#2f89cf"],

## 修改图表大小 ##

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

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

## 文本颜色和字体大小设置 ##

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

## X轴线的样式 不显示 ##

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

## Y 轴相关定制 ##

axisLabel 刻度标签

// y 轴文字标签样式
       axisLabel: { 
             
             color: "rgba(255,255,255,.6)",
              fontSize: "12"
       },
       
        // y轴线条样式
        axisLine: { 
             lineStyle: { 
                color: "rgba(255,255,255,.1)",
                // width: 1,
                // type: "solid"
             }
       5232},
       
        // y 轴分隔线样式
       splitLine: { 
           lineStyle: { 
              color: "rgba(255,255,255,.1)"
            }
       }
       
    	// 不显示刻度
    	axisTick: { 
    	   show: false
    	},

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

series: [
             { 
               name: "直接访问",
               type: "bar",
               // 修改柱子宽度
               barWidth: "35%",
               data: [10, 52, 200, 334, 390, 330, 220],
               itemStyle: { 
                 // 修改柱子圆角
                 barBorderRadius: 5
               }
             }
           ]
         };

## 更换对应数据 ##

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

## 让图表跟随屏幕自适应 ##

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

## 图形上的文本标签 ##

// 图形上的文本标签
    label: { 
        normal: { 
             show: true,
             // 图形内显示
             position: "inside",
             // 文字的显示格式
             formatter: "{c}%"
         }
    },

### positon ###

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

**示例**

position: 'top'
    
    
     // 绝对的像素值
      position: [10, 10],
      // 相对的百分比
      position: ['50%', '50%']

### formatter ###

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

{ a}：系列名。
    { b}：数据名。
    { c}：数据值。

# 进度条样式的柱子 #

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

## 条状 ##

name: "条",
    // 柱子之间的距离
    barCategoryGap: 50,
    //柱子的宽度
    barWidth: 10,
    // 柱子设为圆角
    itemStyle: { 
        normal: { 
          barBorderRadius: 20,       
        }
    },

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

// 图形上的文本标签
    label: { 
        normal: { 
             show: true,
             // 图形内显示
             position: "inside",
             // 文字的显示格式 {c}会自动解析data里的数据
             formatter: "{c}%"
         }
    },

### 设置第一组柱子不同颜色 ###

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

## 框状 ##

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

name: "框",
            type: "bar",
            barCategoryGap: 50,
            barWidth: 15,
            itemStyle: { 
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 3,
                barBorderRadius: 15
            },
            data: [19325, 23438, 31000, 121594, 134141, 681807]
          }

## 给y轴添加第二组数据 ##

在图的右边也显示数据

yAxis: [
          { 
          type: "category",
          data: ["印尼", "美国", "印度", "中国", "世界人口(万)"],
          // 不显示y轴的线
          axisLine: { 
            show: false
          },
          // 不显示刻度
          axisTick: { 
            show: false
          },
          // 把刻度标签里面的文字颜色设置为白色
          axisLabel: { 
            color: "#fff"
          }
        },
          { 
            show: true,
            data: [702, 350, 610, 793, 664],
               // 不显示y轴的线
          axisLine: { 
            show: false
          },
          // 不显示刻度
          axisTick: { 
            show: false
          },
            axisLabel: { 
              textStyle: { 
                fontSize: 12,
                color: "#fff"
              }
            }
          }
        ],

## 设置两组柱子层叠 ##

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

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

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

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

inverse:true

# 完整代码 #

// 柱状图2
    (function() { 
      var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
      // 1. 实例化对象
      var myChart = echarts.init(document.querySelector(".bar2 .chart"));
      // 2. 指定配置和数据
      var option = { 
        grid: { 
          top: "10%",
          left: "22%",
          bottom: "10%"
          // containLabel: true
        },
        // 不显示x轴的相关信息
        xAxis: { 
          show: false
        },
        yAxis: [
          { 
            type: "category",
            inverse: true,
            data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
            // 不显示y轴的线
            axisLine: { 
              show: false
            },
            // 不显示刻度
            axisTick: { 
              show: false
            },
            // 把刻度标签里面的文字颜色设置为白色
            axisLabel: { 
              color: "#fff"
            }
          },
          { 
            data: [702, 350, 610, 793, 664],
            inverse: true,
            // 不显示y轴的线
            axisLine: { 
              show: false
            },
            // 不显示刻度
            axisTick: { 
              show: false
            },
            // 把刻度标签里面的文字颜色设置为白色
            axisLabel: { 
              color: "#fff"
            }
          }
        ],
        series: [
          { 
            name: "条",
            type: "bar",
            data: [70, 34, 60, 78, 69],
            yAxisIndex: 0,
            // 修改第一组柱子的圆角
            itemStyle: { 
              barBorderRadius: 20,
              // 此时的color 可以修改柱子的颜色
              color: function(params) { 
                // params 传进来的是柱子对象
                console.log(params);
                // dataIndex 是当前柱子的索引号
                return myColor[params.dataIndex];
              }
            },
            // 柱子之间的距离
            barCategoryGap: 50,
            //柱子的宽度
            barWidth: 10,
            // 显示柱子内的文字
            label: { 
              show: true,
              position: "inside",
              // {c} 会自动的解析为 数据 data里面的数据
              formatter: "{c}%"
            }
          },
          { 
            name: "框",
            type: "bar",
            barCategoryGap: 50,
            barWidth: 15,
            yAxisIndex: 1,
            data: [100, 100, 100, 100, 100],
            itemStyle: { 
              color: "none",
              borderColor: "#00c1de",
              borderWidth: 3,
              barBorderRadius: 15
            }
          }
        ]
      };
    
      // 3. 把配置给实例对象
      myChart.setOption(option);
    })();

# 折线图 #

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

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

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

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

默认都是auto 居中对齐

// 图例组件
        legend: { 
          textStyle: { 
            color: '#4c9bfd' // 图例文字颜色
          },
          right: '10%' // 距离右边10%
        },

## x轴相关配置 ##

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

xAxis: { 
          type: 'category',
          data: ["周一", "周二"],
    	  axisTick: { 
             show: false // 去除刻度线
           },
           axisLabel: { 
             color: '#4c9bfd' // 文本颜色
           },
           axisLine: { 
             show: false // 去除轴线
           },
           boundaryGap: false  // 去除轴内间距
        },

## y轴的定制 ##

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

yAxis: { 
          type: 'value',
          axisTick: { 
            show: false  // 去除刻度
          },
          axisLabel: { 
            color: '#4c9bfd' // 文字颜色
          },
          splitLine: { 
            lineStyle: { 
              color: '#012f4a' // 分割线颜色
            }
          }
        },

## 把折线修饰为圆滑 ##

series 数据中添加 smooth 为 true

series: [{ 
          name:'新增粉丝',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          // 折线修饰为圆滑
          smooth: true,
          },{ 
          name:'新增游客',
          data: [100, 331, 200, 123, 233, 543, 400],
          type: 'line',
          smooth: true,
        }]

## 完整代码 ##

// 折线图1模块制作
    (function() { 
      var yearData = [
        { 
          year: "2020", // 年份
          data: [
            // 两个数组是因为有两条线
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
          ]
        },
        { 
          year: "2021", // 年份
          data: [
            // 两个数组是因为有两条线
            [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
            [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
          ]
        }
      ];
      // 1. 实例化对象
      var myChart = echarts.init(document.querySelector(".line .chart"));
      // 2.指定配置
      var option = { 
        // 通过这个color修改两条线的颜色
        color: ["#00f2f1", "#ed3f35"],
        tooltip: { 
          trigger: "axis"
        },
        legend: { 
          // 如果series 对象有name 值，则 legend可以不用写data
          // 修改图例组件 文字颜色
          textStyle: { 
            color: "#4c9bfd"
          },
          // 这个10% 必须加引号
          right: "10%"
        },
        grid: { 
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: true, // 显示边框
          borderColor: "#012f4a", // 边框颜色
          containLabel: true // 包含刻度文字在内
        },
    
        xAxis: { 
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          axisTick: { 
            show: false // 去除刻度线
          },
          axisLabel: { 
            color: "#4c9bfd" // 文本颜色
          },
          axisLine: { 
            show: false // 去除轴线
          }
        },
        yAxis: { 
          type: "value",
          axisTick: { 
            show: false // 去除刻度线
          },
          axisLabel: { 
            color: "#4c9bfd" // 文本颜色
          },
          axisLine: { 
            show: false // 去除轴线
          },
          splitLine: { 
            lineStyle: { 
              color: "#012f4a" // 分割线颜色
            }
          }
        },
        series: [
          { 
            name: "新增粉丝",
            type: "line",
            // true 可以让我们的折线显示带有弧度
            smooth: true,
            data: yearData[0].data[0]
          },
          { 
            name: "新增游客",
            type: "line",
            smooth: true,
            data: yearData[0].data[1]
          }
        ]
      };
    
      // 3. 把配置给实例对象
      myChart.setOption(option);
      // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function() { 
        myChart.resize();
      });
    
      // 5.点击切换效果
      $(".line h2").on("click", "a", function() { 
        // alert(1);
        // console.log($(this).index());
        // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
        // console.log(yearData[$(this).index()]);
        var obj = yearData[$(this).index()];
        option.series[0].data = obj.data[0];
        option.series[1].data = obj.data[1];
        // 需要重新渲染
        myChart.setOption(option);
      });
    })();

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

## 填充颜色 ##

// 填充区域
            areaStyle: { 
                  // 渐变色，只需要复制即可
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    { 
                      offset: 0,
                      color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
                    },
                    { 
                      offset: 0.8,
                      color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)"
            },

## 设置拐点 ##

symbol

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

// 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 设置拐点颜色以及边框
           itemStyle: { 
                color: "#0184d5",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,

//第一条 线是圆滑
           smooth: true,
            // 单独修改线的样式
            lineStyle: { 
                color: "#0184d5",
                width: 2 
            },
             // 填充区域
            areaStyle: { 
                  // 渐变色，只需要复制即可
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    { 
                      offset: 0,
                      color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
                    },
                    { 
                      offset: 0.8,
                      color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)"
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 设置拐点颜色以及边框
           itemStyle: { 
                color: "#0184d5",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,

# 饼形图 #

## 修改图例组件 ##

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

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

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

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

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

### label ###

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

### labelLine ###

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

#### length和length2 ####

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

## 南丁格尔玫瑰图 ##

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

### 颜色设置 ###

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

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

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

### series对象 里面 data对象格式 ###

{  value: 20, name: '云南' },
              {  value: 26, name: '北京' },
              {  value: 24, name: '山东' },
              {  value: 25, name: '河北' },
              {  value: 20, name: '江苏' },
              {  value: 25, name: '浙江' },
              {  value: 30, name: '四川' },
              {  value: 42, name: '湖北' }

### 饼形图的显示模式 ###

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

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

series: [
          { 
            name: "面积模式",
            type: "pie",
            radius: [30, 110],
            center: ["50%", "50%"],
            roseType: "radius",
            // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
            label: { 
              fontSize: 10
            },
          }
        ]
      };

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

// 文字调整
            label:{ 
              fontSize: 10
            },
            // 引导线调整
            labelLine: { 
               // 连接扇形图线长
             length: 6,
              // 连接文字线长
             length2: 8
            } 
          }
        ],

# Echarts-社区介绍 #

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

[ZRender]: https://github.com/ecomfe/zrender
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70_pic_center]: /images/20210516/06bdc358bf214d6da28b5c030599f322.png