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>
顯示效果：
