笔记-数据可视化(ECharts)

ECharts使用步骤

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

基础配置

布局方案 flexble + rem

• 使用less 需要安装 easyless 插件
• 设计稿是1920px
  1. flexble.js 把屏幕分成24等分
  2. cssrem 插件的基准值为80px
     插件 - 配置按钮 - 配置扩展设置 - Root Font Size里面设置
     需要重启vscode 生效。
• 引入外部字体

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

transfrom的坑

• 如果元素本体和动画都用到了transfrom属性，则将transfrom属性写在@keyframs中，不可以有两个transfrom同时出现。

图表自适应

1. 监听window的resize事件
2. 在监听后的回调函数中 出发 echarts实力的resize方法即可

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

使用函数给每个柱子设置颜色

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

X，Y轴层叠关系

• xAxisIndex:0 | 1 | 2 ... 用来设置X轴的层叠
• yAxisIndex:0 | 1 | 2 ... 用来设置Y轴的层叠

饼图

• 设置饼图大小 series中的radius属性 ['内圆大小',‘外圆大小’]
• 设置饼图的位置 series中的center属性 [X轴偏移,Y轴偏移]