为何需要指定 图表类 设计规范？
-
从下面的这图开始说起，A 部门在 Echarts 上面踩了很多坑，做了很多定制化的样式，这些经验+样式 存在哪里呢？git 仓库？前端部门的博客吗？其实都没有，最终没有任何积累。
-
B 部门又有一个后台项目。做的时候。因为没有统一的设计规范或者视觉规范，产品和B部门的前端说，你按照A部门的样式来做，但是中间说不定又会改一些其它的内容，最终每个部门的图表都长的不一样。
-
如下图所示，比如去掉Y轴上面的 - 符号，这个坑A部门踩了，产品觉得A部门的这个OK，照抄，如果A部门的人没有做积累，或者说离职了呢，代码中也没有针对这个添加注释，该怎么办呢？
-
不过产品不在乎这种积累，直接把A部门页面直接贴过去给B部门的前端就可以了，既然A部门能做出来，B你做不出来，你能力不行 🐶
怎么办呢 ：B 部门的人，只能又花 几天的时间重走A部门的趟过的坑！！
Y轴相关配置
x 与 y 轴同一个起点
不显示x 与 y轴
四线三格配置
- 在 yAxis 中配置
- 修改颜色：
yAxis: {
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#aaa', '#ddd'],
}
}
}
Tooltip 显示不全 / 自定义 tooltip function
option: {
tooltip: {
trigger: 'axis',
position: function(point, params, dom, rect, size) {
// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
var obj = {};
// 鼠标是否在当前图标的中线的左侧
let inLeft = point[0] < size.viewSize[0] / 2
// 左侧的tooltip 的left就是pointX 的值，再右侧，则是图标宽度-pointX
let val = inLeft ? point[0] : size.viewSize[0] - point[0]
// 在左侧时候，为 obj.left = pointX; 在右侧时候为 obj.right = widthOfChart - pointX
// 效果就是 tooltip不会超出图表范围
obj[['left', 'right'][+!inLeft]] = val
return obj;
} // position function end
} // tootip end
} // option end
echarts配置
可以代码直接放在demo中运行
option = {
// 调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
// 使用场景： 一个图表由很多条折线图构成，需要自定义这些颜色，可以写在这里
colors: ['blue', 'orange'],
title: {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
// 工具提示，在鼠标移动到图表上时，显示该点的详细数据
// 图：https://ws1.sinaimg.cn/large/006tKfTcgy1flizeduk3gj31380j6aak.jpg
tooltip: {
trigger: 'axis'
},
legend: {
// 指示器，用于触发折线是否显示
// https://ws4.sinaimg.cn/large/006tKfTcgy1flizizs6dqj314o0z0aao.jpg
data:['最高气温','最低气温'] //这里要和下面series里面的每一个item的名字做对应
},
// 图 https://ws4.sinaimg.cn/large/006tKfTcgy1flizizs6dqj314o0z0aao.jpg
toolbox: {
show: true,
right: 30, // 控制位置
iconStyle: {
// 正常展示时候的样式
normal: {
borderColor: "blue" // 控制样式
},
// emphasis（强调）=> 鼠标悬浮和点击时候的样式
emphasis: {
borderColor: "#2486f0"
}
},
// 支持哪些特性，其实就是有哪些功能
feature: {
dataZoom: { // 图表选取扩大，还原
yAxisIndex: 'none'
},
dataView: {readOnly: false},// 将图形转换为数据视图
magicType: {type: ['line', 'bar']},
restore: {},// 重置
saveAsImage: {} // 将当前图表保存为图片
}
},
xAxis: {
type: 'category',
boundaryGap: false,
// x轴的数据
data: ['周一','周二','周三','周四','周五','周六','周日'],
axisLine:{
// // x轴数据的相关样式
lineStyle:{
color:'purple',
width:10, //x轴的宽度， 在这个图中， x轴位于0度处
}
},
},
yAxis: {
type: 'value',
name: '度',
// 修饰y轴顶部的名称
nameTextStyle: {
color: ['red'],
fontSize: 14,
fontWeight: 600
},
// 坐标轴刻度标签的相关设置
axisLabel: {
formatter: '{value} °C',
color: 'orange'
},
// 坐标轴轴线相关设置
axisLine:{
show: true, // false 不显示
lineStyle:{
color:'blue',
// opacity: 1 // opacity 透明度为0则不显示
}
},
},
// 每一条折线的数据
// 其实对应是legend
series: [
{
name:'最高气温',
type:'bar',
// 柱状图的一个柱子的底部宽度 占据x轴一个刻度宽度 的比例
barWidth: '19%',
// 折线图或者柱状图的数值
data:[3, 4, 3, 2, 2, 3, 7],
// 特殊标记点
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [
{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{ symbol: 'none', x: '90%', yAxis: 'max' }, { symbol: 'circle', label: { normal: { position: 'start', formatter: '最大值' } }, type: 'max', name: '最高点' }]
]
}
}
]
};
定制每条线上小圆点（symbol）大小（symbolSize
export function genSeries(name, data, color) {
let currentUTCHour = new Date().getUTCHours()
let item = {
name: name,
type: 'line',
showSymbol: true,
data: data, // 每一条线上面的数据
// symbolSize: 3,
symbolSize: function (value, params) {
return 0
// if (params.dataIndex % 3 === 0) {
// return 3
// } else {
// return 0
// }
},
lineStyle: {
normal: {
// width: 1,
// type: 'solid' // solid or dotted
color: color,
}
},
itemStyle: {
normal: {
color: color
}
},
}
return item
}
