echarts

最新推荐文章于 2024-03-12 16:50:46 发布

原创最新推荐文章于 2024-03-12 16:50:46 发布 · 402 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #大前端 #前端 #vue

本文深入探讨了Echarts这个JavaScript图表库，它由百度捐赠给Apache基金会，适用于创建符合中国审美的图表。主要内容包括各种图表类型如柱状图、饼图、线性图的设置，颜色自定义，特别样式如渐变和线面样式，以及标签、多图表布局、工具箱、动画、事件监听等高级特性。此外，还介绍了如何在HTML和Vue中使用Echarts，并提供了丰富的代码示例。

echarts

定义
核心概览
图标常用类型
颜色的修改
特别样式
label标签
多图表
工具箱toolbox
动画
事件监听
事件发送
富文本
地图

定义

1.javascript的图表的库
2.百度捐给apache基金会
3.样式比较符合中国人审美
4.HeightCharts，D3为同行
5.官网：echarts

核心概览

instance 实例
series 系列
tooltip 提示
legend 图例
xAxis x轴
yAxis y轴
toolbox 工具箱
dataZoom 缩放
vitualMap 虚拟映射

图标常用类型

bar 柱状
pie 饼型 — radius:[“60%”,“40%”]
line 线性 — areaStyle 面; smooth:true 平滑的线

颜色的修改

主题：light浅色,dark深色

自定义主题：（复制官方js）参考地址
在这里插入图片描述

color：调色盘(全局、局部都可使用)

color:[“pink”,“plum”,"#ff7"],

color系列调色盘
itemStyle — normal 默认;emphasis 强调状态(即鼠标悬浮状态)

// 改某项的数据颜色
itemStyle:{
normal:{color:“pink”},
// 鼠标悬浮颜色
emphasis:{color:“plum”}

特别样式

渐变

var mycolor =  {
				type: 'linear',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [{
					offset: 0, color: 'rgba(0, 85, 255, .7)' // 0% 处的颜色
				}, {
					offset: .7, color: 'rgba(29, 249, 231, 0)' // 100% 处的颜色
				}],
				global: false // 缺省为 false
			}

线的样式

lineStyle：{
   width：12,
   cap:“round”
   opacity:0.7,
},

面的样式

areaStyle{
   color：linear2,
}

数据的堆叠

stack:true

label标签

show：true 是否显示

格式化

formatter："{
{a}{b}{c}
}"
//a 代表数据名
//b 系列名
//c 数字

位置

position
insideRight 内部右侧
top/left/right/bottom/inside

颜色

color

多图表

gird网格布局

top/left/right/bottom
height
width

轴线指定xAxis、yAxis

gridIndex：0；
gridIndex：1；

在这里插入图片描述

工具箱toolbox

默认右上角的工具箱

toolbox: {
show: true //显示工具箱
feature: {
//缩放
dataZoom: {yAxisIndex: 'none'},
//数据视图
dataview: {readOnly: false},
//魔法类型
magicType: {type: ['line', 'bar','pie']}
//重置
restore: {}
//保持图片
saveAslmage: 0

动画

animationEasing:"bounceInOut"  //动画缓存函数
animationDelay(index)  //动画延迟
animationDuration(index)  //动画时间

事件监听

echart.on("click")
click,mouseover,mouseout,dblclick

事件发送

dispatchAction({
type:"showTip"，//显示提示
serieslndex:0，//系列数据第0个
datalndex:index, //data数据第3
position:"top"
})

富文本

//格式：b数据名,d百分比
formatter:"{bfb|{d}}%\n{baidu|{b}}"
rich:{
bfb:{css样式}min:{css样式}
}

在这里插入图片描述

地图

在html文档使用时
在这里插入图片描述
在vue使用时需要下载echarts插件并导入，详情见vue使用echarts