当前位置：首页 > article >正文

echarts图折线图的一些修改，改变分割线颜色或者虚实，改变数据轴背景颜色渐变，改变折线图的圆点，折线图的平滑还是折直线

article 2025/3/4 12:52:24

1.分割线颜色以及虚实

yAxis: [{
type: "value",

                       axisLine: {
                           lineStyle: {
                               color: "#57617B",
                           },
                       },
                       axisLabel: {
                           margin: 10,
                           textStyle: {
                               fontSize: 14,
                           },
                       },
                       splitLine: {
                           lineStyle: {
                               color: 'rgba(128, 128, 128, 0.5)', // 灰色并且半透明 (R,G,B,透明度)
                               type: 'dashed', // 设置为虚线
                               width: 1 // 如果需要，可以指定线宽
                           },
                       },
                   }, ],

2.折现有个背景颜色来勾勒区域，渐变以优化图表

   series: [{
                           name: "11",
                           type: "line",
                           smooth: true,
                           symbol: "circle",
                           symbolSize: 5,
                           showSymbol: false,
                           lineStyle: {
                               normal: {
                                   width: 1,
                               },
                           },
                           areaStyle: {
                               normal: {
                                   color: new echarts.graphic.LinearGradient(
                                       0,
                                       0,
                                       0,
                                       1,
                                       [{
                                               offset: 0,
                                               color: "rgba(68, 107, 239, 0.9)",
                                           },
                                           {
                                               offset: 0.8,
                                               color: "rgba(253, 254, 255, 0.3)",
                                           },
                                       ],
                                       false
                                   ),
                                   shadowColor: "rgba(0, 0, 0, 0.1)",
                                   shadowBlur: 10,
                               },
                           },
                           itemStyle: {
                               normal: {
                                   color: "rgba(68, 107, 239, 0.9)",
                                   borderColor: "rgba(253, 254, 255, 0.3)",
                                   borderWidth: 12,
                               },
                           },
                           data: [220, 182, 191, 134, 150, 120],
                       },

3.圆点显隐，大小，折线是否平滑，series里面改

    smooth: true,//是否平滑
                           symbol: "circle",//圆点还是什么形状
                           symbolSize: 5,//大小
                           showSymbol: false,//是否显示圆点

456敬请期待