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>
显示效果: