ECharts_study

对于渲染可视化图标的库有许多，因为项目需要，我学习了 Echarts 。完整叫 Apache ECharts

很多图在基本的准备部分不会详细说明，因此初学一定要看基本准备的部分
另外，图表真的很多，

什么是 Echarts

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

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

可以说很牛逼，很酷了。那废话不多说，开始看看怎么弄吧

初体验

可直接复制使用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts-初体验</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.js"></script>
</head>

<body>
    <div id="main" style="width: 600px;height:400px;margin:100px auto;"></div>
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            // 图标标题
            title: {
                text: 'ECharts 初体验'
            },
            // 类型HTML 的legend 标签 ，也是图标的标题。只不过这个标签可以是具体某个图标的。而如上的 title 可以是显示所有图标的总标题
            legend: {
                data: ['成绩']
            },
            // 柱状，折现等有横竖坐标的标题，结合图会更容易理解
            xAxis: {
                data: ['语文', '数学', '英语', '物理', '生物', '化学']
            },
            yAxis: {},
            // 图列表。 
            series: [{
                name: '成绩',
                type: 'bar',
                data: [120, 130, 119, 90, 90, 88]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

在这里插入图片描述

安装

安装的方法有很多，如直接下载代码， npm 获取， CDN 。甚至可以只选择安装需要的部分。

npm

npm install echarts --save

CDN

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.js"></script>

或者在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。

然后在文件里使用

<script src="echarts.js" />

或者官方提供的特别定制

点此

导入项目

前面介绍了如何安装，对于使用 CDN 的，会加载全部模块。而使用 npm 或 yarn 安装或者只安装部分功能的。我们可以只导入部分需要的模块。

全部导入

import * as echarts from 'echarts';

这会把 ECharts 提供的组件，渲染器都导入。并集中在 echarts 对象中。如果我们想使用通过点方法即可。

echarts.init(....)

部分导入

部分导入我们可以只导入我们需要的模块，减少代码最后的体积。

其中核心模块和渲染器是必须的。其他图标组件我们可以按需引入。注意引入后要注册才能使用。

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  DatasetComponentOption,
  TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

// 接下来的使用就跟之前一样，初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  // ...
});

基本准备（也是其他图表的通用步骤）

准备步骤

创建一个盒子。用于显示图表。记得要给它一个初始的宽高。
引入 echart 提供的init 方法 , 其他 API 或组件可以按需引入
准备一个初始化图表函数，在初次渲染或需要重新渲染时可以调用。(非必要，如果不需要修改数据)
在初始函数里调用 init 方法，传入提前准备的盒子节点。init 方法返回一个图表的实例（echartsInstance )。一个盒子只能初始一个图表实例
使用图表实例的 setOption方法，传入一个 option 对象，此对象用于配置生成的图标类型和数据及样式。

<template>
  <div>
      <!-- 设置一个用来显示图表的盒子 -->
    <div id="con" :style="{ width: '400px', height: '300px' }"></div>
  </div>
