关键代码:
color: ["#ff9b00", "#00ffff", ], //全局调色盘,在legend的同级设置color数组,里面的颜色为线对应的颜色
legend: {
show: true,
orient: "horizontal",
// 图例信息
itemWidth: 14,
itemHeight: 3,
textStyle: {
color: "#fff", //图例的文字颜色
fontSize: 12,
},
right: "5%",
top: "3%",
data: [
{
name: "呼入",
icon: "rect",
},
{
name: "呼出",
icon: "rect",
},
], //data中的值要对应series中的name属性
formatter: function (name) {
return name;
},
// itemStyle: {
// color: "#ff9b00",
// },
},
series: [
{
name: "呼入",
type: "line",
symbol: "none", // 默认是空心圆(中间是白色的),改成实心圆
showAllSymbol: true,
symbolSize: 16,
smooth: true,
itemStyle: {//关键代码
normal: {
areaStyle: {
type: "default",
color: "#ff9b00",
},
lineStyle: {
normal: {
width: 0.8,
color: "#ff9b00", // 线条颜色
},
},
},
},
areaStyle: {//区域的颜色
normal: {
//线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(255,155,0,.6)",
},
{
offset: 1,
color: "rgba(255,155,0, 0)",
},
],
false
),
},
},
data: goToSchool,
},
{
name: "呼出",
type: "line",
symbol: "none", // 默认是空心圆(中间是白色的),改成实心圆
showAllSymbol: true,
symbolSize: 16,
smooth: true,
lineStyle: {//关键代码
normal: {
width: 1,
color: "#00ffff", // 线条颜色
},
},
areaStyle: {
normal: {
//线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(0,255,255,.6)",
},
{
offset: 1,
color: "rgba(0,255,255, 0)",
},
],
false
),
},
},
data: goOutSchool,
},
],
这样设置以后就可以实现我们想要的效果了,如下所示: