echarts中graphic_echarts中的一些配置

option: {

// 提示

tooltip: {

trigger: "axis",

// 设置tooltip的样式

formatter: function(datas) {

var res = datas[0].name + "
",

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 + "
";

}

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", // 坐标轴轴线颜色设置

width: 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"], width: 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}\n{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"

]

}

]

}

};