</template>
<script>
    // 导入 init 
    import { init } from "echarts";
    export default {
 	 name: "Echarts_bar",
        // 在组件挂载后调用，初始化图表
 	 mounted() {
	    this.initChart();
 	 },
    methods: {
    	initChart() {
      // 调用 init  ,  返回一个 ecahrt实例
      let myChart = init(document.getElementById("con"));
            
      // 配置图表 , option 是一个对象，用于配置图表
      myChart.setOption(option）
};
</script>

option 对象

option 对象的配置是学习图表的难点，基础的准备是通用且简单的易。

因此学 echarts ,就是学怎么配置 option 对象。怎么配置出需要的图表。
在这里插入图片描述

从官网看， option 对象有很多配置。option 下的键值的值可能是一个对象，对象又有很多键值。

但这些是汇总，一种图表使用到的只是部分，而且有的可以使用但是不是必须使用。

option:{
    title:{...}  // 配置标题
    xAxis:{...}
    yAxis:{...}  // 配置 x 和 y 轴
    series:[{}]  // 配置图表
    //....
}

同一个图表实例里设置的option 还有一个特点。新旧 option 是合并不是代替。

也就是第一次我们配置的一大堆，如果有新的数据，会新的要配置的，我只想要在新的 option 里增加新的或要改的。如果不变的配置可以不用配置第二遍。

条形图

条形图是初高中常见的图。在项目做数据可视化用条形图的好处是我们可以一目了然的知道大概数量和变化趋势。

那么我们学习学习怎么使用 echart 做条形图。（以下代码是 vue 的脚手架搭建的项目基础上写的）

图表配置

基础准备都是通用的，难点在于不同的图表需要不同的配置（但有些配置也是通用的）。功能复杂，配置项越多。本节只说明条形图（bar）的一些常用配置。其他配置可以在根据需要在官网上查。

传给setOption方法的是一个对象，不难知道，我们要写的就是键值对。（以下键不分先后）

title :配置图表的标题。值是一个对象。

title: {
 // 标题内容 , 支持  \n 换行符
  text: "echarts_bar"
    
  // 其他配置在接下来的通用配置一节会讲
},

**xAxis / yAxis : ** 直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。（如果是设置一个图表是需要坐标轴的，那么不能不配置 xAxis 这个项，但xAxis 的值可以是空对象）

xAxis:{
    // 坐标轴名字
    name :''
    
    // 是否显示 ，默认为 true
    show : true
    
    // 坐标轴类型
    type:'category',  // 类目轴，适用于离散的类目数据,。类名对应的数据可以在 series 里或取
    // 其他值 ： value : 数值轴，适用于连续数据。
   	// 			time :  时间轴，适用于连续的时序数据.
    // 			log :  对数轴。适用于对数数据。
    
    //   类目数据，在类目轴（type: 'category'）中有效。
    data : []

	
    // x 轴的位置。
    position :  'top'/'bottom'
    
    // X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
     offset : '20' (默认单位 px)
    
    // 坐标轴刻度最小值。和最大刻度值
    min / max : // 不写会自动计算。值有很多种写法。有不同的作用。详细可查阅文档。
}

**series : ** 系列列表。每个系列通过 type 决定自己的图表类型。值为数组。数组的元素是一个对象。一个对象对应一个图表。（但这些图表都作用在同一个容器。也可以是多个同类图表叠加）

series:[
   {
       	// 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
        name:'系统名',
        // 系列类型 ，也就是表的类型 ，bar ： 条形表 。 pie : 饼状图 。line : 折线图 。等
        type:'bar',
       
       // 数据
        data: [],  
       // 如果我们已经设置的一个坐标轴的数据（其类型是 category) 。那么这里的数据可以是一维数组，做为类目的值 。与另一准备的类目一一对应。
       // 它也可以是多维数组，用于设置 x 轴数据 ，y 轴数据 。（需要在 xAxis 或 yAxis 指定哪个轴为 category) 。
            // data:[
            //   ['苹果',4],
            //   ['牛奶',2],
            //   ['西瓜',6],
            //   ['香蕉',3]
            // ]
   }
]

简单案例

<template>
  <div>
    <div id="con" :style="{ width: '400px', height: '300px' }"></div>
  </div>
</template>

<script>
import { init } from "echarts";

export default {
  name: "Echarts_bar",
  data() {
    return {
      xdata: ["西瓜", "香蕉", "苹果", "桃子"],
      ydata: [2, 3.5, 6, 4],
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = init(document.getElementById("con"));
      // 配置图表
      myChart.setOption({
        title: {
          // 标题组件
          text: "水果单价表",
        },
        xAxis: {
          data: this.xdata,  // type 会默认此轴为 category , 否则 data 是不生效的
        },
        yAxis: {
            name:'单位/元'
        },  //  type 默认为 value 。 数据在 series 里配置

        series: [  // 系列列表。每个系列通过 type 决定自己的图表类型
          {
            name: "单价", // 此图表的名字
            type: "bar", // 该图标的类型
            data: this.ydata,  // 类名数据
          }
        ],
      });
    },
  },
};
</script>

在这里插入图片描述

其他效果

barWidth

柱子的宽度 , 如果是百分百：根据x轴（就本图）的类目数量，分成等比例。然后根据分出的大小再百分百取出作为柱宽。不设置会自适应。设置在 sereies 的系列里。适应于条形图

 // 条形柱的宽度
 barWidth ： '20', // 柱子的宽度 , 如果是百分百：根据x轴（就本图）的类目数量，分成比例。每份为盒子宽度的四分之一，而此百分百是相对四分之一而言的。 不设置会自适应。

markPoint

标记点，可标记一些特殊的数据。在 series 的系列里使用

// 标记点 ，可标记一些特殊的数据
markPoint: {
  symbol: "pin", // 标记的形状 ，圆，方，等。
  data: [  // 设置标记点 。是一个数组，数组的元素是对象，每一个对象对应一个标记点。
    {
      type: "max", // 最大值
    },
    {
      type: "min", // 最大值
      name: "标记的名称", // 可无
    },
  ],
},

markLine

标记线，在 series 的系列里使用

markLine: {
  data: [
    {
      type: "average",
      name: "标记线名称", // 平均值线
    },
  ],
},

label

图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等. 在 series 的系列里使用

就柱状图来说，如果仅柱子，是不能直观看出具体代表的是多少值。但可以使用 label 标出

label: {
      show: true, // 是否显示，默认是 false
      position : '标记位置'  // 支持字符串 ：left ,inside 等 ，也支持数组表示位置：[20,30] / [10%,20%]
      rotate : '文字的旋转'  // 还有其他样式，如颜色等可以设置
},

多效果使用案例

<template>
  <div>
    <div id="con" :style="{ width: '500px', height: '400px' }"></div>
  </div>
</template>

<script>
import { init } from "echarts";

export default {
  name: "Echarts",
  data() {
    return {
      xdata: ["西瓜", "香蕉", "苹果", "桃子"],
      ydata: [5, 8, 4, 9],
      ydata2: [10, 20, 40, 30],
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let myChart = init(document.getElementById("con"));
      myChart.setOption({
        title: {
          text: "水果",
          link:'https://echarts.apache.org/v4/zh/option.html#title',
          left:'30'
        },
        xAxis: {},
        yAxis: {
          type: "category",
          data: this.xdata,
        },
   
        series: [
          {
            name: "单价", 
            type: "bar", 
            markLine: {
              // 标记线
              data: [
                {
                  type: "average",
                },
              ],
            },
            label: {
              show: true, // 是否显示，默认是 false
            },
            barWidth: "25%", 
            data: this.ydata, // 图表的数据
          },
          {
            name: "存储量",
            type: "bar",
            data:this.ydata2,
            markPoint: {
              symbol: "pin",
              data: [
                {
                  type: "max", // 最大值
                },
                {
                  type: "min",
                },
              ],
            },
          },
        ],
      });
    },
  },
};
</script>

在这里插入图片描述

通用配置

这里介绍一些通用的配置，但并不会罗列全部，有些内容使用场景比较特殊，或者比较少用到。便不去介绍了。如有需要查阅文档。此笔记供入门学习和提供一些案例。

title

配置图表的标题。值是一个对象。

title: {
 // 标题内容 , 支持  \n 换行符
  text: "echarts_bar",
      
  // 标题超链接，点击标题会跳转
  link :'url'
    
  // 标题样式对象
  textStyle ：{
     /*
     	color
     	fontStyle / fontWeight 等 字体样式
     	width / height
     	还有边界，阴影等样式
     */
   }
    
  // 副文本标题 ，它也有独立的样式，链接等。
   subtext :'字符串'
    
  // 整体（包括 text 和 subtext）的水平对齐
   textAlign :''  // 'auto'、'left'、'right'、'center'
    
   // position 调位
   left / top / right / button  // 值可以是 20 (默认单位px) ，可以是 '20%' 相对父盒子宽高百分比，也可以是 'top', 'middle', 'bottom'。
},

tooltip

提示框组件。它可以设置的位置也很多，全局，局部，某系列，某数据等等

提示框组件在不同类型的图有不同的效果。

如在条形图是中效果是这样子的： (鼠标悬浮在条形柱上时出现提示框)

在这里插入图片描述

tootip 的值也是对象，可以配置是否显示，显示的触发条件，显示的文字，样式等。

 //  提示框组件。
tooltip: {
      show: true,
      trigger: "item", // 触发类型。
      // item 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。(也就是在图型上才会触发)
      // axis 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用 ( 在坐标轴上即可，不一定是要在图形上 )
      // none 什么都不触发。
          
      triggerOn: "mousemove", // 鼠标移动时触发。 或 click / none

      //  formatter:'{b}: {c}'   // 可以自定义提示框的内容 ，如果没有，会有默认的内容。
          						 // 有一些变量是已经赋值好的，可根据不同类型查阅文档.如以上的 b 和 c
      //  里面支持 {变量} 的写法 。 也支持 HTML 标签,
          
      //  值除了是字符串，也可以是函数 。函数是一个回调函数，函数的返回值是字符串 ，此字符串的值再作为 formatter 的值去显示 。
      //  函数接收到一个参数， 此参数是一个对象，对象里有相关的数据。
      formatter: (res) => {
        return `${res.name}:${res.value}`; // 类目名 ：值
      },
        
      // 提示框浮层的文本样式
       textStyle :{}  // color , fontSize 等等
    },

toolbox

根据栏，内置有导出图表为图片，数据视图·，动态类型切换，数据区域缩放，重置五个工具。可以按需添加。

在这里插入图片描述

toolbox: {
    // 工具大小
    itemSize： 15
    // 工具之间的间距
    itemGap: 10
    
    // 配置工具
      feature: {
        saveAsImageL: {}, // 导出图片
        dataView: {}, // 直接数据显示
        restore: {}, // 重置
        dataZoom: {}, // 缩放
        magicType: {
          // 切换
          type: ["bar", "line"],
        },
      },
    },

legend

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示.
在这里插入图片描述

legend: {
    data: ["单价", "存储量"],  // 元素值是系列的名称
    // 还有一些控制样式的
 },
series:[
    {
        name:'单价'，
        ...
    },{
		name ;"存储量"
        ....
    }
]

折线图

折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。

变化趋势显而易见，且在多组数据同表显示时，容易对比，简单明了。

基本使用

折线图的使用几乎与条形图一样，大部分情况只需要把类型 bar 换成类型 line 即可。

设置盒子 -> 导入ecahrts 相关API -> 创建ecahrts 实例 -> 设置option

<template>
  <div>
    <div id="con" :style="{ width: '500px', height: '400px' }"></div>
  </div>
</template>

<script>
import { init } from "echarts";

export default {
  name: "Echarts_line",
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let myChart = init(document.getElementById("con"));

      let option = {
          title:{
              text:'新增用户统计',
              left:'center'
          },
          xAxis:{
              name:'月份',
              data:['1','2','3','4','5','6']
          },
          yAxis:{
              name:'新增用户 / 个'
          },
          series:[
              {
                  name:'新增用户统计',
                  type:'line',
                  data:[3000,2400,6300,2800,7300,4600,2200]
              }
          ]

      };
      myChart.setOption(option);
    },
  },
};
</script>

在这里插入图片描述

其他效果

xAxis 、 yAxis

对于 x 和 y 轴的配置，大致都是一样的。在条形图部分已经介绍部分。这里做一些必要的补充。

boundaryGap

坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。

值可以是布尔值，也可以是数组 ['value1','value2']，设置两侧的留白大小。

xAxis:{
  type:'',
  data:[],
  boundaryGap:false
}

在这里插入图片描述

scalse

只在数值轴中type:'value' 有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。

适合用于数据较大，且波动幅度不大的数据里，或在双数值轴的散点图中也适用。

yAxis:{  // type 默认为 value
    scale:true
}

在这里插入图片描述

lineStyle

折线的样式 , 设置在 series 的系列里。

series: [
  {
// 	....
    lineStyle: {
      color: "red",
      type: "dashed", // dashed : 虚线 , dotted : 点线 ， solid : 实线 （默认）
    },
  },
]

在这里插入图片描述

smooth

设置折线图转折点的样式，是平滑还是折角。值为布尔值，默认 false 。在 series 的系列里设置

series: [
  {
	// ....
    smooth:true
  },
]

在这里插入图片描述

markArea

标记区域，在条形图我们学了标记点标记线。这里补充一个标记区域。被标记的区域会有一个阴影。我们可以设置阴影的颜色。

同样设置在 series 的系列里

// 在 sereis 的元素对象里 ， 
markArea:{
    data:[  // data 是一个二维数组 。 
            [		// 设置标记区域
                {
                    xAxis:'1'
                },
                {
                    xAxis:'2'
                }
            ],
            [	// 设置第二个标记区域
                {
                    xAxis:'4',
                    yAxis:'3100'
                },
                {
                    xAxis:'6',
                    yAxis:'3300'
                }
            ]
    ]
}

areaStyle

区域填充样式。设置后显示成区域面积图。

 series: [
          {
			// ...
            areaStyle:{
                color:'pink',
                origin:'end'  // auto(默认) ， start , end
            }
          },
  ],

在这里插入图片描述

stack

堆叠图，数据不止一组时，并且我们希望第二组数据是在第一组数据的基础上叠加上去的。

series: [
  {
    name: "新增用户统计",
    type: "line",
    data: [700, 1000, 400, 500, 300, 800, 200],
    // stack 的值是用来匹配的 ，之后叠加上去的会与之匹配
    stack:'mystack',
    areaStyle:{}  // 配置颜色，如果为空， ecahrts 会自动配置颜色
  },{
      name:'叠加数据',
      type:'line',
      data: [700, 300, 400, 200, 500, 100, 300],

      stack:'mystack',  // 与先配置的 stack 的数据叠加。
      areaStyle:{}
  }
],

在这里插入图片描述

散点图

基本使用

散点图可以帮助我们推断变量间的相关性。

它的 type 是 scatter 。与 bar 和 line 相比，它的特点就是两个坐标都是数据（value) 。显示的是一个个的点。

