ECharts使用步驟

• 下載 https://www.echartsjs.com/zh/download.html

基礎(chǔ)配置

布局方案 flexble + rem

• 使用less 需要安裝 easyless 插件
• 設(shè)計稿是1920px
  1. flexble.js 把屏幕分成24等分
  2. cssrem 插件的基準值為80px
     插件 - 配置按鈕 - 配置擴展設(shè)置 - Root Font Size里面設(shè)置
     需要重啟vscode 生效。
• 引入外部字體

// 引入方式
@font-face{
  font-family:"xxxx"
  src:url("xxx.ttf")
}
// 使用方式
h3{
  font-family:'xxx'
}

transfrom的坑

• 如果元素本體和動畫都用到了transfrom屬性，則將transfrom屬性寫在@keyframs中，不可以有兩個transfrom同時出現(xiàn)。

圖表自適應(yīng)

1. 監(jiān)聽window的resize事件
2. 在監(jiān)聽后的回調(diào)函數(shù)中 出發(fā) echarts實力的resize方法即可

window.addEventListener('resize',()=>{
    mychart.resize()
})

使用函數(shù)給每個柱子設(shè)置顏色

let myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"]
itemStyle:{
  color:function(params){
    // 只需要將具體的顏色值返回出去即可
    // dataIndex表示當前柱子的下標
    return myColor[parmas.dataIndex]
  }
}

X，Y軸層疊關(guān)系

• xAxisIndex:0 | 1 | 2 ... 用來設(shè)置X軸的層疊
• yAxisIndex:0 | 1 | 2 ... 用來設(shè)置Y軸的層疊

餅圖

• 設(shè)置餅圖大小 series中的radius屬性 ['內(nèi)圓大小',‘外圓大小’]
• 設(shè)置餅圖的位置 series中的center屬性 [X軸偏移,Y軸偏移]