1. 程式人生 > >echarts改變折線圖和折線點的顏色

echarts改變折線圖和折線點的顏色

最近在做echart,每次更新一點,記錄一點完成之後方便進行大的總結

//(1)改變折線點和折線的顏色

series: [
    {
      name: "溫度",//滑鼠放在折線點上顯示的名稱
      type: "line",//折線圖
      symbol: 'circle',//折線點設定為實心點
      symbolSize: 4,   //折線點的大小
      itemStyle: {
         normal: {
           color: "#386db3",//折線點的顏色
           lineStyle: {
           color: "#386db3"//折線的顏色
          }
        }
     },
]
//(2)改變x軸y軸的顏色以及寬度

xAxis: [{
        gridIndex: 0,
        type: "category",
        data: xdata,
        axisLine: {
            lineStyle:{
                color:'#272729',//x軸的顏色
                width:8,//軸線的寬度
            }
        },
    }],
yAxis: [
    axisLine: {
       lineStyle:{
          color:'#272729',// y軸的顏色
          width:8,//y軸線的寬度
    }
}],
// (3)改變座標值的顏色

axisLabel: {
      show: true,
      textStyle: {
         color: '#fff'
       }
}
(4)legend

新增legend的時候,必須是series中name的名字和legend中字型的內容是一致的才能顯示

legend的顏色是在option裡面直接定義的color陣列,有幾個圖例就在color裡面寫幾個顏色值。

 legend: {
            color:['#4472C5'],
            data:['最近七天噴淋主泵出口壓力'],
            textStyle:{//圖例文字的樣式
                color:'#fff',
                fontSize:16
            }
  },
 series: [
          {
            type: 'line',
            valueAxisIndex: 0,
            name: "最近七天噴淋主泵出口壓力"
          }
         ]