基本操作与折线图，条形图相同。 坐标轴的 type 都是 value 。series 的 type 为 scatter 。数据是二维数组。

<template>
  <div>
    <div id="con" :style="{ width: '500px', height: '400px' }"></div>
  </div>
</template>

<script>
import { init } from "echarts";

export default {
  name: "Echarts_scatter",
  data() {
    return {};
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let myChart = init(document.getElementById("con"));

      let option = {
        title: {
          text: "散点图",
          left: "center",
        },
        xAxis:{
            type:"value",
            scale:true
        },
        yAxis:{
         type:"value",
         scale:true
        },
        series:[
            {
                type:'scatter',
                data:[
                  // x , y   
                    [10,11],
                    [9,10],
                    [11,11],
                    [10,10],
                    [10,12],

                    [13,11],
                    [12,15],
                    [12,13],
                    [14,13],
                    [13,13],
                    [13,12],

                    [15,14],
                    [14,13],
                    [14,14],
                    [16,15],
                    [16,17],

                    [17,16],
                    [17,17],
                    [17,18],

                    [18,16],
                    [18,17],
                    [18,20],
                ],
            }
        ]
      }

      myChart.setOption(option);
    },
  },
};
</script>

在这里插入图片描述

其他效果

symbolSize

控制散点的大小的配置项。在 series 的系列里使用。

它可以控制全部散点通以=一一个大小，也可以控制部分符合某些添加的点的大小

series:[
    {
         // ...
        
        // 控制散点的大小 。
        // symbolSize:10,  // 值可为数值，控制此系列全部散点的大小        
       symbolSize:function(e){  // 值也可以是一个函数
          console.log(e);   // 值为 一个一个点的数值 数组。
          if(e[1]/e[0]>1){  // 当 y 轴的值大于 x 轴的值时，大小为 12 , 否者为6
            return 12
          }
          return 6
        },
    }
]

itemStyle

控制散点的颜色，在 sereis的系列里使用

它可以控制全部点的颜色，也可以控制部分点的颜色。

itemStyle:{
      // color:'red'  // 直接赋值 ，
    
      color:function(e){  // 也支持函数值
        console.log(e.data);  // e 是散点的数据，e.data 则取出数值 数组
        let [a,b] = e.data
        if(b/a>1){
          return 'red'
        }
        return 'green'
      }
}

以上两个效果结合的图

在这里插入图片描述

effectScatter

