今天你踩坑了吗-echarts5.0常用配置详解-一一网

前言

最近公司刚做完大数据相关的产品涉及到了比较多的前端数据可视化有关的知识咱们选择了上手简单功能也比较强大的 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',//整体（包括 text 和 subtext）的水平对齐 | 'auto'、'left'、'right'、'center'
   textVerticalAlign:'auto',//整体（包括 text 和 subtext）的垂直对齐 | 可选值：'auto'、'top'、'bottom'、'middle'
}
复制代码

图例

legend:{
  show: true ,//是否显示
  left: 'auto' ,//位置控制
  top: 'auto' ,//位置控制
  right: 'auto' ,//位置控制
  bottom: 'auto' ,//位置控制
  orient: 'horizontal',//图例列表的布局朝向(horizontal或vertical)
  formatter:function (name) {
    return 'Legend ' + name;
  },//格式化方法
  selectedMode:false,//控制是否可以通过点击图例改变系列的显示状态(true|false|single|multiple)
  inactiveColor:"rgba(197, 156, 42, 1)",
  selected:{'图例名称':false},//图例名称是否选中
  textStyle: {...} ,//图例样式
  tooltip: {//鼠标hover提示,图表配置了tooltip后才会生效
    show: true
  },
  icon:'diamond',//图例项的 icon ('circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none',可设置为图片(icon:"image://https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png")),

}
复制代码

直角坐标系內绘图网格

grid:{
    show:true,// 是否显示直角坐标系网格
    left: '10%' ,//位置信息
    top: 60 ,//位置信息
    right: '10%' ,//位置信息
    bottom: 60 ,//位置信息
    width: 'auto' ,//位置信息
    height: 'auto' ,//位置信息
    backgroundColor: 'transparent' ,//背景色
}
- 直角坐标系grid中的x轴
xAxis:{
  show: true ,//是否显示 x 轴
  position:'top' ,//坐标轴位置
  offset:10, //X 轴相对于默认位置的偏移
  name:'坐标轴名称',
  nameLocation:'start',//坐标轴名称显示位置
  nameTextStyle:{},//坐标轴名称样式
  inverse:true,//是否是反向坐标轴
  boundaryGap:false,//坐标轴两边留白策略
  axisLine:{
    symbol:''//轴线两边的箭头。可以是字符串，表示两端使用同样的箭头；或者长度为 2 的字符串数组，分别表示两端的箭头。默认不显示箭头，即 'none'。两端都显示箭头可以设置为 'arrow'，只在末端显示箭头可以设置为 ['none', 'arrow']
  }
}
- 直角坐标系 grid 中的 y 轴
yAxis:{
  //基本配置同xAxis
   splitNumber:3,坐标轴的分割段数
}
复制代码

区域缩放

dataZoom:{
  type: "slider",//分内置型和滑动条形
  handleIcon: 'circle',//两侧缩放手柄的 icon 形状
  start: 0 ,数据窗口起始位置
  end: 100 ,数据窗口结束位置
}
复制代码

1.折线图基本配置

option = {
    xAxis: {
        type: 'category',//x轴坐标轴类型
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],//坐标轴数据
    },
    yAxis: {
        type: 'value',//y轴坐标轴类型
    },
    tooltip:{//鼠标hover提示框
        show:true,
        trigger:'axis'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],//对应的数据
        type: 'line',//图表类型
        smooth: true,//是否平滑曲线显示。
    }]
};
复制代码

基础配置样式

series 其他配置项

smooth: true, //是否平滑曲线显示。
areaStyle: {}//区域填充样式设置后显示成区域面积图。
多折线在 series 数组中新增一项，并给每项设置不同的 name
多曲线堆叠:给每项设置 stack，将需要堆叠的折线 stack 设置为同一个值
标出最大值及最小值:markPoint
设置双 y 轴，yAxis 可设置为一个数组,增加一项设置默认为右边 y 轴
设置双 y 轴后若想使用需要在 series 的某一项中明确指定 yAxisIndex:yAxis 的 index
当折线图过多时会出现 tooltip 内容过长的情况，此时需要对 tooltip 进行特殊处理

没处理之前：
tooltip内容过多
处理方法:判断当前项折线是否大于 10(此处以十条为例子)，tooltip 支持 html 写法，写一个固定宽高的容器，当其大于十条就用容器将其包裹一层，让他出现滚动条可以进行滚动查看。

处理之后：
tooltip内容过多处理效果
tooltip内容过多代码
注意:此处需要给 tooltip 设置 enterable:true 属性，否则鼠标滚动不会生效（这个坑点花了几个小时研究太难了哈哈）

tooltip 超出容器会被隐藏，需要给其设置 appendToBody: true

