Echarts折线图设置线条颜色及线条以下代码示例，

Echarts折线图设置线条颜色及线条以下代码示例，

目录

• 一、展示效果
• 二、设置折线颜色
• 三、设置折线拐点大小
• 三、设置折线拐点颜色（hover折现点颜色）
• 四、设置折线渐变颜色
• 总结

一、展示效果

二、设置折线颜色

在series中，设置lineStyle属性。

lineStyle: {
                color: '#556FFD'   
              },

三、设置折线拐点大小

在series中使用symbol属性、symbolSize属性

  symbol: 'circle', // 拐点的形状
  symbolSize: 6, // 拐点大小

三、设置折线拐点颜色（hover折现点颜色）

 在series中，使用itemStyle属性、emphasis属性。

 itemStyle: {
     // 设置线条上点的颜色（和图例的颜色）
    normal: {
    color: '#556FFD',
      },
   },
  emphasis: {
    // 鼠标hover上去的时候，拐点的颜色和样式
     itemStyle: {
     color: '#556FFD', // 颜色
     borderColor: '#556FFD', // 图形的描边颜色
     borderWidth: 1 // 描边的线宽
         }
    },

四、设置折线渐变颜色

在series中，使用areaStyle属性。

     areaStyle: {
       color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [  // 渐变颜色
         {
          offset: 0,
          color: 'rgba(85,111,253,0.50)',
           },
         {
          offset: 1,
          color: 'rgba(85,111,253,0.00)',
            },
        ],
         global: false,
        },
     },

总结

到此这篇关于Echarts折线图设置线条颜色及线条以下区域渐变颜色的文章就介绍到这了,更多相关Echarts折线图设置线条颜色内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程！

您可能感兴趣的文章:

• jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
• echarts折线图每段显示不同的颜色的实现