它是 series 系列的 type 的值。也是散点图。但它有涟漪效果。如：

在这里插入图片描述

我们将 type 的值设置为 effectScatter 。那个此系列的散点图的所有散点就都具有了涟漪的效果。

它可配合 showEffectOn 触发时机和 rippleEffect 涟漪效果使用。

series:[{
    type:'effectScatter',   // 涟漪动画效果 ， 使用此后，给此系列的所有散点开启涟漪效果，默认图标加载后开启效果。
    
    // 触发时机
	showEffectOn:'emphasize', // 默认值是 render . 表示加载后就开启 。  emphasize 是鼠标悬浮在散点上时，该散点才开启
	
    // 涟漪样式
	rippleEffect:{
      color:'',  // 涟漪的颜色 , 默认为散点的颜色
      number : 2  // 波纹的数量
      period : 3  // 动画周期 ，单位秒
      scale:10  //  控制涟漪扩开的大小，scale 基于原本的多少倍。
    },			
}]

xoy坐标轴的通用配置

以上三个图都是在 x,y 坐标轴上的。这节讲一讲 xoy 坐标轴的一些通用配置。

grid

直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。

grid:{
    // 是否显示图表的边框
    show:true,
    // 边框的宽度
    borderWidth:10,
    // 边框颜色
    borderColor:'red',

    // left / top /控制图表与盒子的偏移量。会影响图表的大小
    left:120  // left ,top , button,right 

    // 控制图表的大小
    // width:/height:
},

在这里插入图片描述

axis

x 和 y 坐标轴。这个知识点其实在条形图里有讲到。直接 copy。

xAxis:{  // 或 yAxis
    
    // 坐标轴名字
    name :''
    
    // 是否显示 ，默认为 true
    show : true
    
    // 坐标轴类型
    type:'category',  // 类目轴，适用于离散的类目数据,。类名对应的数据可以在 series 里或取
    // 其他值 ： value : 数值轴，适用于连续数据。
   	// 			time :  时间轴，适用于连续的时序数据.
    // 			log :  对数轴。适用于对数数据。
    
    //   类目数据，在类目轴（type: 'category'）中有效。
    data : []

	
    // x ，y  轴的位置。
    position :  'top'/'bottom' / 'left'/ 'right'
    
    // X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
     offset : '20' (默认单位 px)
    
    // 坐标轴刻度最小值。和最大刻度值
    min / max : // 不写会自动计算。值有很多种写法。有不同的作用。详细可查阅文档。
}

强调几点

如果设置了 data ，那么 type 默认为 category 。如果为空，默认为 value 。值从 series 里获取。
如果设置了 category ,但是没有设置 data。那么 series 系列里的 data 需是一个二维数组。
如果某个轴的数据是从 series 的系列里获取，并且它是 category 类型，那么在 axis 里必须为其配置 type 为 category。

dataZoom

此前在 toolbox 里我们知道有一个 dataZoom 工具。可以选择选择某部分图，进行缩放查看。

这个 dataZoom不是在 toolbox 里配置的。而是直接配置在 option 下的。

值是数组，数组的元素就是一个缩放功能。如可以给 x 轴配置一个，给 y 轴数据也配置一个。一般只有一个时默认是

let option = {
    dataZoom:[
        {
            // 缩放类型 ，控制缩放的位置，和方法。
            type:'slider'  // x 轴底部有滑动的轴 。 'inside'  // 在图内通过鼠标滑轮缩放
        }
    ]
    // ...
}

在这里插入图片描述

**如果是 inside ** 不会增加什么 UI 。但鼠标放在图里，滚动鼠标滚动，可根据鼠标位置进行缩放。

多个缩放器

当有多个缩放器时，对应不同坐标的需要配置其对应坐标的 index。

一般如果没有多个 x , 多个 y 。那么 inde 为 0 即可。

 dataZoom:[
    {
        type:'slider',
        xAxisIndex:0  // x 轴
    },{
        type:'slider',
          yAxisIndex:0
    }
],

在这里插入图片描述

饼图

并图也是结构简单的一种图表。它的特点就是可以直观看出各类目的大概比例。

它不需要 x 轴和 y 轴。但基本准备还是不变的。

主要的注意点是 series 系列的 type 为 pie 。以及数据的类型

series 系列的 data 值可以有多种书写方式。一维数组，二维数组，或者对象数组。 常用的是对象数组

[
    {
        name:'数据项名称。',
        value:'数据值'
    }
]

简单案例

<template>
  <div>
     <div class="con" :style="{ width: '450px', height: '300px' }"></div>
  </div>
</template>

<script>
import {init} from 'echarts'
export default {
    name:'ecahrts_pie',
    mounted(){
        this.initChart()
    },
    methods:{
        initChart(){
        let chart = init(document.querySelector('.con'))
        let option={
            title:{
                text:'pie',
                left:'center'
            },
            series:[
                {
                    type:'pie',
                    data:[
                        {
                            name:'睡觉',
                            value:'7'
                        },{
                            name:'打码',
                            value:'10'
                        }
                    ]
                }
            ]
        }
        chart.setOption(option)
    }
    }
}
</script>

在这里插入图片描述

常见效果

label

饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。默认是显示的。也就是上图中的打码和睡觉。

// 如果数据只是简单的一维数组
data = [7,10]
// 那么便只有值， 没有名称。因此可以设置 label 不显示
label:{
    show:false
}
// 图示便是光秃秃的圆了。

在这里插入图片描述

除了控制 label 是否显示，我们还能控制显示数据文字的内容，文字的样式等。

label:{
    show : true,
    formatter:'字符串', // 也填写变量 {变量}
     //  {a}：系列名。
	 //  {b}：数据名。
	 //  {c}：数据值。
	 //  {d}：百分比。
    // formatter 的值也可以是函数，函数可以接到一个参数，参数上有需要要数据，将数据整合好返回即可。
        
    // 还有 position , color 等控制样式
}

radius

饼图的半径。通过设置它，我们可以改变饼图的半径，也可以将其设置成环。

series:[{
    // ....
    radius:''  // 数值 ： 绝对半径大小 （单位px) . 
    		   // 百分百 ： 取宽高中的最小值的二分之一，再进行百分百取值。
    	       // 数组 ： ['内半径','外半径']
}]

label:{
    show:true,
    formatter:'{b}:{d}%'
},
radius:['60','80']

在这里插入图片描述

roseType

是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：

'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
'area' 所有扇区圆心角相同，仅通过半径展现数据大小。

series:[{
    // ...
    roseType:'radius'
}]

在这里插入图片描述

selectedMode

点击选中模式。饼图自带有鼠标悬浮时的出现的动画。但点击是没有反应的。

设置 selectedMode, 可为扇区添加点击选中效果。可配合 selectedOffset 使用

