echarts官方文档：www.echartsjs.com/zh/option.h…
echarts官方案例：www.echartsjs.com/examples/zh…
不知道怎么讲，就写一下需求怎么实现的吧。
初始需求：
1、首先从官网复制一个折线图出来，长这样
代码：
myChart.setOption({
xAxis: {
type: "category",
boundaryGap: false,
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value"
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
areaStyle: {}
}
]
});
2、改变折线图样式
a. 将区域颜色改成绿色渐变
areaStyle官方文档：www.echartsjs.com/zh/option.h…
将series中的areaStyle属性修改如下
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(54,179,116,1)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(54,179,116,0)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
效果图：
b. 折线样式修改
lineStyle官方文档：www.echartsjs.com/zh/option.h…
在series中加入lineStyle
lineStyle: {
color: '#36B374',
width: 2
},
效果如下：
c. 折线拐点标志样式修改
itemStyle官方文档：www.echartsjs.com/zh/option.h…
在series中加入itemStyle
itemStyle: {
color: '#fff', // 拐点颜色
borderColor: 'rgba(54,179,116,1)',
borderWidth: 1
},
效果如下：
需要在series中加入另一属性symbolSize
symbolSize: 8,
效果如下：
c. 显示出每个拐点的数值
根据官方案例可以得出，在series中新增label属性即可显示
label: {
show: true,
position: 'top',
color: 'rgba(54,179,116,1)'
},
效果如下:
d. Y轴X轴样式修改
-
多了刻度线，把刻度线去掉
X轴刻度线官方文档：www.echartsjs.com/zh/option.h…
Y轴文档也可由此找到
在yAxis和xAxis中分别加入axisTick属性
axisTick: { show: false } -
X轴颜色样式修改
在yAxis中加入axisLine属性
axisLine: { lineStyle: { color: "#999999" } }, -
Y轴轴线去掉
Y轴文档：www.echartsjs.com/zh/option.h…
在yAxis中加入axisLine属性
axisLine: { show: false }, -
网格样式修改
Y轴网格线官方文档：www.echartsjs.com/zh/option.h…
在yAxis中加入splitLine属性
splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.08)', width: 0.7, type: 'solid' } }效果如下：
3、当数据很大或者数据起伏不大时，拐点上的数字会连在一起不美观，需要优化
首先想到的是将数字旋转30°，于是去找属性，找到了rotate
将itemStyle的label属性中加入rotate属性，即：
label: {
show: true,
position: "top",
color: "rgba(54,179,116,1)",
rotate: 30
},
效果如下：
4、结果认为还是不理想，所以后面需求改为支持第一屏只展示5个月的数据，可以左右滑动
dataZoom缩放官方文档：www.echartsjs.com/zh/option.h…
根据需求，我们选择inside类型
在series同级加入dataZoom属性
dataZoom: [
{
zoomLock: true, // 只滑动，不缩放，因为缩放又会出现上面的状况
type: 'inside',
start: 60, // 数据窗口范围的起始百分比
end: 100 // 数据窗口范围的结束百分比
}
],
效果如下：
5、左右滑动时，Y轴最小值和最大值会根据当屏值发生变化，而产品需要不变
想到固定最小值和最大值，找到属性yAxis.min和yAxis.max
yAxis中插入这两种属性
min: 8000000,
max: 13203434
效果如下：
6、点击拐点时需要弹出提示如下图
根据官方案例可知tooltip属性能实现
tooltip官方文档www.echartsjs.com/zh/option.h…
在series同级加入tooltip属性
tooltip: {
show: true,
trigger: 'item',
confine: true,
mousemove: {
type: 'line'
},
triggerOn: 'mousemove',
formatter: params => {
return `<p>${params.name}</p><p>黑名单</p><p>${params.value}名</p>`;
}
},
效果如下：
github代码库： github.com/yanzhihu/vu…
最后：柱状图与折线图放一个图表里及三个Y轴的官方demo放这里
www.echartsjs.com/examples/zh…
