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

最新推荐文章于 2024-04-29 23:46:47 发布

无糖的酸奶

最新推荐文章于 2024-04-29 23:46:47 发布

阅读量3.1k

点赞数 5

分类专栏： Echarts 文章标签：前端 echarts 图表

本文链接：https://blog.csdn.net/NiHoAjy/article/details/121480141

版权

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 的系列里使用

最低0.47元/天解锁文章

无糖的酸奶

关注

5
点赞
踩
29

收藏

觉得还不错? 一键收藏
打赏
0
评论
ECharts---一个非常炫酷好用的图表库。发现自己写的好详细。怪不得当时弄那么久。

ECharts_study对于渲染可视化图标的库有许多，因为项目需要，我学习了 Echarts 。完整叫 Apache ECharts很多图在基本的准备部分不会详细说明，因此初学一定要看基本准备的部分另外，图表真的很多，官网什么是 EchartsECharts，一个使用 JavaScript 实现的开源可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观
复制链接

扫一扫