series:[{
    // ...
    selectedMode:'single'  // 另外一值是 multiple。
    // 效果如下图 ，如果是 single。 则同一时间只有一个扇区可以出现此效果。而 multipe 则允许多个扇区都处于 selected 状态。
    
    // 可以配合 selectedOffset 使用 ，设置偏移大小
    selectedOffset：30
}]

在这里插入图片描述

地图

MAPJSON

基本使用

简述步骤

基础准备还是不变的。

引入 echarts 相关的 API 。准备容器，初始化对象，设置 option 。

但与前面几个图标也有很大的不同。

需要先准备矢量地图的 json 数据。可以通过 ajax 加载，也可以提前下载到本地
使用 echarts 暴露的 registerMap 全局注册地图数据。

import {registerMap} from 'echarts'

registerMap('chinaMap',china)  // 第一个参数是之后使用时需要的名称 ，第二个是 JSON数据

option 里可以配置series ，也可以配置 geo。

geo:{
    // type 为 map 
    type:'map',
    map:'chinaMap'  // 需要与注册时设置的名称相同
}
// 或者
series:[{
    type:'map',
    map:'chinaMap'
}]

简单案例

本案例 JSON 文件下载地址

<template>
  <div>
  <div id="con" :style="{ width: '700px', height: '600px' }"></div>
  </div>
</template>

<script>
    // 导入 init 和 registerMap
import {init,registerMap} from 'echarts'
    // 导入提前下载到本地的地图JSON数据
import china from '../../jsondata/china.json'

export default {
    name:'echarts_map',
    mounted(){
        this.initChart()
    },
    methods: {
       async initChart(){
            let Chart = init(document.querySelector('#con'))
            		// 使用 register 注册地图
            await registerMap('chinaMap',china)
            let option = {
                geo:{
                    type:'map',
                    map:'chinaMap'  // 需要与注册时设置的名称相同
                }
            }
            Chart.setOption(option)
        }
    },
}
</script>

在这里插入图片描述

常见配置

roam

设置允许缩放和拖动的效果。当鼠标放在地图上时，通过滚轮可以进行缩放，点击地图可以进行拖动。

值为布尔值

geo:{
    // ...
    roam:true
}

label

在上面的例子的效果图我们可以看见，每个省份是没有名称显示的。label 可以控制省份名字的显示和样式等。

geo:{
    // ...
    label:{
        show:true,
        // 显示的内容，不设置默认为省份名称，值可以是字符串或函数。与以上讲过的一样。
        formatter: ''
        // 样式的配置较多，可查阅文档
    }
}

在这里插入图片描述

zoom

设置初始加载时地图的缩放比例，值为数组。在geo 下，与 label同级

center

设置中心点。值为数组。['经坐标','纬坐标'] 将经纬度对应的点设置到图表中心

常见效果

设置颜色

在上面的地图中，都是清一色灰色的。除了鼠标悬浮会变色外。显得很单调。

通过 series 和 visualMap 的配合，我们可以为地图设置颜色。但它的颜色不会太炫，一般通过颜色来显示人口的多少或者是温度高低等。

**配置步骤 **(基础地图已经配置好的基础上)

准备一个数据，它保存了地图中省份的名字和对于的数据，或者是市的名字（根据是全国地图还是省图，或者其他）

let temdata = [
    {
        name:'广东省',  // 假设是全国地图 ，name 匹配广东省
        value:'32'	  //  设置其对应的数据，比如这里我们设置气温。
    },{
        name:'福建省',
        value:'29'
    },{
        // ...
    },//...
]

将 series 和 geo 关联起来。当然 geo 也可以用 series 代替,那么便是加一个系列了。

series:[{
    // 配置数据 也就是上面准备的数据
  data:temdata,
    // 需要关联的地图的索引 。在 geo 里是可以配置 index的 。如果只有一个 ，默认是0即可
  geoIndex:0,
    // 需要配置类型为 map 。
  type:'map'
}],

配置 visualMap 。这是必须的一步，否则颜色不会显示。

是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。

visualMap:{
    // 配置 visaulMap 后 ，show 默认为 true 。设置为false ，则此组件不显示。
    show:true,
    // 设置最小值
    min:0,
    // 设置最大值
    max:100,
    // 配置从最小到最大的颜色变化 。不配置会自动设置
    inRange:{
      color:['white','pink','red']  // 可配置多个颜色
    },
    calculable:true // 出现滑块 , 不设置为 false 。但原组件一样具有筛选功能。
}

在这里插入图片描述

案例

<template>
  <div>
    <div id="con" :style="{ width: '1000px', height: '800px' }"></div>
  </div>
</template>

<script>
import { init, registerMap } from "echarts";
import china from "../../jsondata/china.json";
// import axios from 'axios'
export default {
  name: "echarts_map",
  data(){
    return {
      temdata:[]
    }
  },
  mounted() {
         // 获取数据
   china.features.forEach(v=>{
      let obj = {
        name:v.properties.name,
        value:(Math.random()*(100)).toFixed(2)
      }
      this.temdata.push(obj)
    })
       // 初始化图表
    this.initChart();
  },
  methods: {
    async initChart() {
      let Chart = init(document.querySelector("#con"));
      await registerMap("china", china);
      let option = {
        geo:{
            type:'map',
            map:'china',
            label:{
                show:true
            }
        },
          series:[{
            data:this.temdata,
            geoIndex:0,
            type:'map'
          }],
      visualMap:{
        show:true,
        min:0,
        max:100,
        inRange:{
          color:['white','red']
        }
      }
      };
      Chart.setOption(option);
    },
  },
};
</script>

在这里插入图片描述

结合其他图

地图可以结合其他图显示。

结合散点图

一个容器是可以有多个图的。这里我们给地图增加一个散点图，其实就是增加一个 type 为散点图的系列对象。

但我们之前的散点图是在坐标轴的，而地图是没有坐标轴的。因此我们需要使用经纬度去标记点的位置。

步骤(基于地图已经配置好)

准备数据，数据使用经纬度标记点的位置，经纬度在地图的 json 数据里可以获得。

let opintData = [
    [116.405285, 39.904989],
    [117.190182, 39.125596],
    //....
]

series 里增加一个对象，其 type 为 scatter 或者是 effecrScatter,并设置 data。
同时配置coordinateSysem为 geo , 即设置其位置参考的是经纬度，默认是 xoy 坐标轴

series:[
    {
        type:'effectScatter',
        data:opintData,
        coordinateSystem:'geo',
    }
]

在这里插入图片描述

结合lines

路径图

用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化

它的 coordinateSystem 默认是 geo 。这里我们配合地图，呈现如下图的效果。

在这里插入图片描述

它的 series 系列的 type 是 lines 。不需要 xoy 轴。因此它需要注意的也是数据的处理。

