Vue项目9：Vue Cli项目使用echarts可视化

Vue Cli项目使用echarts可视化有两种方式：一、直接引入echarts 二、使用vue-ehcarts。

一、直接引入echarts

1.创建Vue Cli项目

进入cmd命令行，输入如下命令：

C:\Users\Administrator>f:F:\>cd F:\Study\vue\testF:\Study\vue\test>vue init webpack vueandecharts? Project name vueandecharts
? Project description A Vue.js project
? Author xxx <xxx@xxx.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npmvue-cli · Generated "vueandecharts".# Installing project dependencies ...
...省略部分输出...
# ========================
# Project initialization finished!
# ========================To get started:cd vueandechartsnpm run devDocumentation can be found at https://vuejs-templates.github.io/webpack

切换到工程目录

cd vueandecharts

2.安装echarts

cnpm install echarts -S

3.引入echarts

1）用vscode打开工程文件夹

2）修改main.js

引入echarts

import echarts from 'echarts'Vue.prototype.$echarts = echarts

3）新建EchartsTest.vue文件

在src\components目录下新建EchartsTest.vue文件，代码如下：

<template><div id="myChart"></div>
</template><script>
export default {name: 'EchartsTest',mounted(){this.drawLine();},methods:{drawLine(){// 基于准备好的dom，初始化echarts实例let myChart = this.$echarts.init(document.getElementById('myChart'))// 绘制图表myChart.setOption({title: { text: '在Vue项目中使用echarts'},tooltip: {},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'line',data:  [5, 20, 36, 10, 10, 20],smooth: true}]});}}}
</script><style scoped>#myChart{width: 500px;height: 300px;}
</style>

4）修改App.vue

在<script></script>中引入EchartsTest组件，在<template>的div里使用<EchartsTest/>组件，App.vue完整代码如下：

<template><div id="app"><!-- <img src="./assets/logo.png"><HelloWorld/> --><EchartsTest/></div>
</template><script>
import HelloWorld from './components/HelloWorld'
import EchartsTest from './components/EchartsTest'export default {name: 'App',components: {HelloWorld, EchartsTest}
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

4.运行项目

cmd命令行输入如下命令

npm run dev

查看浏览器

二、使用vue-ehcarts

1.安装vue-echarts

打开cmd命令窗口，切换到vue-cli工程目录，执行如下命令安装

cnpm install vue-echarts --save

2.引入vue-echarts

修改main.js，添加如下语句

import ECharts from 'vue-echarts/components/ECharts'
Vue.component('chart', ECharts)

新建VueEchartsTest.vue

在src\components目录下新建VueEchartsTest.vue，代码如下：

<template><div><chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart></div>
</template><script>export default {name: 'VueEchartsTest',data () {return {orgOptions: {},}},mounted(){this.orgOptions = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},yAxis: {type: 'value',},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true}]}}}
</script><style scoped></style>

3. 使用VueEchartsTest组件

修改App.vue

在<script></script>里添加

import VueEchartsTest from './components/VueEchartsTest'

在export default的components添加VueEchartsTest

  components: {HelloWorld, EchartsTest, VueEchartsTest}

在template的div里添加显示<VueEchartsTest/>

<template><div id="app"><EchartsTest/><VueEchartsTest/></div>
</template>

App.vue完整代码如下：

<template><div id="app"><EchartsTest/><VueEchartsTest/></div>
</template><script>
import HelloWorld from './components/HelloWorld'
import EchartsTest from './components/EchartsTest'
import VueEchartsTest from './components/VueEchartsTest'export default {name: 'App',components: {HelloWorld, EchartsTest, VueEchartsTest}
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

启动项目

npm run dev

浏览器效果如下：

参考：

https://www.jianshu.com/p/cf0a54374419

https://segmentfault.com/a/1190000015453413

完成！ enjoy it！

Vue项目9：Vue Cli项目使用echarts可视化相关推荐

vue cli 项目在打包时候报错 API fatal error handler returned after process out of memory
问题描述 vue cli 项目在打包时候报错:API fatal error handler returned after process out of memory. 问题分析从给出的提示可以看出 ...
Vue Cli 项目结构简述
webnode_modules --Vue Cli 项目以来的js模块全放到这里public --存放静态资源存放自己的js cssfavicon.ico -- 浏览器小图标index.html - ...
Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html
今天在开发移动端项目中有个需求是手机端预览pdf,ios可以直接在浏览器预览,安卓不行,所以使用pdf.js来解决,之前项目用过该插件很好用,但是今天使用的时候发现根本没有访问到viewer.html ...
Vue项目引入Echarts可视化图表库教程踩坑
Apache ECharts是一个基于 JavaScript 的开源可视化图表库,ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. ...
【 Vue全家桶 · Vue CLI（四）】Vue项目的详细目录结构解析
文章目录前言 -- 一级目录解析一. dist 二. node_modules 三. public 四. src(基础版) 4.1 main.js 4.2 App.vue 4.3 src / as ...
安装Vue CLI项目（Vue2.0）
一.Vue CLI脚手架(Vue2.0) Vue CLI官方文档:官方文档 1.什么是脚手架命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及 ...
vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客简介说明本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
vue cli 项目在打包时候报错解决方法
问题描述报错一: 打包过程报错:Unexpected token name <i>, expected punc <;> IE浏览中报错:SCRIPT1003: 缺少':', ...
vue项目查看vue版本及cli版本
查看cli版本,执行如下: vue -V 查看vue版本 npm list vue

Vue项目9：Vue Cli项目使用echarts可视化

Vue Cli项目使用echarts可视化有两种方式：一、直接引入echarts 二、使用vue-ehcarts。

Vue项目9：Vue Cli项目使用echarts可视化相关推荐

最新文章

热门文章