NUXT 中使用 Echarts
2019-09-24 15:23
316 查看
一、安装echarts依赖包
npm install echarts --save
二、在plugins目录下创建echarts.js文件并在里面引入echarts依赖包
import Vue from 'vue' import echarts from 'echarts' // 引入echarts Vue.prototype.$echarts = echarts // 引入组件(将echarts注册为全局)
三、在nuxt.config.js配置文件中引入我们刚刚创建的echart.js
// 配置插件 plugins: ['~plugins/iview', '~plugins/echarts'],
四、使用
<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>
END
觉得有帮助的小伙伴点个赞支持一下~
相关文章推荐
- Thinkphp 与Echarts-php 使用
- 百度Echarts的使用
- ECharts使用心得
- 使用echarts动态加载数据
- ECharts官方教程(三)【在webpack中使用 ECharts】
- 使用echarts完成饼图展示
- Echarts的使用1-简单饼图
- wepy 小程序 echarts 搭配使用
- 关于Echarts的学习使用方法的建议
- 关于echarts使用的常见问题总结
- 在MSTR中使用ECharts作为VI模板(1)-- 创建第一个ECharts的VI模板
- 在vue-cli项目中使用echarts
- ECharts官方教程(十四)【使用 Canvas 或者 SVG 渲染】
- Echarts-java使用
- 使用百度图表ECharts
- react中使用echarts
- echarts图表工具的使用
- Echarts使用教程——模块化单文件引入(推荐)
- Nuxt 安装及简单使用