Echarts常用配置项(详细入门)

已于 2024-01-29 18:09:56 修改
阅读量4.8k 收藏 54
点赞数 16
分类专栏： echarts 文章标签： echarts 前端 javascript vue.js
于 2023-02-12 17:08:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45796592/article/details/128990535
版权

目录

前言福利：推荐几个EChart常用的社区网站

第一章、如何使用Echarts

1.1 使用Echarts五步走

1.2  了解版块的几个基本参数

1.3 几个常用图形的参数

1.3.1 柱状图

1.3.2 折线图

1.3.3 散点图

1.3.4 饼图

1.3.5 地图

1.3.6 雷达图

1.3.7 仪表图

1.4 Echarts使用

前言福利：推荐几个EChart常用的社区网站

PPChart - 让图表更简单

echarts图表集

ChartLib

makeapie echarts社区图表可视化案例

chart.top - 让图表更简单-echarts图集demo

Echarts官方文档：快速上手 - Handbook - Apache ECharts

第一章、如何使用Echarts

1.1 使用Echarts五步走

1.2  了解版块的几个基本参数

title标题设置
tooltip工具提示

xAxis

x轴

yAxis

y轴
series图表系列信息

toolbox

工具箱按钮
legend图例组件(图例可以帮助我们对图表进行筛选)
color线条颜色
grid是否显示绘图网格

title标题常用参数：

参数含义

textStyle

标题文字样式设置（是个对象，里面能设置文字的具体样式，颜色、字体大小……）

borderWidth

标题边框宽度（number数据类型，写数字即可）

borderColor

标题边框颜色

borderRadius

边框圆角（统一设置四个时是数字，分开设置用数组）

top/right/bottom/left

标题距离（上/右/下/左）边的距离（number数据类型，写数字即可）

tooltip工具提示：

参数含义

trigger

工具提示的类型（item/axis/none）

triggerOn

触发时机(click/mouseOver……)

formatter

提示框浮层内容格式器

xAxis/yAxis x/y轴：

参数含义

type

坐标轴类型(value数轴/category类目轴/time时间轴)
datax/y轴的数据（数组，需要一一对应）
positionx/y轴的位置

series 图表系列信息（[{},{},{}……]可以写多个对象，代表多个图像）：

https://echarts.apache.org/zh/option.html#series

toolbox 工具箱按钮：feature：{}中的参数

参数含义

saveAsImage

导出图片（{}）

dataView

数据视图（{}）

restore

重置（{}）

dataZoom

区域缩放（{}）

magicType

动态图表类型的切换（{type: ['bar', 'line',……] }）

legend 图例组件：

参数含义
data图例的数据数组(与series个数对应)

grid 是否显示绘图网格：

参数含义

show

是否显示（flase/true）
borderWidth网格线边框宽度
borderColor网格线边框颜色
top/right/bottom/left网格线离容器上/右/下/左侧的距离
width/height网格线的宽高

​

1.3 几个常用图形的参数

1.3.1 柱状图

基础柱状图 - 柱状图 - 常用图表类型 - 应用篇 - Handbook - Apache ECharts

常用参数，具体在该网址上查找：

参数含义
seriess[].type图形信息描述、类型
xAxisx轴
yAxisy轴
markPoint

标记点（最大值/最小值……）

arkLine

标记线（平均值之类的）

label

柱状图上的文字设置

barWidth

柱的宽度

 例子：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    //1. ECharts最基本的代码结构
    //2. x轴数据:['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    //3. y轴数据:[88, 92, 63, 77, 94, 80, 72, 86]
    //4. 将type的值设置为bar
    var mCharts = echarts.init(document.querySelector("div")) // 初始化echarts实例对象
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] // 准备x轴数据
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86] // 为x轴每一个元素指明数据
    var option = {
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: xDataArr
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },{
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 60, // 旋转角度
            position: 'top' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
          data: yDataArr
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

1.3.2 折线图

基础折线图 - 折线图 - 常用图表类型 - 应用篇 - Handbook - Apache ECharts

常用参数，具体在该网址上查找：

参数含义
seriess[].type图形信息描述、类型
xAxisx轴
yAxisy轴
markPoint

标记点

markLine

标记线

markArea

标记区域

smooth

是否为平滑线

lineStyle

线的样式设置

areaStyle

线和x轴形成的区域设置

boundaryGap

x轴的第1个元素是否与y轴有距离

scale

堆叠图的设置(all)

 例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height: 400px"></div>
  <script>
    //1. ECharts最基本的代码结构
    //2. x轴数据:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    //3. y轴数据:[3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
    //4. 将type的值设置为line
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
    var option = {
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '康师傅',
          data: yDataArr,
          type: 'line',
          markPoint: { // 标记点
            data: [
              {
                type: 'max'
              },
              {
                type: 'min'
              }
            ]
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average'
              }
            ]
          },
          markArea: { // 标记区域
            data: [
              [
                {
                  xAxis: '1月'
                },
                {
                  xAxis: '2月'
                }
              ],
              [
                {
                  xAxis: '7月'
                },
                {
                  xAxis: '8月'
                }
              ]
            ]
          },
          smooth: true, // 是否为平滑线
          lineStyle: { // 线的样式设置
            color: 'green',
            type: 'solid' // dashed dotted solid
          },
          areaStyle: { // 线和x轴形成的区域设置
            color: 'pink'
          }
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>
</html>