没处理之前：
tooltip超出父元素会被隐藏

处理之后：
tooltip超出父元素会被隐藏

注意:如果同一个页面有多个图表,加上 appendToBody:true 后，tooltip 出现时可能造成页面抖动，需要再给 tooltip 加上属性 transitionDuration:0(提示框浮层的移动动画过渡时间)

2.柱状图基本配置

      const option = {
        xAxis: {
          type: "category", //x轴坐标轴类型
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //坐标轴数据
        },
        yAxis: [
          {
            type: "value", //y轴坐标轴类型
          },
        ],
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320], //对应的数据
            type: "bar", //图表类型
          },
        ],
      };
复制代码

给柱状图设置背景颜色
属性: showBackground , backgroundStyle
柱状图堆叠,给 series 需要堆叠的每一项设置一个相同的 stack 值
属性:stack
横向柱状图,将 x 轴 type 设置为 value,y 轴 type 设置为 category 并给到 data 数据
折柱共存,将 series 需要显示为折线的 type 设置为 line 即可
多 y 轴参考折线图双 y 轴设置,给 series 中每一项指定对应的 yAxisIndex
正负条形图,可以对某个值进行单独的颜色配置,小于某个值时变换颜色（此处以-1000 为例）

3.饼图基本配置

const option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          show:true
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",//饼图半径
            data: [
              { value: 1048, name: "搜索引擎" },
              { value: 735, name: "直接访问" },
              { value: 580, name: "邮件营销" },
              { value: 484, name: "联盟广告" },
              { value: 300, name: "视频广告" },
            ],
          },
        ],
      };
复制代码

环形图:给饼图的半径设置为一个数组即可(如 radius: [‘40%’, ‘70%’])
展示为南丁格尔图
属性: roseType:’radius’或者’area’
视觉引导线样式部分修改
属性:labelLine
多饼图配置多个 series
当图表数据过多时图例会显示很多,可以给其设置分页显示(其他图表设置方法相同)
属性:legend

没处理之前：

处理之后：
嵌套环形,将 series 的一项的 radius 设置的比另外一个小即可
属性:radius

4.漏斗图基本配置

基础漏斗图

series: [
          {
            name: "漏斗图",
            type: "funnel",//图表类型
            data: [
              { value: 60, name: "访问" },
              { value: 40, name: "咨询" },
              { value: 20, name: "订单" },
              { value: 80, name: "点击" },
              { value: 100, name: "展现" },
            ],
          }
        ],
复制代码

控制漏斗图的最小宽度,数据为 0 时可以用此方法控制
属性:minSize
改变 label 文本的位置
属性:label
双漏斗

5.盒须图基本配置

const option = {
        xAxis: {
          type: "category",
          data: ["A", "B", "C", "D"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "盒须图1",
            type: "boxplot",
            data: [
              [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],
            ],
          },
        ],
      };
复制代码

盒须图对应的每一个图形数据为一个数组,其中按顺序依次为[‘最小值’,’下四分位’,’中位数’,’上四分位’,’最大值’]
盒须图有时候需要标出特殊的点,可以通过如下代码实现

series: [
  {
    name: "category0",
    type: "boxplot",
    datasetIndex: 3,
    data: data0, //此处为盒须图数据
  },
  {
    color: "blue",
    barGap: "33.33333333333333%",
    name: 1,
    symbolPosition: "end",
    symbolSize: 8,
    type: "pictorialBar",
    z: 10000,
    data: [10, 22, 33, 55], //盒须图对应需要标点的值数据
    tooltip: {
      show: false,
    },
  },
];
复制代码

盒须图数据意义

6.桑基图基本配置

突出高亮经过某个节点路径的方法,在 data 数据及 links 数据中每个值都可以设置对应的 itemStyle 及 lineStyle,可以给其设置单独的颜色。先根据当前节点找到通过该节点的节点,然后统一设置。
突出高亮经过某个节点的节点及路径(此处随意设置几个)
桑基图过多，数据之间差异过大会导致某些较小值的节点高度太小，排版很挤鼠标很难移上去做一些对应操作。可以给节点设置 borderWidth 和 borderColor(颜色和节点颜色一致)来处理，避免节点太小排版太挤或不易操作（这个方法太难找了）
属性:borderWidth,borderColor

未处理之前：
桑基图节点高度太小

处理之后：
桑基图节点高度太小

7.地图基本配置

地图需要先准备一份地图数据,在初始化之前将数据注册进去。
说明: echarts.registerMap(“world”, mapdata) world:为地图类型,此处以世界地图为例,mapdata:为地图数据。

init() {
      this.$echarts.registerMap("world", mapdata);
      // 基于准备好的dom，初始化echarts实例
      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