ECharts可以说是数据可视化图表库，基于ECharts创建的各类可视化图标在网站中随处可见。

那么关于ECharts在nuxt项目中我们要如何使用，本文简要介绍在nuxt中如何安装及使用ECharts可视化图表库。

nuxt中ECharts使用流程如下：

    1、使用npm安装echarts

npm install echarts

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

    2、plugins目录下创建echarts.js文件

import Vue from 'vue'
import * as echarts from 'echarts' // 引入echarts
Vue.prototype.$echarts = echarts // 引入组件（将echarts注册为全局）

    3、在nuxt.config.js中plugins引入echarts.js

plugins: [
    {src: '~plugins/echarts.js'}
]

    4、页面中应用echarts

//template
<div ref="chart" style="width:60%; height:400px;"></div>
//script
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 = this.$echarts.init(this.$refs.chart)
         this.chart.setOption(this.option)
      }
    }
}

以上便是关于echarts在nuxt项目中注册为全局并使用的步骤流程，如果你仅仅只是单页面中使用echarts可以本站搜索“nuxt项目中单页面中使用echarts步骤流程”，查看安装及详细步骤流程。