series:[
    {
        type:'lines',
        data: [  // 值为对象数组 ，每一个对象就是一条路径。
          {
            coords: [
              [116.405285, 39.904989],  // 起点
              [129.190182, 38.125596],   // 终点 ，
              // 支持多个点，如果需要
            ],
              // 配置路径样式
            lineStyle:{
              color:'red',
              width:1,
              opacity:1
            },
              // 为路径的终点增加一个文本标签。
            label:{
              show:true,
              formatter:'北京市XXX公司',
              fontSize:16,
              borderRadius:4,
              padding:[10,15],
              // verticalAlign :'middle',
              backgroundColor:'orange'
            }
          },
        ],
    }
]

雷达图

雷达图一般是对某种物体各性能进行测试后对数据的一种可视化处理。能显而易见的看出优点与不足。

在这里插入图片描述

基本使用

步骤

准备盒子，导入 ecahrt相关API ，等（以上有的，不详细说明）
配置 radar.indicator : 作用是配置出一个框架。如上图的五边形以及文字。

// 它的值是一个数组，数组的元素是对象 。一个对象对应一个角。对象里有 name 和 max 属性。分别是显示的文字和最大值
option = {
    radar:{
        indicator:[
            {
            name:'听力',
            max:'100'
            },{
                // ....
            }
        ]
    }
}

配置 series 。 type 为 radar 。 data 为对象数组。

series: [
  {
    type: "radar",
    data: [
      {
        name: "英语",
        value: ["80", "90", "77", "65", "100"],  // 与 indicator 里的对象配置顺序一一匹配。
      },
        {
            // 可有多个
        }
    ],
  },
],

简单案例

<template>
  <div>
    <div
      class="con"
      :style="{
        width: '350px',
        height: '300px',
      }"
    ></div>
  </div>
</template>

