Echarts line chart style modification (inflection point size, inflection point border size and color, hover inflection point fill color, etc.)

 

 

option = {
  title: {
    text: '',
    subtext: ''
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    // prettier-ignore
    data: ["20220823", "20220824", "20220825", "20220826", "20220829", "20220830", "20220831", "20220901", "20220902", "20220905", "20220906", "20220907", "20220908", "20220909", "20220913", "20220914", "20220915", "20220916", "20220919", "20220920", "20220921", "20220922", "20220923", "20220926", "20220927", "20220928", "20220929", "20220930", "20221010", "20221011", "20221012", "20221013", "20221014", "20221017", "20221018", "20221019", "20221020", "20221021", "20221024", "20221025", "20221026", "20221027", "20221028", "20221031", "20221101", "20221102", "20221103", "20221104", "20221107", "20221108", "20221109", "20221110", "20221111", "20221114", "20221115", "20221116", "20221117", "20221118", "20221121", "20221122"],
		axisTick: {//决定是否显示坐标刻度  
				alignWithLabel: true,
				show:false
		},
		axisLabel:{  //决定是否显示数据  
				show:false
		},
		axisLine: {
			show:true,
			lineStyle: {
				color:'#ccc'  ,//Y轴颜色
			},
		},
    
  },
  yAxis: {
    type: 'value',
		splitLine: {
			show:true,     //y网格线
			lineStyle:{
				color: '#ccc',
				type: 'dashed' // y轴分割线类型
			}
		},
		axisLine: {
			show:true,
			lineStyle: {
				color:'#ccc'  ,//Y轴颜色
			},
		},
		axisLabel: {
			show: true,
			textStyle: {
				color:"#333"  //刻度字体颜色
			}
		},
  },
  series: [
    {
      name: '',
      type: 'line',
      smooth: true,
			symbol: 'circle',     //设定为实心点
  		lineStyle:{
  				normal:{
  						color:'red',//折线的颜色
  						width:'2'//折线粗细
  				}
  		},
      // prettier-ignore
			itemStyle:{
				normal:{
						color:'red',//拐点颜色
						borderColor:'red',//拐点边框颜色
						borderWidth:3//拐点边框大小
				},
				emphasis: {          //突出效果配置(鼠标置于拐点上时)
						borderColor: '#c00',    //  拐点边框颜色
						borderWidth: 2,         //  拐点边框宽度
						shadowColor: '#c00', //  阴影颜色
						shadowBlur: 3,          //  阴影渐变范围控制
						color: 'red'//hover拐点颜色定义
				},
			},
			symbolSize: 2,   //设定实心点的大小
      data: [1, 1.0062, 1.0156, 0.9958, 1.0124, 1.0373, 1.0312, 1.0313, 1.0478, 1.0546, 1.0568, 1.0556, 1.064, 1.0666, 1.1081, 1.1071, 1.1089, 1.1093, 1.1078, 1.1116, 1.1012, 1.1062, 1.0985, 1.1258, 1.1314, 1.1554, 1.1482, 1.1339, 1.1373, 1.1129, 1.1081, 1.0954, 1.0943, 1.1038, 1.1143, 1.0948, 1.0745, 1.0916, 1.1458, 1.1647, 1.176, 1.1819, 1.1938, 1.2146, 1.2566, 1.2495, 1.2491, 1.2282, 1.2224, 1.2223, 1.2493, 1.2611, 1.269, 1.2544, 1.227, 1.2135, 1.1982, 1.1839, 1.1459, 1.1434],
    }
  ]
};