数据的可视化对于数据型网站来说是非常必要的存在，它不仅能让人们更直观的看到数据间的变化。更能省却在数据整理上的时间，因此将数据可视化处理成了数据型网站不可缺少的功能之一。

既然数据的可视化占据着如此重要的地位，那么在前端开发中我们要如何使用呢？

本文介绍前端开发在nuxt项目中基于ECharts数据可视化图标库来完成对单页面的数据图表化处理

ECharts安装及操作流程如下：

    1、使用npm安装echarts

npm install echarts

更多其余安装及配置参数，可前往Echarts官网查看“点击前往”。

    2、echarts在单页面中的引入及使用。

//template
<div ref="chart" style="width:400px; height:400px;"></div>
//script
import * as echarts from 'echarts'
export default {
    data() {
      return {
        chart:null,
        option:{
		  xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		  },
		  yAxis: {
			type: 'value'
		  },
		  series: [
			{
			  data: [130, 220, 214, 118, 235, 137, 220],
			  type: 'line'
			}
		  ]
		}
      }
    },
    created() {},
    mounted() {
      this.initChart()
    },
    methods:{
      initChart() {
         this.chart = echarts.init(this.$refs.chart)
         this.chart.setOption(this.option)
      }
    }
}

以上便是关于echarts在单页面中应用流程，如果需要将echarts注册为全局，每个页面中不单独调用echarts。可在本站搜索“nuxt项目中全局注册echarts并使用步骤详解”查看详细操作流程。