在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可视化组件的完整模板，大家直接复制使用即可\

```

</div>

```

案例：

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>

显示效果：