Echarts折线图的折线实线设置成虚线

主要修改属性

  itemStyle:{
                normal:{
                    lineStyle:{
                        width:2,
                        type:'dotted'  //'dotted'虚线 'solid'实线
                    }
                }
            },

实例代码：

<!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>
			// 折线图
			var names = []; //类别数组（实际用来盛放X轴坐标值）    
			var series = [];
			$.ajax({
				url: "test.json",
				data: {},
				type: 'GET',
				success: function(data) {
					//请求成功时执行该函数内容，data即为服务器返回的json对象           
					$.each(data.data, function(index, item) {
						names.push(item.statTime); //挨个取出类别并填入类别数组
						series.push(item.noPatrolNum);
					});
					hFun(names, series);
				},
			});
			// 心率
			var hrChart = echarts.init(document.getElementById("main"));

			function hFun(x_data, y_data) {
				hrChart.setOption({
					color: ['#1e63d8'],
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					legend: {
						data: ['漏检次数']
					},
					grid: {
						left: '3%',
						right: '20%',
						bottom: '20%',
						containLabel: true
					},
					xAxis: {

						type: 'category',
						data: x_data,
					},
					yAxis: { // 纵轴标尺固定

						type: 'value',
						scale: true,
						name: '漏检次数',
						min: 0, // 就是这两个 最小值
						max: 'dataMax', // 最大值
						splitNumber: 10,

						boundaryGap: [0.2, 0.2]
					},
					series: [{
						name: '漏检次数',
						type: 'line',
						symbol: 'circle', // 折线点设置为实心点
						symbolSize: 6, // 折线点的大小
						itemStyle: {
							normal: {
								lineStyle: {
									width: 2,
									type: 'dotted' //'dotted'虚线 'solid'实线
								}
							}
						},

						data: y_data
					}]
				}, true);
			}
		</script>
	</body>
</html>

json

{
    "msg": "查询成功",
    "code": 1,
    "data": [{      
        "statTime": "2021-01",      
        "noPatrolNum": 12
    }, {      
        "statTime": "2021-02",      
        "noPatrolNum": 21
    },{      
        "statTime": "2021-03",      
        "noPatrolNum": 27
    },{        
        "statTime": "2021-04",
        "noPatrolNum": 15
    }]
}

在这里插入图片描述

原文链接：https://blog.csdn.net/weixin_44763569/article/details/116793473