折線圖

var xData = [0, 1, 2, 3, 4, 5]; 
var xDatas = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6]; 
var yData = [250, 200, 170, 150, 125, 230];

option = {
  title: {
    text: '折線圖示例'
  },
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '10%',
    right: '10%',
    bottom: '15%'
  },
  xAxis: {
    type: 'category',
    name: 'α',
    nameLocation: 'center',
    nameGap: 30,
    data: xDatas,
    max: 5,
    axisTick: {
      alignWithLabel: true
    },
    axisLine: {
      lineStyle: {
        width: 3 // 底部軸線加粗
      }
    },
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    name: '信號測量數(shù)量 M',
    nameTextStyle: {
      fontStyle: 'italic',
      fontFamily: 'Romal'
    },
    nameLocation: 'center',
    nameGap: 50,
    mix: 0,
    max: 300, // 設(shè)置 Y 軸最大值為 300
    axisLine: {
      show: true,
      lineStyle: {
        width: 2 // 左側(cè)軸線加粗
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'solid',
        color: '#000'
      }
    }
  },
  series: [
    {
      data: yData,
      type: 'line',
      smooth: false,
      label: {
        show: true,
        position: 'top',
        formatter: '{c}',
        fontWeight: 'bold',
        fontSize: 12
      },
      itemStyle: {
        color: function (params) {
          return params.dataIndex === 4 ? 'red' : 'blue';
        }
      },
      lineStyle: {
        color: 'blue'
      },
      markLine: {
        silent: true,
        symbol: 'none',
        label: { show: false },
        data: xData.map((x) => {
          return {
            xAxis: x,
            lineStyle: {
              type: 'solid',
              color: '#000',
              width: 1
            }
          };
        })
      }
    }
  ]
};

1901.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容