在Vue中echarts可视化组件的使用

echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html

1.找到脚手架项目所在地址，执行cnpm install echarts，安装echarts组件（脚手架的地址就是你vue项目的地址）

（E:\demo\vuepro）这是我的项目地址，vuepro为项目名

2.按需导入，以加快打开速度

1 //引入echarts组件
2     import echarts from "echarts"
3     // 引入基本模板
4     let echart = require('echarts/lib/echarts')
5     // 引入柱状图组件
6     require('echarts/lib/chart/bar')
7     // 引入提示框和title组件
8     require('echarts/lib/component/tooltip')
9     require('echarts/lib/component/title')

3.准备div标签 容纳报表图形

div的 id用于绑定echarts插件

1   <div id="chart" style="width: 50%; height: 400px;">
2   </div>

4.script标签的内容

 1 //引入echarts组件
 2     import echarts from "echarts"
 3     // 引入基本模板
 4     let echart = require('echarts/lib/echarts')
 5     // 引入柱状图组件
 6     require('echarts/lib/chart/bar')
 7     // 引入提示框和title组件
 8     require('echarts/lib/component/tooltip')
 9     require('echarts/lib/component/title')
10             export default{
11                 name: 'App',
12                 data(){
13                   return{
14                      chartColumn:null
15                   }
16                 },
17                 methods:{
18                   initData(){
19                     let dt=document.querySelector("#boss")
20
21                     this.chartColumn=echart.init(dt)
22                     this.chartColumn.setOption(
23                        //Examples中的模板
24                     )
25
26                   }
27                 },
28                 mounted(){
29                     this.initData()
30                 }
31              }

为了方便大家的使用，我在这里放一个在Vue中引入echarts可视化组件的完整模板，大家直接复制使用即可

<template>
    <div id="boss" style="width: 500px;height: 500px;">

    </div>
</template>

<script>
    //引入echarts组件
    import echarts from "echarts"
    // 引入基本模板
    let echart = require('echarts/lib/echarts')
    // 引入柱状图组件
    require('echarts/lib/chart/bar')
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
            export default{
                name: 'App',
                data(){
                  return{
                     chartColumn:null
                  }
                },
                methods:{
                  initData(){
                    let dt=document.querySelector("#boss")

                    this.chartColumn=echart.init(dt)
                    this.chartColumn.setOption(
                       //Examples中模板
                    )

                  }
                },
                mounted(){
                    this.initData()
                }
             }
</script>

<style>
</style>

案例：

  1 <template>
  2     <div id="boss" style="width: 500px;height: 500px;">
  3
  4     </div>
  5 </template>
  6
  7 <script>
  8     import echarts from "echarts"
  9     // 引入基本模板
 10     let echart = require('echarts/lib/echarts')
 11     // 引入柱状图组件
 12     require('echarts/lib/chart/bar')
 13     // 引入提示框和title组件
 14     require('echarts/lib/component/tooltip')
 15     require('echarts/lib/component/title')
 16             export default{
 17                 name: 'App',
 18                 data(){
 19                   return{
 20                      chartColumn:null
 21                   }
 22                 },
 23                 methods:{
 24                   initData(){
 25                     let dt=document.querySelector("#boss")
 26
 27                     this.chartColumn=echart.init(dt)
 28                     this.chartColumn.setOption(
 29                     //以下为echarts可视化组件
 30                       {
 31                           tooltip: {
 32                               trigger: 'axis',
 33                               axisPointer: {            // Use axis to trigger tooltip
 34                                   type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
 35                               }
 36                           },
 37                           legend: {
 38                               data: ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine']
 39                           },
 40                           grid: {
 41                               left: '3%',
 42                               right: '4%',
 43                               bottom: '3%',
 44                               containLabel: true
 45                           },
 46                           xAxis: {
 47                               type: 'value'
 48                           },
 49                           yAxis: {
 50                               type: 'category',
 51                               data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 52                           },
 53                           series: [
 54                               {
 55                                   name: 'Direct',
 56                                   type: 'bar',
 57                                   stack: 'total',
 58                                   label: {
 59                                       show: true
 60                                   },
 61                                   emphasis: {
 62                                       focus: 'series'
 63                                   },
 64                                   data: [320, 302, 301, 334, 390, 330, 320]
 65                               },
 66                               {
 67                                   name: 'Mail Ad',
 68                                   type: 'bar',
 69                                   stack: 'total',
 70                                   label: {
 71                                       show: true
 72                                   },
 73                                   emphasis: {
 74                                       focus: 'series'
 75                                   },
 76                                   data: [120, 132, 101, 134, 90, 230, 210]
 77                               },
 78                               {
 79                                   name: 'Affiliate Ad',
 80                                   type: 'bar',
 81                                   stack: 'total',
 82                                   label: {
 83                                       show: true
 84                                   },
 85                                   emphasis: {
 86                                       focus: 'series'
 87                                   },
 88                                   data: [220, 182, 191, 234, 290, 330, 310]
 89                               },
 90                               {
 91                                   name: 'Video Ad',
 92                                   type: 'bar',
 93                                   stack: 'total',
 94                                   label: {
 95                                       show: true
 96                                   },
 97                                   emphasis: {
 98                                       focus: 'series'
 99                                   },
100                                   data: [150, 212, 201, 154, 190, 330, 410]
101                               },
102                               {
103                                   name: 'Search Engine',
104                                   type: 'bar',
105                                   stack: 'total',
106                                   label: {
107                                       show: true
108                                   },
109                                   emphasis: {
110                                       focus: 'series'
111                                   },
112                                   data: [820, 832, 901, 934, 1290, 1330, 1320]
113                               }
114                           ]
115                       }
116                       //组件到此结束
117                     )
118
119                   }
120                 },
121                 mounted(){
122                     this.initData()
123                 }
124              }
125 </script>
126
127 <style>
128 </style>

显示效果：