Echarts折线图样式修改(拐点大小,拐点边框大小及颜色,hover拐点内填充颜色等)

叁歲伎倆 2023-09-23 16:13 13阅读 0赞

![0ac60f348d454cdd9a386e5d67803af5.jpeg][]

![56bf2784ce6749ed83e6c8c5efc89478.jpeg][]

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],
        }
      ]
    };

[0ac60f348d454cdd9a386e5d67803af5.jpeg]: https://img-blog.csdnimg.cn/0ac60f348d454cdd9a386e5d67803af5.jpeg
[56bf2784ce6749ed83e6c8c5efc89478.jpeg]: https://img-blog.csdnimg.cn/56bf2784ce6749ed83e6c8c5efc89478.jpeg