折线点和折线颜色

  1. itemStyle: {
  2.   normal: {
  3.     color: "#386db3",//折线点的颜色
  4.       lineStyle: {
  5.         color: "#386db3"//折线的颜色
  6.       }
  7.   }
  8. }

渐变效果:

image.png

  1. import echarts from 'echarts' // 需引入
  3. ...
  6. series: [
  7.           {
  8.             name: '行业一',
  9.             type: 'line',
  10.             stack: 'Total',
  11.             smooth: true,
  12.             itemStyle: {
  13.                 normal: {
  14.                     color: 'rgb(255, 0, 135)',// 折线点颜色
  15.                     lineStyle: {
  16.                         color: 'rgb(255, 0, 135)',// 折线颜色
  17.                     }
  18.                 }
  19.             },
  20.             areaStyle: {
  21.                 opacity: 0.8,
  22.                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  23.                     {
  24.                         offset: 0,
  25.                         color: 'rgb(255, 0, 135)'
  26.                     },
  27.                     {
  28.                         offset: 1,
  29.                         color: 'rgb(135, 0, 135)'
  30.                     }
  31.                 ])
  32.             },
  33.             data: [120, 132, 101, 134, 90, 230, 210]
  34.           },
  35.           {
  36.             name: '行业二',
  37.             type: 'line',
  38.             stack: 'Total',
  39.             smooth: true,
  40.             itemStyle: {
  41.                 normal: {
  42.                     color: 'rgb(128, 255, 165)',
  43.                     lineStyle: {
  44.                         color: 'rgb(128, 255, 165)',
  45.                     }
  46.                 }
  47.             },
  48.             areaStyle: {
  49.                 opacity: 0.8,
  50.                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  51.                     {
  52.                         offset: 0,
  53.                         color: 'rgb(128, 255, 165)'
  54.                     },
  55.                     {
  56.                         offset: 1,
  57.                         color: 'rgb(1, 191, 236)'
  58.                     }
  59.                 ])
  60.             },
  61.             data: [220, 182, 191, 234, 290, 330, 310]
  62.           },
  63.           {
  64.             name: '行业三',
  65.             type: 'line',
  66.             stack: 'Total',
  67.             smooth: true,
  68.             itemStyle: {
  69.                 normal: {
  70.                     color: 'rgb(55, 162, 255)',
  71.                     lineStyle: {
  72.                         color: 'rgb(55, 162, 255)',
  73.                     }
  74.                 }
  75.             },
  76.             areaStyle: {
  77.                 opacity: 0.8,
  78.                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  79.                     {
  80.                         offset: 0,
  81.                         color: 'rgb(55, 162, 255)'
  82.                     },
  83.                     {
  84.                         offset: 1,
  85.                         color: 'rgb(116, 21, 219)'
  86.                     }
  87.                 ])
  88.             },
  89.             data: [820, 932, 901, 934, 1290, 1330, 132]
  90.           }
  91.         ]
  2. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // 关键点方法
  3.                     {
  4.                         offset: 0,
  5.                         color: 'rgb(128, 255, 165)'
  6.                     },
  7.                     {
  8.                         offset: 1,
  9.                         color: 'rgb(1, 191, 236)'
  10.                     }
  11.                 ]) // 数组, 用于配置颜色的渐变过程. 
  12.                    // 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1,
  13.                    // 用于表示位置

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始