折线图-区域面积图 areaStyle

在这里插入图片描述

areaStyle: {opacity: 0.8, // 透明度color: {/*折线-面积区域-颜色渐变*/type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: val.colorList[index], // 0% 处的颜色},{offset: 1,color: 'rgba(255,255,255,0.4)' // 100% 处的颜色}],global: false // 缺省为 false},},// stack:'Total', // 堆积。/*面积图的时候，hover后，是否隐藏（置灰）其他线，只保留当前的自己内容*/
emphasis: {focus: 'series', // hover的交互。
},

y轴只有整数

yAxis：
scale:true, // y坐标轴不从0开始

y轴不从0开始

yAxis：
minInterval: 1, // 不显示小数，只有整数

y轴数值不确定，有大有小，需要动态处理

在这里插入图片描述

/**** 计算数值的最大值，根据最大值，设备grip的left，否则数值可能显示不全的！* @type {number[]}*/
let maxNumList = [1000] // 默认4位数的宽度。
// 找出各个系列中的max
option.series.forEach(v=>{let maxNum = Math.max(...v.data)maxNumList.push(maxNum)
})
// console.log('最大值list：',maxNumList)
// 找出max
let max = Math.max(...maxNumList)
let maxLength = (max+'').length
// 默认一个字站位12px
option.grid.left = 12*maxLength + ''this.echartsIns.setOption(option, true)

折线-显示label

在这里插入图片描述

series-line. label

标线

在这里插入图片描述

// 插入一个标线
markLine: {silent: false, // 图形是否不响应和触发鼠标事件:false truelabel:{show:true, //position:'end', // 标签位置distance:-20, // 标签与线之间的间距// 标签内容格式器formatter:(params)=>{console.log('markLine-format:',params)return params.name+ ':' + params.value}},data: [{ yAxis: 33, },{type:'average', // 平均值name:'平均值a', //},{type:'min', // 最小值name:'最小值b', //},{type:'max', // 最大值name:'最大值c', //},]
},

legend的格式化和默认选中状态

// 图例组件。
legend: {show: true,  // true, falseformatter: (name) => {// return `ks-${name}` // 添加前缀// 自己处理文字return echarts.format.truncateText(name, 40)},// 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。selectedMode: true, // true,false 是否可以选择切换legendselected: {// key是data中的name字段'人员': false,'绩效': true,},
},

x轴的lable超长处理

换行
format的时候，隔几个字就加一个‘\n’，换行处理了
旋转：旋转一定的度数
隔几个显示，

x轴的相关设置

在这里插入图片描述

xAxis: {show: true, // false truetype: 'category', //  坐标轴类型。'value' 数值轴，适用于连续数据。'category' 类目轴. 'time' 时间轴.'log' 对数轴。// 坐标轴 '轴线' 相关设置。axisLine: {show: true, // false,truesymbol: ['none', 'arrow'], // x轴是否有箭头symbolSize: [10, 15], // 轴线两边的箭头的大小lineStyle: {},},// 坐标轴'刻度'相关设置。axisTick: {},// 坐标轴刻度'标签'的相关设置。axisLabel: {show: true, //  false,truerotate: 25, // 旋转度数color: (value) => {console.log('x轴value：', value)return value == '08:00' ? '#0e0e0e' : 'rgba(255,68,0,0.5)'}},// 坐标轴在 grid 区域中的分隔线。(垂直坐标轴的线)splitLine: {show: true, // 坐标轴在 grid 区域中的分隔线。interval: 0,lineStyle: {color: 'rgba(59,26,203,0.4)',type:[4,4],// 'dotted'等width:2,},},// 类目数据，在类目轴（type: 'category'）中有效。data: val.xData,// 坐标轴指示器配置项。(hover x轴的时候，选中区域或者line的效果)axisPointer: {// show:true,type: 'line', // line shadow none}
},