前端扩展知识|Echart前端的修饰器，你不来看看吗（）前端|echarts|javascript|前端

文章目录

Echarts
- 1.Echarts初认识及基本使用
- - 1.1Echarts
  - 1.2Echarts的优点
  - 1.3展示Echarts的一个基本案例
  - 1.4基本使用Echarts
  - - 1.4.1引入echarts文件
    - 1.4.2项目中使用
  - 1.5一些基本的配置
- 2.了解Echarts的几种基本图
- - 2.1柱状图
  - - 2.1.1实现
    - 2.1.2柱状图的一些常见效果
  - 2.2饼图
  - - 2.1实现步骤
    - 2.2饼图的一些效果
  - 2.3一些通用的配置
- 3.总结

文章图片

??作者简介：大家好我是言不及行yyds
个人主页：言不及行yyds的CSDN博客
系列专栏：【前端】

Echarts 1.Echarts初认识及基本使用 1.1Echarts

ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库
ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

1.2Echarts的优点

开源免费
功能丰富
社区活跃
多种数据支持
流数据的支持
移动端的优化
跨平台
酷炫的特效
数据的三维可视化

1.3展示Echarts的一个基本案例

文章图片

1.4基本使用Echarts
1.4.1引入echarts文件

npm获取

npm install echarts --save

.从github上下载

apache/echarts 项目的 release 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code，解压后 dist 目录下的 echarts.js 即为包含完整 ECharts 功能的文件

1.4.2项目中使用

引入Echarts.js文件（将其放在lib文件下）

="./lib/echarts.min.js">

准备呈现图表的容器

也可以直接调用echarts实例对象的resize()方法

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

初始化echarts实例对象

var myChart = echarts.init(document.getElementById('main'))

准备配置项

这步很关键，我们最终的效果，到底是显示饼图还是折线图，基本上都是由配置项决定的

var option = { xAxis: { type: 'category', data: ['小明', '小红', '小王'] }, yAxis: { type: 'value' }, series: [ { name: '语文', type: 'bar', data: [70, 92, 87], } ] }

将配置项设置给echarts实例对象

myChart.setOption(option)

1.5一些基本的配置

xAxis
直角坐标系中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的
呈现
yAxis
直角坐标系中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去
series 下找数据进行图表的绘制
series
系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据

2.了解Echarts的几种基本图 2.1柱状图
2.1.1实现

步骤1 ECharts 最基本的代码结构
步骤2 准备x轴的数据
步骤3 准备 y 轴的数据
步骤4 准备 option , 将 series 中的 type 的值设置为: bar

="lib/echarts.min.js"> > //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 = { yAxis: { type: 'value' }, xAxis: { type: 'category', data: xDataArr }, series: [ { name: '语文', type: 'bar', data: yDataArr } ] } mCharts.setOption(option)

文章图片

2.1.2柱状图的一些常见效果

说到效果的话，我们就需要去配置一些属性。
关于怎么配置就需要到管网上查看

标记效果

标记出图表的最大值和最小值用markPoint属性
配置在series中
标记出平均值用到markLine属性，与markPoint同级

series: [{ ......... markPoint: { data: [ { type: 'max', name: '最大值' }, { type: 'min', name: '最小值' } ] },markLine: { data: [ { type: 'average', name: '平均值' } ] } }],

文章图片

显示效果

如果我们要实现在柱状图中显示数值
或者设置柱状图的宽度时我们可以使用
lable，barwidth属性

series：[ { .... label:{ show:true//设置是否可见 rotate:60//旋转数字角度 }, barWidth："30%" } ]

文章图片

2.2饼图
2.1实现步骤

步骤1 ECharts 最基本的代码结构
步骤2 准备数据
步骤3 准备配置项在 series 下设置 type:pie

需要注意的是

饼图的数据是由 name 和 value 组成的字典所形成的数组
饼图无须配置 xAxis 和 yAxis

> //1. ECharts最基本的代码结构 //2. 准备数据[{name:???, value:??? },{}] //淘宝: 11231京东: 22673唯品会: 61231号店: 8989聚美优品: 6700 //3. 将type的值设置为pie var mCharts = echarts.init(document.querySelector("div")) // pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有name和value var pieData = https://www.it610.com/article/[ { name:'淘宝', value: 11231 }, { name: '京东', value: 22673 }, { name: '唯品会', value: 6123 }, { name: '1号店', value: 8989 }, { name: '聚美优品', value: 6700 } ] var option = { series: [ { type: 'pie', data: pieData } ] } mCharts.setOption(option)

文章图片

2.2饼图的一些效果

显示数值
lable.show 用于显示文字
lable.formatter:格式化文字
南丁格尔图
南丁格尔图指的是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大
roseType:‘radius’
选中效果

1.selectedMode: ‘multiple’
选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可
选 ‘single’ ， ‘multiple’ ，分别表示单选还是多选
2.selectedOffset: 30 选中扇区的偏移距离

> //1. ECharts最基本的代码结构 //2. 准备数据[{name:???, value:??? },{}] //淘宝: 11231京东: 22673唯品会: 61231号店: 8989聚美优品: 6700 //3. 将type的值设置为pie var mCharts = echarts.init(document.querySelector("div")) // pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有name和value var pieData = https://www.it610.com/article/[ { 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: ['50%', '75%'] // 第0个元素代表的是內圆的半径第1个元素外圆的半径 roseType: 'radius', // 南丁格尔图饼图的每一个区域的半径是不同的 // selectedMode: 'single' // 选中的效果,能够将选中的区域偏离圆点一小段距离 selectedMode: 'multiple', selectedOffset: 30 } ] } mCharts.setOption(option)

文章图片

2.3一些通用的配置

给图形设置标题：title
显示提示框：tooltip
工具按钮：toolbox
图列：legend

> var mCharts = echarts.init(document.querySelector("div")) var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] var yDataArr1 = [88, 92, 63, 77, 94, 80, 72, 86] var yDataArr2 = [93, 60, 61, 62, 85, 79, 92, 30] var option = { //设置图表的标题 title: { text: '成绩展示', textStyle: { color: 'red' }, }, //显示提示框 tooltip: { trigger: 'axis', triggerOn: 'click', formatter: function(arg){ return arg[0].name + '的分数是:' + arg[0].data } }, toolbox: { feature: { saveAsImage: {}, // 导出图片 dataView: {}, // 数据视图 restore: {}, // 重置 dataZoom: {}, // 区域缩放 magicType: { type: ['bar', 'line'] } // 动态图表类型的切换 } }, legend: { // 图例, 图例中的data数据来源于series中每个对象的name, 图例可以帮助我们对图表进行筛选 data: ['语文', '数学'] }, xAxis: { type: 'category', data: xDataArr }, yAxis: { type: 'value' }, series: [ { name: '语文', type: 'bar', data: yDataArr1 }, { name: '数学', type: 'bar', data: yDataArr2 } ] } mCharts.setOption(option)