只须要三步就搞定javascript
第一步:安装echarts所需的依赖包vue
npm install echarts --save
第二步:在plugins目录下建立echarts.js文件并在里面引入echarts依赖包java
import Vue from 'vue' import echarts from 'echarts' // 引入echarts Vue.prototype.$echarts = echarts // 引入组件(将echarts注册为全局)
第三步:在nuxt.config.js配置文件中引入咱们刚刚建立的echart.jsnpm
// 配置插件 plugins: ['~plugins/iview', '~plugins/echarts'],
以上就是须要配置的步骤,下面咱们来看看效果echarts
我在components目录下建立了一个组件less
<template> <div id="echarts"> <div id="myChart"></div> <div id="myChart2"></div> </div> </template> <script type="text/javascript"> export default { name: 'Echarts', data () { return {} }, methods: { echartsInit () { // 找到容器 let myChart = this.$echarts.init(document.getElementById('myChart')) // 开始渲染 myChart.setOption({ title: {text: '在Vue中使用echarts'}, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }) }, echartsInit2 () { let myChart = this.$echarts.init(document.getElementById('myChart2')) myChart.setOption({ title: {text: 'echarts 饼图'}, series: [ { name: '访问来源', type: 'pie', radius: '55%', data: [ {value: 235, name: '视频广告'}, {value: 274, name: '联盟广告'}, {value: 310, name: '邮件营销'}, {value: 335, name: '直接访问'}, {value: 400, name: '搜索引擎'} ] } ] }) } }, mounted () { this.echartsInit() this.echartsInit2() } } </script> <style scoped lang="less"> #myChart{ width: 600px; height: 300px; margin-left: auto; margin-right: auto; float: left; } #myChart2{ width: 600px; height: 300px; margin-left: auto; margin-right: auto; float: right; } </style>
在pages下的index.vue引入组件就能够看到效果了iview
到这里,你就能够为所欲为的使用echarts了,写的很差,望各位见谅!this