# ECharts

[TOC]

# 可视化面板介绍

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

# 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 库
<script src="js/echarts.min.js"></script>
  1. 准备一个具备大小的 DOM 容器 -> 生成的图表会放入这个容器
<div class="box"></div>
<style>
.box{
	width:600px;
	height: 400px;
		}
</style>
  1. 初始化 echarts 实例对象 -> 实例化 echarts 对象
//初始化实例对象  echarts.init(dom容器);
	var myChart=echarts.init(document.querySelector(".box"));
  1. 指定配置项和数据 option -> 根据具体需求修改配置选项
// 指定图表的配置项和数据
	var option = {
	title: {
		text: 'ECharts 入门示例'
	},
	tooltip: {},
	legend: {
		data:['销量']
	},
	xAxis: {
		data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
	},
	yAxis: {},
	series: [{
		name: '销量',
		type: 'bar',
		data: [5, 20, 36, 10, 10, 20]
	}]
};
  1. 将配置项设置 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: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },

把那个点成灰色的那个对应的折线就消失了

在这里插入图片描述

# 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，right 都是相当于当前 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
    } 
  }
],