1.3.3 散点图

基础散点图 - 散点图 - 常用图表类型 - 应用篇 - Handbook - Apache ECharts

常用参数，具体在该网址上查找：

参数含义
seriess[].type图形信息描述、类型
xAxisx轴
yAxisy轴
symbolsize

控制散点的大小

itenStyle

控制散点的样式

showEffectOn

出现涟漪动画的时机 render emphasis

rippleEffect

涟漪动画时, 散点的缩放比例

scale缩放比例

1.3.4 饼图

基础饼图 - 饼图 - 常用图表类型 - 应用篇 - Handbook - Apache ECharts

常用参数，具体在该网址上查找：

参数含义
seriess[].type图形信息描述、类型
label

饼图文字的显示

radius

饼图的半径

roseType

南丁格尔图 饼图的每一个区域的半径是不同的（'radius'）

selectedMode

选中模式是否支持多个选中（'false',‘single’,‘multiple’,）

selectedOffset选中的效果,能够将选中的区域偏离圆点偏离量

例子：
 

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    //1. ECharts最基本的代码结构
    //2. 准备数据[{name:???, value:??? },{}]
    //   淘宝: 11231  京东: 22673  唯品会: 6123  1号店: 8989   聚美优品: 6700
    //3. 将type的值设置为pie
    var mCharts = echarts.init(document.querySelector("div"))
    // pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有name和value
    var pieData = [
      {
        name: '淘宝',
        value: 11231
      },
      {
        name: '京东',
        value: 22673
      },
      {
        name: '唯品会',
        value: 6123
      },
      {
        name: '1号店',
        value: 8989
      },
      {
        name: '聚美优品',
        value: 6700
      }
    ]
    var option = {
      series: [
        {
          type: 'pie',
          data: pieData,
          label: { // 饼图文字的显示
            show: true, // 显示文字
            //formatter: 'hehe' // 决定文字显示的内容
            formatter: function(arg){
              // console.log(arg)
              return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
            }
          },
          // radius: 20 // 饼图的半径
          // radius: '20%' // 百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
          // radius: ['50%', '75%'] // 第0个元素代表的是內圆的半径 第1个元素外圆的半径
          roseType: 'radius', // 南丁格尔图 饼图的每一个区域的半径是不同的
          // selectedMode: 'single' // 选中的效果,能够将选中的区域偏离圆点一小段距离
          selectedMode: 'multiple',
          selectedOffset: 30
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

1.3.5 地图

区别：

  • ECharts最基本的代码结构
  • 准备中国地图的矢量数据
  • 使用Ajax获取矢量地图数据
  • 在Ajax的回调函数中注册地图矢量数据 echarts.registerMap('chinaMap', 矢量地图数据)
  • 配置geo的type为'map', map为'chinaMap'

常用参数，具体在该网址上查找：

参数含义
seriess[].type图形信息描述、类型
geo配置项
map配置为map
roam

设置允许缩放以及拖动的效果

zoom

设置初始化的缩放比例

center

设置地图中心点的坐标

label是否展示标签
geoIndex

配置散点的坐标数据

coordinateSystem

指明散点使用的坐标系统

需要导入china.js文件，具体实现看下面这个网址：

JK18 Echarts: 将一些最常用的Echarts技术都放在这个文件里面

1.3.6 雷达图

常用参数，具体在该网址上查找：

参数含义
seriess[].type图形信息描述、类型
radar配置雷达图行信息
indicator

配置各个维度的最大值

label

设置标签的样式

areaStyle

将每一个产品的雷达图形成阴影的面积

shape

配置雷达图最外层的图形

 例子：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    //1. ECharts最基本的代码结构
    //2. 定义各个维度的最大值, 通过radar属性配置
    //   易用性,功能,拍照,跑分,续航, 每个维度的最大值都是100
    //3. 准备产品数据, 设置给series下的data
    //   华为手机1: 80, 90, 80, 82, 90
    //   中兴手机1: 70, 82, 75, 70, 78
    //4. 将type的值设置为radar
    var mCharts = echarts.init(document.querySelector("div"))
    // 各个维度的最大值
    var dataMax = [
      {
        name: '易用性',
        max: 100
      },
      {
        name: '功能',
        max: 100
      },
      {
        name: '拍照',
        max: 100
      },
      {
        name: '跑分',
        max: 100
      },
      {
        name: '续航',
        max: 100
      }
    ]
    var option = {
      radar: { 
        indicator: dataMax, // 配置各个维度的最大值
        shape: 'polygon' // 配置雷达图最外层的图形 circle polygon
      },
      series: [
        {
          type: 'radar', // radar 此图表时一个雷达图
          label: { // 设置标签的样式
            show: true // 显示数值
          },
          areaStyle: {}, // 将每一个产品的雷达图形成阴影的面积
          data: [
            {
              name: '华为手机1',
              value: [80, 90, 80, 82, 90]
            },
            {
              name: '中兴手机1',
              value: [70, 82, 75, 70, 78]
            }
          ]
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

1.3.7 仪表图

常用参数，具体在该网址上查找：

参数含义
seriess[].type图形信息描述、类型
min max

min max 控制仪表盘数值范围

itemStyle

指针的样式

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>

  <script>
    //1. ECharts最基本的代码结构
    //2. 准备数据, 设置给series下的data
    //3. 将type的值设置为gauge
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {
      series: [
        {
          type: 'gauge',
          data: [
            {
              value: 97,
              itemStyle: { // 指针的样式
                color: 'pink' // 指针的颜色
              }
            }, // 每一个对象就代表一个指针
            {
              value: 85,
              itemStyle: {
                color: 'green'
              }
            }
          ],
          min: 50 // min max 控制仪表盘数值范围
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

1.4 Echarts使用

使用Echarts最重要的一点就是能看懂里面代码的参数所代表的意思，然后能根据别人给的代码，改成自己想要的图片，这里提供几个我常用的网址：

echarts图表集

PPChart - 让图表更简单

Examples - Apache ECharts

 还有一个点就是当项目中需要引入中国地图/世界地图的时候，我们使用的时Echarts4的版本（我记得版本4才有china.js文件）

引入到Vue项目中的步骤：

  • 安装Echarts
npm install echarts@(版本号) --save
  • 按需引入
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  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
]);

export default echarts;
  • 按需引入的名称

  •  引入到main.js文件中
// 引入echarts
import echarts from "./echarts/echarts";
 
// 挂载到vue实例中
Vue.prototype.$echarts = echarts
 
调用的时候就是 ：  this.$echarts
  • 在Vue组件下使用就是
<template>
  <div>
    <div id="main"></div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 基本柱形图
    change() {
      const chartBox = this.$echarts.init(document.getElementById("main"));
      const option = {
        xAxis: {
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            data: [23, 24, 18, 25, 27, 28, 25],
          },
        ],
      };
      chartBox.setOption(option);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
      });
    },
  },
  mounted() {
    this.change();
  },
};
</script>
 
<style lang="less" scoped>
#main {
  min-width: 31.25rem;
  min-height: 31.25rem;
}
</style>

❆VE❆
关注
  • 16
    点赞
  • 踩
  • 54
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts配置项详细解释.pdf
07-13
apache echarts配置项详细解释
小白也能轻松上手的ECharts 配置手册
爱蹦跶的全栈大A阿
12-27 1086
这样,我们就基本介绍完了 ECharts 的常用配置项，后续还会在此文章中持续更新更多配置。从基础的大小设置和标题组件,到复杂的坐标轴控制和数据视觉映射,ECharts 为数据可视化提供了强大而丰富的配置能力。在继续深入学习 ECharts 时,不要被琳琅满目的配置项吓到。好的绘图作品需要细致的配置结合创意,但初学者完全可以从简单的配置入手,逐步掌握。将数据变成直观的可视化表达,既考验技巧,也是一种乐趣。ECharts 还在持续更新,未来必将支持更多炫酷的配置和交互。
echarts各项配置（详细版）
王声声的博客
06-08 5432
Echarts的各种配置。
ECharts 简要介绍及简单实例代码
最新发布
leyang0910的博客
03-09 599
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。ECharts 提供了丰富的图表类型和交互能力，使用户能够通过简单的配置生成各种各样的图表，包括但不限于折线图、柱状图、散点图、饼图、雷达图、地图等。ECharts 遵循 Apache-2.0 开源协议，免费商用。ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。
Echarts-配置项手册.zip
10-24
百度echart4.x版本配置手册离线版本。用于数据可视化，便于数据分析分析展示。PDF格式。
Echarts-4.0.4官方文档-配置项手册
04-07
最新版的Echarts-4.0.4配置项手册，PDF格式，官网不提供下载。
ECHART基本使用，折线图，柱状图，散点图，饼图，盒形图5分钟上手
知其白，守其黑；和其光，同其尘。
11-24 1万+
Echarts 是由百度团队打造的纯 JavaScript 的图表库，官网下载路径如下：http://echarts.baidu.com/download.htmlEcharts的特性：丰富的图表类型： 常用的有折线图，柱状图，散点图，饼图，盒形图，用于地理数据可视化的地图，热力图，线图等多个坐标系的支持 直角坐标系（catesian，同 grid）、极坐标系（polar）、地理坐标系（geo） 使
echarts入门教程（超级详细带案例）
热门推荐
m0_55734030的博客
10-27 9万+
1.echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 2.学习一项技术的关键，还是需要多读官方文档，官网链接Apache ECharts,与之类似的图表库还有D3，HeightCharts。 3.echarts的下载 （1）从 npm 获取 （2）从 CDN 获取 （3）从 GitHub 获取 （2）color调色盘 在 option 中设
Echart的使用初体验，Echarts的基本使用及语法格式，简单图表绘制和使用及图例添加【学习笔记】
m0_63622279的博客
03-11 1万+
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。ECharts 遵循 Apache-2.0 开源协议，免费商用。ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。
【图表】echart指南
指错||纠正||建议||水评+点赞&&评论&&关注&&转发，在这里你大概率会有所收获
06-23 4617
ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 可以流畅的运行在 PC 和移动
echart的基本使用方法
weixin_69797846的博客
07-26 5189
echart基本配置方法
Echarts3配置项手册离线网页版
02-06
完整拷贝官网配置项页面,彻底离线查询各个配置项.........
ECharts3 配置项手册part5
03-02
根据百度ECharts3官方文档整理而成，便于离线使用和查阅，由于上传大小的限制，该手册被分成了5部分。
ECharts3 配置项手册part1
03-02
根据百度ECharts3官方文档整理而成，便于离线使用和查阅，由于上传大小的限制，该手册被分成了5部分。
常用 echarts 的配置
05-26
常用 echarts 的配置
ECharts3 配置项手册part3
03-02
根据百度ECharts3官方文档整理而成，便于离线使用和查阅，由于上传大小的限制，该手册被分成了5部分。
ECharts3 配置项手册part2
03-02
根据百度ECharts3官方文档整理而成，便于离线使用和查阅，由于上传大小的限制，该手册被分成了5部分。
ECharts3 配置项手册part4
03-02
根据百度ECharts3官方文档整理而成，便于离线使用和查阅，由于上传大小的限制，该手册被分成了5部分。
webpack常用配置项配置文件介绍
09-01
主要为大家详细介绍了webpack常用配置项配置文件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
echarts常用配置
08-02
常用的echarts配置包括标题组件、提示框组件、y轴和x轴、图例组件、内绘网格、工具箱和数据系列等。[2]标题组件用于设置图表的标题，提示框组件用于显示鼠标悬停时的数据信息。y轴和x轴用于设置图表的坐标轴，包括刻度、标签和轴线等。图例组件用于显示数据系列的标识，内绘网格用于绘制图表的背景网格。工具箱提供了一些常用的功能，如数据缩放、数据视图、魔法类型、重置和保存图片等。数据系列用于设置图表的数据，包括折线图、柱状图等不同类型的图表。[3]以上是echarts常用的配置，可以根据需求进行相应的设置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值