再谈Echarts

失踪了半年的前端实习生又回来了，想转行没转成重操老手艺~~~

今天组长新分了一个需求，以前只粗略了解Echarts，第一次在实际开发中使用。

1.Echarts介绍：

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

官网链接  Apache Echarts

2.Echarts使用：

2.1  申明变量

onMounted(() => {
state.charts.validTasksTotal = echarts.init(document.getElementById('validTasksTotal'))
})
//

首先在组件挂载之前创建一个id，init方法初始化。

2.2 引入配置项

在初始化之后需要将配置项放进容器里，官网给的示例很简单，但在实际开发中需要考虑多种情况，如重叠显示，鼠标悬停浮窗显示，更改颜色等。并且，我们的数据并不是写死的，而是每次调接口。因此可以将数据封装成一个方法，将data拿到作为参数传给方法。

// 图标 有效任务
      state.charts.validTasksTotal = echarts.init(document.getElementById('validTasksTotal'))

//接上述代码,封装好的方法在onMounted中调用一次
onMounted(() => {
initMethods()
})

function initMethods() {
const option = {
}//涉及业务代码，不便展示
      };

option中想要鼠标悬停时展示详细数据，可以用到tooltip组件，tooltip中使用formatter方法，如下所示：

tooltip: {
         
          formatter: function (val) {
            return `
              console.log(111)
//做示范，鼠标悬停时控制台打印111，实际开发中可以再次封装函数调用
             `
          }
        },

2.3 传入配置项

state.charts.validTasksTotal.setOption(option)

2.4 封装函数

在步骤2.1中提到封装了一个函数，把数据放进函数中，首先声明变量，我们需要的横纵坐标

function initMethods () {
    const {X = [], Y = []} = getData()
    const option = {X,Y}// 这里是我们要进行配置的对象，数据来源自getData
}

const getData = (list = res) => {
    const X= []
    const Y = []
//横纵坐标为数组,这里最好用forEach而不是map循环

    list.forEach((item, index) => {
        X.push({
          value: item.filledInCount,
          total: item.validCount,
          
        })
        Y.push({
          value: item.unFilledInCount,
          total: item.validCount
        })
      })
//最后，需要将横纵坐标数据返回出去
      return {
        X，
        Y
      }

2.5 在div标签中使用

<div id="validTasksTotal" style="margin-left: 80px;"></div>
//用id选择器

如果遇到数据发生变化需要重新更新图标，这时候可以使用vue3中的监视属性，每次数据发生变化就会调用一次initMethod方法将新数据传进去

watch(() => data,() => {initMethod()}

补充：我在实际开发中想要每次鼠标移入时展示当前同类的所有数据，Echarts官方文档中有一个formatter函数，但想要关联两个表无法做到，我的解决办法是拿到申明的id，使用.on('mouseover',function (val){xxx}对图表进行操作，这样即可在鼠标悬停时实时显示数据，今天的分享就到这里~~~