echarts 配置方法使用记录

饼图延伸线的设置

饼图的视觉引导线 第一段的长度和第二段的长度可以自定义 在series 为pie模式

    labelLine: {
      length: 22,
      length2: 23
    }

echarts的 提示框自定义

tooltip 中 使用 formatter进行提示框自定义设置 （模板字符串进行 dom元素的编写）

   formatter: (params) => {
     let tipText = ``
     return tipText;
   }

echarts 富文本属性

复用性极强 标题 提示 length图例等都可以用到

label: {
    // 在文本中，可以对部分文本采用 rich 中定义样式。
    // 这里需要在文本中使用标记符号：
    // `{styleName|text content text content}` 标记样式名。
    // 注意，换行仍是使用 '\n'。
    formatter: [
        '{a|这段文本采用样式a}',
        '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
    ].join('\n'),

    rich: {
        a: {
            color: 'red',
            lineHeight: 10
        },
        b: {
            backgroundColor: {
                image: 'xxx/xxx.jpg'
            },
            height: 40
        },
        x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4
        },
        ...
    }
}

echarts 底部滚动条功能展示

show 字段用来判断是否显示 此方法与 xAxis yAxis 同级别

	      dataZoom: [{
	        startValue: 0, // 从头开始
	        endValue: 6, // 一次性展示7个
	        type: 'slider',
	        show: show,
	        xAxisIndex: [0],
	        handleSize: 0, // 滑动条的 左右2个滑动条的大小
	        height: 8, // 组件高度
	        bottom: 20, // 右边的距离
	        borderColor: "white",
	        fillerColor: 'rgba(0, 0, 0, 0.3)',
	        borderRadius: 5,
			// backgroundColor: '#fff', // 两边未选中的滑动条区域的颜色
	        showDataShadow: false, // 是否显示数据阴影 默认auto
	        showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
	        realtime: true, // 是否实时更新
	      }],

echarts yAxisIndex 属性

series可以通过此属性 设置多个Y轴 可以理解为下标选择那个Y轴

yAxisIndex: 1, // 配置多个y轴
放置series 里

X/Y 坐标轴刻度标签的相关设置

刻度标签与轴线之间的距离

  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLabel: { //坐标轴刻度标签的相关设置
        margin: 40, //刻度标签与轴线之间的距离
    },
  },
   yAxis: {
    type: 'value',
    boundaryGap: [0, '30%'],  
    axisLabel: { //坐标轴刻度标签的相关设置
      margin: 60, //刻度标签与轴线之间的距离
    },
  },