菜单 搜索
首页 前端知识 Echarts常用配置项(详细入门)

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

2024-04-07 08:04:38 前端知识 前端哥 713 123 我要收藏

目录

前言福利：推荐几个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>
复制

转载请注明出处或者链接地址：https://www.qianduange.cn//article/4552.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！