可信赖的邵阳网站建设,制作二维码的平台,瓜果类网站建设方案,茂名住房和城乡建设局网站文章目录 折线图-区域面积图 areaStyley轴只有整数y轴不从0开始y轴数值不确定#xff0c;有大有小#xff0c;需要动态处理折线-显示label标线legend的格式化和默认选中状态x轴的lable超长处理x轴的相关设置 echarts各个场景遇到的问题 折线图-区域面积图 areaStyle areaStyl… 文章目录 折线图-区域面积图 areaStyley轴只有整数y轴不从0开始y轴数值不确定有大有小需要动态处理折线-显示label标线legend的格式化和默认选中状态x轴的lable超长处理x轴的相关设置 echarts各个场景遇到的问题 折线图-区域面积图 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}
},
