echarts 使用

坐标轴

坐标轴、刻度、轴名字

换行/span>

双y轴

双y轴

双y轴 刻度线对齐

  let num = 5 // 分五段
  let distance = 30 // 最大值 离顶部距离，避免 折现接触顶部
  let y1Max = Math.ceil((Math.max.apply(null,option.series[0].data) + distance)/num)
  let y2Max = Math.ceil((Math.max.apply(null,option.series[1].data) + distance)/num)
  option.yAxis[0].max=y1Max * num;
  option.yAxis[0].interval=y1Max;
  option.yAxis[1].max=y2Max * num;
  option.yAxis[1].interval=y2Max;

label 样式 位置

饼图有个 起始 角度 startAngle:0, //起始角度

图例

图例标识

图例

提示弹窗

提示弹窗

也可以添加类名 tooltip.className: 'gggggggggggggggggggggggggg'

formatter: function (params) {
  var relVal = `到起点距离 ${params[0].name}m` ;
   for (var i = 0, l = params.length; i < l; i++) {
    relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + ' m'
   }
   return relVal;
 }

渐变色

提示弹窗

标记线

提示弹窗

坐标轴高亮

高亮坐标轴 显示提示

单独改变坐标轴样式

开启监听

坐标轴改变颜色

开启监听

鼠标进入 鼠标离开

X轴选择后对齐

X轴选择后对齐

触发高亮和提示

主动触发 dispatchAction

高亮

提示

饼图hover

 position: function (pos,params,dom,rect,size) {
  let left = pos[0] < size.viewSize[0] / 2
  return [left ? pos[0] : (pos[0] - size.contentSize[0]),"10%"]
 }

坐标轴 数组差距过大

使用 log

log 设置过 min：1， 所以小于等于1的都不显示， 通过设置自定义data属性，添加真假两套数值

定义data

使用 log

动态显示图表

原理就是动态修改 dataZoom 属性， 鼠标移入停止滚动，移除继续滚动

动态显示图表

修改dataZoom

图表太小

图表太小

清除图表

警告

let echarts = this.$echarts.init(dom);
echarts.clear() // 清空画布

let dom = document.getElementById(id)
this.$echarts.dispose(dom) // 销毁实例