textStyle: { //图例文字的样式 color: '#fff', fontSize: 16 },
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" class="col-md-12 col-sm-12 col-xs-12" style="height: 400px;"></div> <script> // 折线图 $.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 // }] // } } }); } </script> </body> </html>
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 }
