1.改變折線點和折線的顏色

  series: [
    {
      name: '一周降雨量變化',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      symbol: 'circle', //折線點設(shè)置為實心點
      symbolSize: 6, //折線點的大小
      itemStyle: {
        normal: {
          color, //折線點的顏色
          borderColor: '#ffffff', //拐點邊框顏色
          borderWidth: 2, //拐點邊框大小
        },
      },
      lineStyle: {
        color, //折線的顏色
      },
      areaStyle: {
        //區(qū)域背景色
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color,
            },
            {
              offset: 1,
              color: 'rgba(47,196,154,0.01)',
            },
          ],
          global: false,
        },
      },
    },
  ]

2. 改變x軸y軸的顏色以及寬度

xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLine: {
      lineStyle: {
        color: '#272729', //x軸的顏色
        width: 8, //軸線的寬度
      },
    },
  },

3. 改變坐標值的顏色

  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLabel: {
      show: true,
      textStyle: {
        color: '#ff0000',
      },
    },
  },

4. legend

添加legend的時候，必須是series中name的名字和legend中字體的內(nèi)容是一致的才能顯示

legend的顏色是在option里面直接定義的color數(shù)組，有幾個圖例就在color里面寫幾個顏色值。

  legend: {
    color: ['#4472C5'],
    data: ['一周降雨量變化'],
    textStyle: {
      //圖例文字的樣式
      color: 'gray',
      fontSize: 16,
    },
  },
      
   series: [
    {
      name: '一周降雨量變化',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
    },
  ],

完整options

const color = '#2fc49a';
const option = {
  legend: {
    color: ['#4472C5'],
    data: ['一周降雨量變化'],
    textStyle: {
      //圖例文字的樣式
      color: 'gray',
      fontSize: 16,
    },
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLine: {
      lineStyle: {
        color: '#272729', //x軸的顏色
        width: 8, //軸線的寬度
      },
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#ff0000',
      },
    },
  },
  yAxis: {
    type: 'value',
    axisLine: {
      lineStyle: {
        color: '#272729', // y軸的顏色
        width: 8, //y軸線的寬度
      },
    },
  },
  series: [
    {
      name: '一周降雨量變化',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      symbol: 'circle', //折線點設(shè)置為實心點
      symbolSize: 6, //折線點的大小
      itemStyle: {
        normal: {
          color, //折線點的顏色
          borderColor: '#ffffff', //拐點邊框顏色
          borderWidth: 2, //拐點邊框大小
        },
      },
      lineStyle: {
        color, //折線的顏色
      },
      areaStyle: {
        //區(qū)域背景色
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color,
            },
            {
              offset: 1,
              color: 'rgba(47,196,154,0.01)',
            },
          ],
          global: false,
        },
      },
    },
  ],
};

文章來源地址http://www.zghlxwxcb.cn/news/detail-699380.html

到了這里，關(guān)于echarts改變折線圖和折線點的顏色、改變x軸y軸的顏色以及寬度、改變坐標值的顏色、設(shè)置legend的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！