在Vue中echarts可視化組件的使用

本文轉載自查看原文 2021-07-28 08:53 148

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>

顯示效果：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue中使用 echarts 實現動態配置參數及類型顯示不同形狀的圖表配置、可視化的echarts圖表組件 Vue項目中使用可視化圖表echarts vue使用echarts可視化圖形插件 Vue+Echarts(圖表可視化) 基於vue和echarts的數據可視化實現使用使用Echarts實現可視化 Vue數據可視化組件：DataV 大數據可視化之---echarts地圖組件基於echarts組件制作數據可視化大屏 vue2.0+echarts可視化圖形開發中遇到的問題總結