最近公司刚做完大数据相关的产品 涉及到了比较多的前端数据可视化有关的知识 咱们选择了上手简单功能也比较强大的 echarts5.0 版进行图表绘制 当然也根据文档做了很多自定义配置 感谢团队成员-徐开权 整理了一份日常开发中 echarts 使用的比较频繁的配置文档（也可以称为踩坑指南 哈哈 里面有几个属性配置花了很久才研究出来） 在此分享给大家
图表基础配置
标题相关配置
title:{
show:true,
text:'',
link:'https://www.baidu.com/',
textStyle:{
color: '#333' ,
fontStyle: 'normal' ,
fontWeight: 'bolder' ,
fontFamily: 'sans-serif' ,
fontSize: 18 ,
subtext: 'ad' ,
sublink: 'a' ,
subtextStyle:{},
textAlign：'auto',
textVerticalAlign:'auto',
legend:{
show: true ,
left: 'auto' ,
top: 'auto' ,
right: 'auto' ,
bottom: 'auto' ,
orient: 'horizontal',
formatter:function (name) {
return 'Legend ' + name;
},
selectedMode:false,
inactiveColor:"rgba(197, 156, 42, 1)",
selected:{'图例名称':false},
textStyle: {...} ,
tooltip: {
show: true
icon:'diamond',
直角坐标系內绘图网格
grid:{
show:true,
left: '10%' ,
top: 60 ,
right: '10%' ,
bottom: 60 ,
width: 'auto' ,
height: 'auto' ,
backgroundColor: 'transparent' ,
- 直角坐标系grid中的x轴
xAxis:{
show: true ,
position:'top' ,
offset:10,
name:'坐标轴名称',
nameLocation:'start',
nameTextStyle:{},
inverse:true,
boundaryGap:false,
axisLine:{
symbol:''
- 直角坐标系 grid 中的 y 轴
yAxis:{
splitNumber:3,坐标轴的分割段数
dataZoom:{
type: "slider",
handleIcon: 'circle',
start: 0 ,数据窗口起始位置
end: 100 ,数据窗口结束位置
1.折线图基本配置
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
yAxis: {
type: 'value',
tooltip:{
show:true,
trigger:'axis'
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true,
series 其他配置项
smooth: true, //是否平滑曲线显示。
没处理之前：
处理方法:判断当前项折线是否大于 10(此处以十条为例子)，tooltip 支持 html 写法，写一个固定宽高的容器，当其大于十条就用容器将其包裹一层，让他出现滚动条可以进行滚动查看。
处理之后：
注意:此处需要给 tooltip 设置 enterable:true 属性，否则鼠标滚动不会生效（这个坑点花了几个小时研究 太难了 哈哈）
tooltip 超出容器会被隐藏，需要给其设置 appendToBody: true
没处理之前：
处理之后：
注意:如果同一个页面有多个图表,加上 appendToBody:true 后，tooltip 出现时可能造成页面抖动，需要再给 tooltip 加上属性 transitionDuration:0(提示框浮层的移动动画过渡时间)
2.柱状图基本配置
const option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
yAxis: [
type: "value",
series: [
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "bar",
给柱状图设置背景颜色
属性: showBackground , backgroundStyle
{ value: 1048, name: "搜索引擎" },
{ value: 735, name: "直接访问" },
{ value: 580, name: "邮件营销" },
{ value: 484, name: "联盟广告" },
{ value: 300, name: "视频广告" },
环形图:给饼图的半径设置为一个数组即可(如 radius: ['40%', '70%'])
[655, 850, 940, 980, 1175],
[672.5, 800, 845, 885, 1012.5],
[780, 840, 855, 880, 940],
[621.25, 767.5, 815, 865, 1011.25],
盒须图对应的每一个图形数据为一个数组,其中按顺序依次为['最小值','下四分位','中位数','上四分位','最大值']
突出高亮经过某个节点路径的方法,在 data 数据及 links 数据中每个值都可以设置对应的 itemStyle 及 lineStyle,可以给其设置单独的颜色。先根据当前节点找到通过该节点的节点,然后统一设置。
突出高亮经过某个节点的节点及路径(此处随意设置几个)
桑基图过多，数据之间差异过大会导致某些较小值的节点高度太小，排版很挤 鼠标很难移上去做一些对应操作。可以给节点设置 borderWidth 和 borderColor(颜色和节点颜色一致)来处理，避免节点太小排版太挤或不易操作（这个方法太难找了）
属性:borderWidth,borderColor
未处理之前：
处理之后：
7.地图基本配置
地图需要先准备一份地图数据,在初始化之前将数据注册进去。
说明: echarts.registerMap("world", mapdata) world:为地图类型,此处以世界地图为例,mapdata:为地图数据。
init() {
this.$echarts.registerMap("world", mapdata);
var myChart = this.$echarts.init(document.getElementById("map"));
const option = {
geo: {
map: "world",
myChart.setOption(option);
上面配置地图显现的样式为:
对地图颜色进行调整
属性:itemStyle
改变鼠标 hover 样式
属性:emphasis
控制地图是否可以缩放
属性:roam
调整地图中心位置及大小
属性:layoutCenter,layoutSize 两个属性需要配合使用
在地图上画出线条轨迹,在 series 中添加一项,type 设置为 lines,
指定其使用的坐标系为地理坐标系。其数据为包含两组经纬度坐标的数组,即线条的起始点和终止点的经纬度。
属性:series
给地图加上特效
属性:effect , zlevel(需要配合在 level 使用,所有带有尾迹特效的图表需要单独放在一个层，也就是需要单独设置 zlevel)
对特效进行一些简易修改
线条样式调整
标出某些地点,在 series 中添加一项,type 设置为 effectScatter
属性:series
涟漪特效相关配置
属性: rippleEffect
标点样式修改
属性:symbolSize , showEffectOn , itemStyle
鲨鱼哥的前端摸鱼技术群
欢迎大家技术交流 内推 摸鱼 求助皆可 - 链接