<script>
import { init } from "echarts";
export default {
  name: "ecahrts_radar",
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let chart = init(document.querySelector(".con"));
      let option = {
        radar: {
          indicator: [
            {
              name: "听力",
              max: "100",
            },
            {
              name: "流畅",
              max: "100",
            },
            {
              name: "发音",
              max: "100",
            },
            {
              name: "词汇",
              max: "100",
            },
            {
              name: "凑数量",
              max: "100",
            },
          ],
        },
        series: [
          {
            type: "radar",
            data: [
              {
                name: "英语",
                value: ["80", "90", "77", "65", "100"],
              },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>

常用配置

label

文本标签。设置为 true , 可以显示数据，也

series:[{
    // ...
    label:{
        show:true
        formatter:'显示内容'  // 默认是 对应的 value
        position // 等样式设置
     }
}]

在这里插入图片描述

areaStyle

区域填充样式 ,可以对某部分数据包围的部分用其他颜色填充起来。可以设置颜色，透明度等。

series:[{
    // ...
    areaStyle:{  // 即使是空对象，也会有默认的颜色填充
        color:'orange' ,
        opacity:0.6
    }
}]

在这里插入图片描述

shape

雷达图不一定就是方方正正的，也可以是圆的。我们只要在 label 对象里增加配置 shape 即可修改形状

        radar: {
          shape: "circle",  // 可以是 circle 圆 ，或者是 polygon 多边形（默认）
      //    indicator: ...
        },

在这里插入图片描述

仪表图

仪表图是可以说是最简单配置的图了。

基本使用

步骤

基本的盒子准备，引入echarts的 API 等
配置 series 的对象元素的 type 为 gauge 。data 配置指针

series: [
  {
    name:'可做单位或数据名称' // 比如体重 ，或者 km/h ,也可以没有
    type: "gauge",
    data: [  // 值是一个数组，数组的元素是对象，一个对象就是一个指针
      {
        value: "92",   // 设置指针当前指向的值 ， 仪表的最大数据和刻度值会自动调整
      },
    ],
  },
],

在这里插入图片描述

常用配置

itemStyle

配置指针的颜色，在配置指针的对象里。每个指针可以配置不同的颜色和边框颜色，阴影等样式。

data:[{
    value:'92',
    itemStyle:{
        color:'pink'
    }
}]

min/max

仪表的刻度值会自动设置，也可以手动设置。

series: [
  {
  	// .....
    min: "50",
    max: "150",
  },
],

样式

颜色主题（theme）

最简单的更改全局样式的方式，是直接采用颜色主题（theme）。

内置主题颜色

ECharts5 除了一贯的默认主题 ( light ) 外，还内置了'dark'主题。

init API 还可以传入第二个参数，更换颜色主题，默认是 light。如果需要改为 dark ,可传入 dark。

let myChart = init(document.querySelector('#con'),'dark')

自定义主题颜色

主题编辑器

在主题编辑器里，我们可以编辑主题，然后下载作为本地文件。再在项目里使用。

具体步骤官方文档写的很清楚。

配置好自己的字体后，设置一个主题名称，当然也可以使用默认的

在这里插入图片描述

然后点击下载主题，有两种版本都可以下载使用，使用步骤官方文档也写的很清楚

在这里插入图片描述

引入方法

// es6
import  '../assets/mytheme'
	// 使用
  let chart = init(document.querySelector("#con"),'mytheme');

// CDN 
<script scr='url/mytheme.js'></script>

如果修改了文件名，又忘记主题名称了 可以打开下载的主题文件，找如下代码

echarts.registerTheme('mytheme',...)  // 第一个参数便是主题名称。

调试色盘

无论是内置的主题，还是我们自己设置的主题。都有一个调色盘。

如：

在这里插入图片描述

如果没有特别的设置，图表会从调色盘里取出颜色。

如我们常常没有设置颜色，但条形柱有颜色，饼图也有颜色。

全局调色盘

除了主题自带的调色盘，我们也可以设置一个全局调色盘，全局调色盘会覆盖主题调色盘。

全局调色盘直接设置在 option 下，键为 color ,值为数组

option:{
    color:['#ff0000','blue','green']  // 支持如十六进制表示的颜色
}

如果颜色的种类少了，就可能出现本该不同颜色的部分出现相同颜色，如 color:['red','blue']

在这里插入图片描述

局部调色盘

局部调色盘设置在系列里。专门为某个图服务。

series:[{
    type:'pie',
    color:['red','yellow']
}]

直接样式设置（xxxStyle)

调色盘是提供颜色，但渲染时，某部分是什么颜色是不确定的。或者说是可能变化的。

因此我们可以使用相关的配置，直接设置其颜色。

直接的样式设置是比较常用设置方式。option 中，很多地方可以设置 itemStyle,textStyle,lineStyle,areaStyle,label等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。

itemStyle

这在很多图都可以使用，它可以设置条形图的条形柱的颜色，也可以控制饼图每个部分的颜色，在散点图也使用到它，等等。

series:[{
    //...
    itemStyle:{
        color:'red'   // 控制全部 ,支持回调函数 color：(res)=>{}
    }
}]

也有的图，支持写在 data 里，控制某部分数据的颜色，如饼图

series:[{
	type:'pie',
	data:[{
		name: "睡觉",
        value: "7",
        
        // 设置颜色
        itemStyle: {
          color: "green",
        },
	}]
}]

除控制颜色外， itemStyle 还有其他样式可以控制

// 部分
borderColor: '#000' ,   // 边框颜色
borderWidth: 0 ,	   // 边框宽度
borderType: 'solid' ,	// 边框类型
borderDashOffset: 0 ,   // 用于设置虚线的偏移量
borderCap: butt ,		// 指定线段末端的绘制方式
opacity: 1 ,			// 透明度
 ......

textStyle

textStyle 在 title 里配置。我们一般使用的就是配置颜色，大小，位置而已。因此使用方法其实与其他Style的配置大同小异。在通用配置里有大概说明一些。便不再赘述了。

lineStyle

在折线图和路径图这类跟线有关的图里可以使用。

areaStyle

区域填充，这个配置我们在折线图，雷达图里就使用过了。但能使用它的图不止这两种。但它的配置也比较简单。

label

文本标签，这我们在上面的例子多次使用到，这类也不赘述了。

常亮与高亮

常亮即一般状态下时它的颜色，可以是直接样式配置，也可以是调色盘配置的。

本节主要讨论的是高亮。

高亮也就是某部分数据对应的图被选择时呈现的颜色（如鼠标悬浮，或点击），一般是悬浮。

高亮的样式配置通过 emphasis 。

以饼图作为例子，其他类似。

series:[{
    //...
    emphasis:{
        scale:true  // 是否放大，
        scaleSize:2 // 放大倍数
        focus:'none' // 是否淡化其他图形
        // 如 lineStyle ,itemStyle ,label 等，有的也是可以放在 emphasis 里的。写法不变，位置变了而言。配置高亮时的样式
        itemStyle：{
        color:'red'
    }
}]

颜色渐变和纹理填充

color的值支持使用 RGB 表示纯颜色，比如 'rgb(128, 128, 128)'，也可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'。

color 的值也可以是一个回调函数。

除此外， color 的值还可以是一个对象。用来配置颜色的渐变

// 线性渐变
color:{
    type:'linear'  // 线性渐变
    
    x: ,
    y: ,
    x2:,
    y2:,  // （x,y） 表示一个点，（x2,y2） 表示另外一个点，又 x,y 指向 x2,y2 。表示方向
        
    colorStops:[{
        offset:0,  // 0% 处的颜色
        color:''   
    },{
        offset：0.3  // 30% 处的颜色
        color:''
    },{
       // ....
    }]
}

// 径向渐变
{
  type: 'radial',
  x: 0.5,
  y: 0.5,
  r: 0.5,  // （x,y） 为原点 ，r 为半径
      
  colorStops: [{
      offset: 0, color: 'red' // 0% 处的颜色
  }, {
      offset: 1, color: 'blue' // 100% 处的颜色
  }],
}

color 更神奇的是支持纹理填充，这相当于是 backgroundImage 了。

// 纹理填充
{
  image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
  repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

案例

<template>
  <div>
    <div class="con" :style="{ width: '450px', height: '300px' }"></div>
  </div>
</template>

<script>
import { init } from "echarts";
export default {
  name: "ecahrts_pie",
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
        // 加载作为纹理的图片资源
      let imgsrc = "https://img0.baidu.com/it/u=1884420695,412160940&fm=26&fmt=auto";
      let piePatternImg = new Image();
      piePatternImg.src = imgsrc;

      let chart = init(document.querySelector(".con"));
      let option = {
        color: ["pink", "lightblue"],
        title: {
          text: "pie",
          left: "center",
        },
        series: [
          {
            type: "pie",
            data: [
              {
                name: "睡觉",
                value: "7",
                itemStyle: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "red", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "blue", // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
              },
              {
                name: "打码",
                value: "9",
                itemStyle: {
                  color: {
                    type: "radial",
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#46bbf2", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#aa47d7", // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
              },
              {
                name: "做白日梦",
                value: "5",
                itemStyle: {
                  color: {
                    image: piePatternImg,
                    repeat: "repeat",
                  },
                },
              },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>

在这里插入图片描述

容器及容器大小

容器是存放图表的。在上面的使用中，我们仅使用了一种方法来设置宽高。

在 HTML 中定义有宽度和高度的父容器（推荐）

通常来说，需要在 HTML 中先定义一个 <div> 节点，并且通过 CSS 使得该节点具有宽度和高度。使用这种方法，必须要保证在 init 时容器已经有了宽高。

<!-- 指定宽高 -->
<div class="con" :style="{ width: '450px', height: '300px' }"></div>
<!-- 指定高 ，宽为游览器可视界面的宽 -->
<div class="con" :style="{  height: '300px' }"></div>

指定图表的大小

如果图表容器不存在宽度和高度，或者，你希望图表宽度和高度不等于容器大小，也可以在初始化的时候指定大小。

<div id="con"></div>

  var myChart = init(document.getElementById('con'), null, {
    width: 600,
    height: 400
  });

这利用了init 的第三个参数，是一个指定图表宽高的对象。

响应容器大小的变化

当指定了宽高后，图表的大小就固定了。如果我们改变游览器窗口的小，就会发现图表的大小是不会变化的。

即使没有把宽度设置死。容器宽度自适应了，图表却不会自适应，部分会被遮挡。如图所示：

在这里插入图片描述

如果我们希望图表能够自适应，可以使用 init返回的图表实例上的 resize() 方法。

var myChart = init(document.getElementById('con'));
  window.onresize = function() {  // 监听窗口大小事件
    myChart.resize();  // 调用 resize方法
 };

// 也可以如此
window.onresize = myCahrts.resize

// 或使用事件监听器
 window.addEventListener("resize", myChart.resize);

resize 支持一个对象参数，相当于 init的第三个参数，让图表的实际宽高不取决于容器。

myChart.resize({
  width: 800,
  height: 400
});

但要注意的是，图表的大小会受到容器的限制。一旦图表的宽高写死，便无法自适应改变了

如以下几种情况直接调用 resize是无法改变图表宽高的

// 1 .容器宽高限制死
    <div
      id="con"
      :style="{ width: '600px', height: '400px'}"
    ></div>

// 2. 图表宽高限制死
  var myChart = init(document.getElementById('con'), null, {
    width: 600,
    height: 400
  });

但也不是无解

我们可以获取游览器的宽高，从而修改容器的宽高，在重新 setOption 即可。如果容器不设置 overflow为hidden ，那么把动态获取的宽高作为 resize 的参数也可以。

动画

加载动画

图表很多数据是我们从服务器请求回来的。如果网络不太好，或者数据多的时候便会出现空白情况。

因此 echarts 内置了加载动画。

myChart.showLoading()  // 显示动画

myChart.hideLoading()  // 隐藏动画

// myChart是 init 返回的图表实例

我们可以在加载数据时开启动画，等数据回来后再隐藏加载动画。

animation

option 内的动画配置。

option 默认是开启动画效果的。如加载出数据后，或更改数据时。

option = {
	animation： true   // 是否开启动画效果 ，默认为 true
    
    animationDuration : 100  // 动画时长 ，单位毫秒
    // anmimation 的值可以是函数 ，函数的参数是每个部分图像的编号。视实际而定
    
    
    animationEasing:'linear'  //  缓动动画
    // 更多效果参考 https://echarts.apache.org/examples/zh/editor.html?c=line-easing
	
    animationThreshold:8   // 最大动画量
    // 就拿柱状图来说，每个柱，或标记点标记线都会有独立的动画。如果这些独立的动画超过这里设置的数量，那么全部动画效果都会取消。相当于 animation 为 false。
    
    // 还有一些动画控制的配置，可参考官方文档。
}

API

ecahrts 提供的 API 可分为4类。

ecahrts : 全局 echarts 对象
echartsInstance : ecahrts 实例，即 init 返回的对象
action : ECharts 中支持的图表行为
event ： ECharts 中的事件

echarts

全局 echarts 对象，在 script 标签引入 echarts.js 文件后获得，或者通过导入模块获得。

init

创建一个 ECharts 实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例。

init(容器节点 ，主题 ，图表宽高)  
// 三个参数中，仅第一个为必传

connect

connect 是 ecarhts 暴露的一个 API ，它可以关联多个图表。

因为一个容器注册一个图表实例。如果需要显示多个图表且不能合并，那么它们会变成独立的小块。

如果我们希望点击下载成图片，或者刷新图表时希望都同时操作，那么就会有些麻烦。而 connect 可以解决这个问题。

import {connect} from 'ecahrts'

// 分别设置每个实例的 group id ，需要关联的图表设置同样的 id
chart1.group = 'group1';
chart2.group = 'group1';
connect('group1');

// 或者可以直接传入需要联动的实例数组
connect([chart1, chart2]);

disconnect

解除 connect 的关联。参数是关联的 group id。

import {disconnect} from 'ecahrts'
disconnect(groupid)

dispose

dispose 是销毁实例。它会把图表销毁且销毁实例。此时重新设置 option 是失效的。与另外一个 clear 的 API 不同。

import {dispose} from 'ecahrts'

dispose(myEchart)  // 参数是图标实例，或者是容器节点

use

使用组件，配合新的按需引入的接口使用。需要在 init 前使用。

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import {
    BarChart
} from 'echarts/charts';
// 引入直角坐标系组件，组件后缀都为 Component
import {
    GridComponent
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
    CanvasRenderer
} from 'echarts/renderers';

// 注册必须的组件
echarts.use(
    [GridComponent, BarChart, CanvasRenderer]
);

registerMap

注册地图。在获取到地图的 SJON数据后将地图全局注册。

import {registerMap} from 'ecahrts'
registerMap('mapName',mapJsonValue)

echartsInstance

图标实例上的 API

group

图表的分组，用于联动（connect）

let myChart = init(document.querySelector(".con"))

mtChart.group = 'String'  // group id 。 值为字符串，用于联动

setOption

chart.setOption(option, notMerge, lazyUpdate);

option ：图表的配置
notMerge : 值为布尔值，默认 false 。即新的 option 与旧的 option 是合并。如果设置为 ture , 新option 会完全代替旧的 option.
lazyUpdate : 选。在设置完 option 后是否不立即更新图表，默认为 false，即同步立即更新。如果为 true，则会在下一个 animation frame 中，才更新图表

myChart.setOption(option)

setOption 的参数还有很大写法。但常用的其实就 option .

resize

在容器及容器大小部分已记录。

clear

清除当前图表，但清除后实例还在，还能重新设置 option 。

图表实例也有 dispose 方法，直接销毁实例，不需要参数。

action

ECharts 中支持的图表行为，通过 dispatchAction触发。可模拟手动触发的一些事件。

dispatchAction 是图表实例上的方法。放在这里是因为它主要为 action 服务。

图表行为就是点击图标某部分让它高亮，悬浮高亮，或者切换图表类型，缩放，等等行为

以下是一个例子，更多例子查看文档即可。使用方法类似。

// 如果要高亮系列：
dispatchAction({
    // 指定类型
    type: 'highlight',

    // 用 index 或 id 或 name 来指定系列    
    seriesIndex:0      //  表示 series 里的第一个图表
    // 也可以使用数组指定多个系列。
   // seriesId?: string | string[],
   // seriesName?: string | string[],

    // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
    dataIndex?: number | number[],
               
    // 可选，数据项名称，在有 dataIndex 的时候忽略
    name?: string | string[],
});

event

event事件是当某些事件触发后执行的函数。而 action 是某些图表行为发生后图表发生相应的样式的变化。

event 包括部分DOM 的事件，如点击 click , 鼠标进入 mouseover 等鼠标事件。

也有一些 ecahrts 的自定义事件，如高亮事件 hightligh , 在数据选中状态发生变化时触发的事件等等。

这些事件通过实例的on 方法监听，相当于事件监听器。on 方法也是图表实例的。

myChart.on('事件类型',回调函数)
 // 事件类型 ，click ， hightlight ,selectchange 等等
 // 回调函数 ，会接收一个参数 ，参数会有事件的一些数据

off 方法可以取消对事件的监听。

myChart.off('事件类型',回调函数)
// 事件类型是取消实例上的哪种事件监听
// 回调函数不是必传的 ，如果没有传会取消使用该类型上绑定的事件。

收起

数据可视化——用Excel巧妙绘制图表及在论文中的排版技巧

一、用Excel绘制饼图

二、用Excel绘制柱形(状)图和条形图

三、用Excel绘制直方图

四、用Excel绘制折线图

五、用Excel绘制散点图

六、用Excel绘制箱线图

七、总结

ECharts---一个非常炫酷好用的图表库。发现自己写的好详细。怪不得当时弄那么久。

ECharts_study

什么是 Echarts

初体验

安装

npm

CDN

或者官方提供的特别定制

导入项目

全部导入

部分导入

基本准备（也是其他图表的通用步骤）

准备步骤

option 对象

条形图

图表配置

简单案例

其他效果

barWidth

markPoint

markLine

label

多效果使用案例

通用配置

title

tooltip

toolbox

legend

折线图

基本使用

其他效果

xAxis 、 yAxis

lineStyle

散点图

基本使用

其他效果

symbolSize

itemStyle

effectScatter

xoy坐标轴的通用配置

grid

axis

dataZoom

饼图

简单案例

常见效果

label

radius

roseType

selectedMode

地图

基本使用

简述步骤

简单案例

常见配置

roam

label

zoom

center

常见效果

设置颜色

案例

结合其他图

结合散点图

结合lines

雷达图

基本使用

步骤

简单案例

常用配置

label

areaStyle

地表最全：60种数据可视化图表使用场景大全！

Excel中如何使用不连贯的数据来创建图表(C#)