[vue]封装echarts组件并使用

Statistic

常年接触前端的小伙伴一定离不开要做一些数据采集并展示的活，elementui提供的展示方法简单粗暴--那就是## Statistic（统计数值组件）

这样的方法虽然直观，但比较单一。

echarts

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

官方网站：echarts.apache.org/zh/index.ht…

官方文档提供了详尽的示例

并且每个示例提供了代码样例可供在线编辑与查看：

应用

下面我们尝试在项目中封装一个饼状图（category）组件

  <div>
    <div ref="charts" id="chart"></div>
  </div>
</template>
  
<script>
import * as echarts from 'echarts';



export default {
  name: 'EchartsComponent',

  props: {
    getDataUrl: String
  },
  data() {
    return {
      dataList: [],
      myChart: null

    }
  },

  methods: {
    getData(value) {
      this.$http.get(
        this.getDataUrl,
        {
          params: {
            type: 'category'
          }
        }
      ).then(({ data: res }) => {
        if (res.code !== 0) {
          this.dataList = []
          return this.$message.error(res.msg)
        }
        this.dataList = Object.entries(res.data).map(([name, value]) => ({ name, value }))
        this.myChart.setOption({
          xAxis: {
            data: this.dataList.name
          },
          series: {
            data: this.dataList.value
          }
        })

      }).catch((e) => {
        console.log(e)
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.myChart = echarts.init(this.$refs.charts)
      this.myChart.setOption({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      })
    })
    this.getData()

  }
}


</script>
  
<style scoped>
#chart {
  width: auto;
  height: 250px;
}

</style>
  

解释一下上面这段代码： 首先我们需要创造一个div用于echarts的绘制，并给予一个ref值便于获取该对象：

<div ref="charts" id="chart"></div>

第二步在mounted钩子中新建一个mycharts对象并初始化，注意mycharts对象需要放在data中便于全局使用（在获取数据的方法中使用）：

mounted() {
//在页面加载完成后进行
    this.$nextTick(() => {
      this.myChart = echarts.init(this.$refs.charts)
      this.myChart.setOption({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      })
    })
    this.getData()

  }

第三步写获取数据的方法，调用后端接口获取真实数据：

    getData(value) {
      this.$http.get(
        this.getDataUrl,
        {
          params: {
            type: 'category'
          }
        }
      ).then(({ data: res }) => {
        if (res.code !== 0) {
          this.dataList = []
          return this.$message.error(res.msg)
        }
        this.dataList = Object.entries(res.data).map(([name, value]) => ({ name, value }))
        this.myChart.setOption({
          xAxis: {
            data: this.dataList.name
          },
          series: {
            data: this.dataList.value
          }
        })

      }).catch((e) => {
        console.log(e)
      })
    }
  },

（请注意，this.$http项目中封装的全局变量用于发送数据，本质是调用axios）

组件的封装到此基本完成，父组件传入getDataUrl属性即可获取不同的数据用于展示，只要返回的数据遵从样例中的格式即可

tips

还有两个要注意的点： 用于绘制echarts的div必须有一个宽度或高度，否则div会塌缩无法正常绘制 另外项目需要安装echarts组件并引入 安装方法见官网文档，对不同版本的nodejs有不同的方法（需要注意你项目的nodejs和npm版本）