下面配置渐变色的地方，
new echarts.graphic.LinearGradient中的echarts为自己定义的echarts对象（var echarts = require("echarts/lib/echarts");）
option: {
// 提示
tooltip: {
trigger: "axis",
// 设置tooltip的样式
formatter: function(datas) {
var res = datas[0].name + "<br/>",
val;
for (var i = 0, length = datas.length; i < length; i++) {
val = datas[i].value / 100 + "%";//百分比
// datas[i].marker是文字前面的icon
res += datas[i].marker +" "+ datas[i].seriesName + "：" + val + "<br/>";
}
return res;
}
},
//color跟legent对应，颜色就是icon的颜色
color: ["#4472C5", "#ED7C30"],
legend: {
icon: "circle",//y圆形
data: ["策略收益", "沪深300"],
left: "4%",
itemHeight: 9, //改变圆圈大小
textStyle: {
fontSize: 14,
color: "#B6B9BE",
rich: {
b: { color: "red" }
}
}
},
// 具体上下左右的距离
grid: {
top: "20%",
left: "0%",
right: "8%",
bottom: "6%",
containLabel: true
},
// 下载按钮
toolbox: {
// feature: {
// saveAsImage: {}
// }
},
// x轴配置
xAxis: [
{
type: "category",
axisLabel: {
// interval: 0, //控制坐标轴刻度标签的显示间隔.设置成 0 强制显示所有标签。设置为 1，隔一个标签显示一个标签。设置为2，间隔2个标签。以此类推
rotate: 0, //倾斜度 -90 至 90 默认为0
textStyle: {
fontWeight: "", //加粗
color: "#ACACAC" //黑色
},
// 只显示首位两个数据
margin: 10,
interval: 100000,
showMinLabel: true,
showMaxLabel: true
},
// axisLine坐标轴轴线相关设置:
axisLine: {
show: false, // 不显示x轴
symbol: [{ default: "none" }], // 可以是字符串，表示两端使用同样的箭头；或者长度为 2 的字符串数组，分别表示两端的箭头。默认不显示箭头，即 'none'。两端都显示箭头可以设置为 'arrow'，只在末端显示箭头可以设置为 ['none', 'arrow']。
// axisLine坐标轴轴线样式设置
lineStyle: {
color: "#333", // 坐标轴轴线颜色设置
1 // 坐标轴线线宽。
}
},
boundaryGap: false, //是否从零刻度开始
data: [
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190601",
"20190701"
],
axisTick: { show: false, length: 0 }
}
],
yAxis: [
{
type: "value",
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
// interval: 0, //控制坐标轴刻度标签的显示间隔.设置成 0 强制显示所有标签。设置为 1，隔一个标签显示一个标签。设置为2，间隔2个标签。以此类推
rotate: 0, //倾斜度 -90 至 90 默认为0
textStyle: {
fontWeight: "", //加粗
color: "#ACACAC" //黑色
},
formatter: "{value}%"
},
splitLine: {
show: true,
lineStyle: { type: "solid", color: ["#E7E7E7"], 1 }
}
}
],
series: [
{
name: "策略收益",
type: "line",
// stack刪除后y軸数据才能让对应
// stack: "总量",
showSymbol: false,
hoverAnimation: false,
// 使用圆滑曲线
smooth: true,
yAxisIndex: 0,
itemStyle: {
normal: {
// label: {
// show: true,
// position: 'top',
// formatter: '{b}
{c}%',
// },
lineStyle: {
color: "#F99037"
}
}
},
// 背景区域渐变色
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
//折线图颜色渐变
offset: 0,
color: "#FEE9D7"
},
{
offset: 1,
color: "#FFFBF8"
}
])
}
},
data: [
"-50",
"152",
"120",
"152",
"192",
"179",
"146",
"158",
"150",
"126",
"179",
"204",
"186",
"177",
"192",
"182",
"162",
"178",
"240",
"209",
"187",
"164",
"192",
"182",
"152",
"92"
]
},
{
name: "沪深300",
type: "line",
// stack: "总量",
showSymbol: false,
hoverAnimation: false,
smooth: true,
yAxisIndex: 0,
itemStyle: {
normal: {
lineStyle: {
color: "#3979BB"
}
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
//折线图颜色渐变
offset: 0,
color: "#FEE9D7"
},
{
offset: 1,
color: "#FFFBF8"
}
])
}
},
data: [
"92",
"72",
"120",
"92",
"60",
"89",
"82",
"68",
"98",
"86",
"79",
"84",
"76",
"87",
"62",
"72",
"82",
"98",
"86",
"79",
"87",
"74",
"82",
"62",
"82",
"62"
]
}
]
}
};