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\test F:\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) npm vue-cli · Generated "vueandecharts". # Installing project dependencies ... ...省略部分输出... # ======================== # Project initialization finished! # ======================== To get started: cd vueandecharts npm run dev Documentation 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！