当前位置:   article > 正文

Vue框架学习3:echarts导入_echarts怎么导入数据

echarts怎么导入数据

完成基本的Vue框架搭建后,网站数据可视化也是学习的重要一环,本文主要是阐述如何在Vue中导入echarts。正确的学习打开方式应该是参照官网进行学习,但是官网的导入是针对html页面,对于如何导入vue还需要做一些小幅度修改。

echarts官网链接:获取 ECharts - 入门篇 - Handbook - Apache ECharts

第一步,获取Echarts。在项目终端运行以下命令:

npm install echarts --save

tips: 在我的项目运行环境中并没有权限安装库,解决这个问题需要以管理员权限运行cmd,进入项目目录,再运行上述命令。

第二步,导入Echarts。

官网中的导入方式主要是针对html文档页面,针对vue文件,主要包括以下几步:

1. 首先在main.js中输入以下代码:

  1. import * as echarts from 'echarts' //导入echarts
  2. Vue.prototype.$echarts = echarts //挂载echarts

2. 进入需要导入图表的页面文件.vue中

2.1 设置挂载对象(<template>中)

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

2.2 声明函数(export default中,与data() ,method()同级)

  1. mounted() {
  2. this.initChart()
  3. },

2.3 初始化挂载对象(在method()中进行函数定义)

  1. initChart() {
  2. var Chart = this.$echarts.init(document.getElementById('chart'))
  3. var option = {
  4. title: { text: 'ECharts 入门示例', subtext: '', x: 'center' },
  5. tooltip: {},
  6. xAxis: {
  7. data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  8. },
  9. yAxis: {},
  10. series: [
  11. {
  12. name: '销量',
  13. type: 'bar',
  14. data: [5, 20, 36, 10, 10, 20]
  15. }
  16. ]
  17. } // 根据需要填充
  18. Chart.setOption(option)
  19. },

按上述设置完成后,根据需要在echarts官网复制对应option即可。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/769420
推荐阅读
相关标签
  

闽ICP备14008679号