visualmap折线图_Echarts分段折线图图例样式visualMap颜色修改

textStyle: { //图例文字的样式

color: '#fff',

fontSize: 16

},

// 折线图

$.ajax({

url: "test.json",

data: {},

type: 'GET',

success: function(data) {

console.log(JSON.stringify(data))

hrFun(data.echatX, data.echatY);

},

});

var myChart = echarts.init(document.getElementById("main"));

function hrFun(x_data, y_data) {

myChart.setOption(option = {

title: {

text: 'Beijing AQI'

},

tooltip: {

trigger: 'axis'

},

xAxis: {

data: x_data

},

yAxis: {

splitLine: {

show: false

}

},

toolbox: {

left: 'center',

feature: {

dataZoom: {

yAxisIndex: 'none'

},

restore: {},

saveAsImage: {}

}

},

dataZoom: [{

startValue: '2014-06-01'

}, {

type: 'inside'

}],

visualMap: {

top: 10,

right: 10,

textStyle: { //图例文字的样式

color: '#fff',

fontSize: 16

},

pieces: [{

gt: 0,

lte: 1,

label: '活动',

color: '#096'

}, {

gt: 1,

lte: 2,

label: '浅睡',

color: '#ffde33'

}, {

gt: 2,

lte: 3,

label: '深睡',

color: '#ff9933'

}, {

gt: 3,

lte: 4,

label: '熟睡',

color: '#cc0033'

}],

outOfRange: {

color: '#999'

}

},

series: {

name: '睡眠状态',

type: 'line',

data: y_data,

//虚线

// markLine: {

// silent: true,

// data: [{

// yAxis: 1

// }, {

// yAxis: 2

// }, {

// yAxis: 3

// }, {

// yAxis: 4

// }]

// }

}

});

}

json数据

格式是数组对象的时候

{

"echatX": ["2020-11-17 14:47:18", "2020-11-17 14:49:44", "2020-11-17 14:52:11", "2020-11-17 14:54:36",

"2020-11-17 14:57:01", "2020-11-17 14:59:28", "2020-11-17 15:01:55", "2020-11-17 15:04:23", "2020-11-17 15:06:51",

"2020-11-17 15:09:20", "2020-11-17 15:11:44", "2020-11-17 15:14:10", "2020-11-17 15:16:38", "2020-11-17 15:19:01",

"2020-11-17 15:21:26", "2020-11-17 15:23:53", "2020-11-17 15:26:20", "2020-11-17 15:28:47", "2020-11-17 15:31:14",

"2020-11-17 15:33:41", "2020-11-17 15:36:09", "2020-11-17 15:38:38", "2020-11-17 15:41:07", "2020-11-17 15:43:35",

"2020-11-17 15:46:01", "2020-11-17 15:48:25", "2020-11-17 15:50:52", "2020-11-17 15:53:20", "2020-11-17 15:55:55",

"2020-11-17 15:58:35", "2020-11-17 16:01:04", "2020-11-17 16:01:19", "2020-11-17 16:03:49", "2020-11-17 16:04:05",

"2020-11-17 16:06:34", "2020-11-17 16:06:50", "2020-11-17 16:09:17", "2020-11-17 16:09:32", "2020-11-17 16:11:56",

"2020-11-17 16:12:13", "2020-11-17 16:14:38", "2020-11-17 16:14:54", "2020-11-17 16:17:20", "2020-11-17 16:17:37",

"2020-11-17 16:20:02", "2020-11-17 16:20:18", "2020-11-17 16:22:51", "2020-11-17 16:23:10", "2020-11-17 16:25:43",

"2020-11-17 16:26:00", "2020-11-17 16:28:26", "2020-11-17 16:28:43", "2020-11-17 16:31:07", "2020-11-17 16:31:24",

"2020-11-17 16:33:58", "2020-11-17 16:34:17"

],

"echatY": [1, 1, 1, 1, 1, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,

3, 2, 2, 2, 2, 2, 2, 4, 4, 4, 4, 4, 4, 3, 3, 4, 4, 4, 4

],

"echatY2": null

}