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！