1. 程式人生 > 其它 >echarts學習心得

echarts學習心得

  1. 關於tooltipd 提示文字的使用.
    單條提示
    在這裡插入圖片描述
 tooltip: {                           
  trigger: "axis",//觸發型別;軸觸發,axis則滑鼠hover到一條柱狀圖顯示全部資料,item則滑鼠hover到折線點顯示相應資料,                            
  backgroundColor: "#fff",//背景                            
  borderWidth: "1", //邊框寬度設定1 邊框要記住寫寬度
  borderColor:
'rgba(204, 204, 204, 1)',//邊框顏色 textStyle: { //字型樣式設定 color: "#000", }, },

多條提示
在這裡插入圖片描述

  tooltip: {                           
   trigger: "axis",                            
   backgroundColor: "#fff"
, borderWidth: "1", //邊框寬度設定1 borderColor:'rgba(204, 204, 204, 1)', textStyle: { color: "#000", },
formatter: "{a0}: {c0} <br/>{a1}: {c1} <br/>{a2}: {c2} <br/>{a3}: {c3} ", //格式設定 // 折線/區域/柱狀/條形/圖: a(系列名稱),b(類目值),c(數值), d(無) 單條格式可直接寫成 {a}:{c} },
  1. 關於y軸 座標及y軸頂部文字的使用
    在這裡插入圖片描述
yAxis: [                          
  {                              
   min: 0, //初始值                            
   max: 120,//終止值                            
   interval: 20,    //間隔
   name: "(筆)", //命名
   nameTextStyle: { //文字樣式
   padding: 10, //內邊距                                    
   fontSize: 16,                               
    },                                                       },                        ],

3.關於多條柱狀圖中間間隔問題使用
在這裡插入圖片描述

 yAxis: [                            
 {
 ~~~~~~~                                                         
  },                               
   barGap: "0%",  //同類目直接在     yAxis設定 barGap                    

},    ],