echarts叠堆折线图的标题的位置颜色

最新推荐文章于 2024-08-19 18:09:40 发布

祈澈菇凉

最新推荐文章于 2024-08-19 18:09:40 发布

阅读量4.8k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_36538012/article/details/100566712

版权

前端专栏收录该内容

330 篇文章 17 订阅

订阅专栏

主要实现代码

legend: {
					y: '35px',
					textStyle: { //图例文字的样式
						color: 'red',

					},
				},

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!-- 折线统计图 -->
		<div class="row">
			<div id="main" style="width: 900px; height: 350px;  margin-top:80px;"></div>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
	<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
	<script type="text/javascript">
		// 折线图
		$.ajax({
			url: "test.json",
			data: {},
			type: 'GET',
			success: function(data) {
				console.log(JSON.stringify(data))
				bloodFun(data.echatX, data.echatY, data.echatY2);

			},
		});
		// 基于准备好的dom，初始化echarts实例
		var bloodChart = echarts.init(document.getElementById('main'));
		// 指定图表的配置项和数据
		function bloodFun(x_data, y_data, y2_data) {
			bloodChart.setOption({
				title: {
					text: ''
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985'
						}
					}
				},
				legend: {
					y: '35px',
					textStyle: { //图例文字的样式
						color: 'red',

					},
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					boundaryGap: false,
					data: x_data,
				}],
				yAxis: [{
					type: 'value'
				}],
				series: [{
						name: '高血压',
						type: 'line',
						areaStyle: {
							normal: {
								color: '#fff' //改变区域颜色
							}
						},
						itemStyle: {
							normal: {
								color: '#8cd5c2', //改变折线点的颜色
								lineStyle: {
									color: '#8cd5c2' //改变折线颜色
								}
							}
						},
						data: y_data
					},
					{
						name: '低血压',
						type: 'line',
						areaStyle: {
							normal: {
								color: '#fff' //改变区域颜色
							}
						},
						itemStyle: {
							normal: {
								color: '#8cd5c2', //改变折线点的颜色
								lineStyle: {
									color: '#8cd5c2' //改变折线颜色
								}
							}
						},
						data: y2_data
					}
				]
			});
		}
	</script>
</html>

json

{
    "echatX": [
        "2019-07-02",
        "2019-07-03",
        "2019-07-04",
        "2019-07-05",
        "2019-07-06",
        "2019-07-07",
        "2019-07-08",
        "2019-07-09",
        "2019-07-10",
        "2019-07-11",
        "2019-07-12",
        "2019-07-13",
        "2019-07-14",
        "2019-07-15"
    ],
    "echatY": [
        120,121,123,123,125,127,128,129,120,123,122,126,129,122
    ],
    "echatY2": [
        60,64,63,63,65,67,68,69,61,66,65,68,69,65
    ]
}