vue中如何使用echarts動(dòng)態(tài)渲染數(shù)據(jù)
更新時(shí)間：2023年11月02日 11:54:44 作者：打小就霸
這篇文章主要給大家介紹了關(guān)于vue中如何使用echarts動(dòng)態(tài)渲染數(shù)據(jù)的相關(guān)資料,echarts是一款基于JavaScript的開(kāi)源可視化圖表庫(kù),它通過(guò)簡(jiǎn)單的配置即可實(shí)現(xiàn)各種各樣的可視化效果,需要的朋友可以參考下
一、業(yè)務(wù)場(chǎng)景：
最近在vue中使用echarts時(shí) 引入的時(shí)候怎么也引不上，后面發(fā)現(xiàn)需要綁定在原型上就可以完美解決(也可以直接在需要引入的頁(yè)面用ES5中的require引入require（‘echarts’）)
為了避免大家走彎路，下面整合了一下echarts 在vue框架中的使用步驟
二、具體實(shí)現(xiàn)步驟：
1、先在終端安裝echarts
npm install echarts --save
2、在main.js中引入（這里分5.0以上和以下兩個(gè)版本來(lái)安裝）
5.0以上版本
import * as echarts from 'echarts'
5.0以下版本
import echarts from 'echarts'
注冊(cè)在原型上 `
vue.prototype.$echarts = echarts
3、在html部分留一個(gè)div容器來(lái)承載畫(huà)布
<div id="main" style="width: 500px;height:400px;"></div>
4、把要實(shí)現(xiàn)的代碼放入函數(shù)中
init() {
//調(diào)接口
quShiPic({})
.then(res => {
console.log(res)
const { data, count, code, msg } = res
if (msg == 'success') {
this.quLineLists = data
console.log(this.quLineLists)
console.log(this.quLineLists[0].data)
console.log(this.quLineLists[1].data)
console.log(this.quLineLists[2].data)
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = this.$echarts.init(
document.getElementById('main')
)
// 配置option選項(xiàng)
var option = {
title: {
text: '熱力變化曲線(xiàn)'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['全部', '人', '物']
},
grid: {
left: '3%',
right: '2%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
},
yAxis: {
type: 'value'
},
series:
[
{
name: '全部',
type: 'line',
stack: 'Total',
smooth: true,
// data: [120, 132,0, 101, 134, 90,0, 230, 210]
data: this.quLineLists[0].data
},
{
name: '人',
type: 'line',
smooth: true,
stack: 'Total',
// data: [220, 182, 191, 234, 290, 330, 310]
data: this.quLineLists[1].data
},
{
name: '物',
type: 'line',
stack: 'Total',
smooth: true,
// data: [150, 232, 201, 154, 190, 330, 410]
data: this.quLineLists[2].data
}
]
}
// 把配置option選項(xiàng)用js放進(jìn)dom節(jié)點(diǎn)
myChart.setOption(option)
}
}).catch((err) => {
console.log(err)
})
},
5、頁(yè)面加載的時(shí)候調(diào)用功能函數(shù)（mounted生命周期里）
mounted() {
this.init()
},
三、完整代碼：
<template>
<div>
<div id="main" style="width: 600px;height:400px;"></div>
</div>
</template>
<script>
export default {
name: 'WhiteName',
data() {
return {}
},
mounted() {
this.init()
},
methods: {
getLine() {
quShiPic({})
.then(res => {
console.log(res)
const { data, count, code, msg } = res
if (msg == 'success') {
this.quLineLists = data
console.log(this.quLineLists)
console.log(this.quLineLists[0].data)
console.log(this.quLineLists[1].data)
console.log(this.quLineLists[2].data)
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = this.$echarts.init(
document.getElementById('main')
)
// 配置option選項(xiàng)
var option = {
title: {
text: '熱力變化曲線(xiàn)'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['全部', '人', '物']
},
grid: {
left: '3%',
right: '2%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
},
yAxis: {
type: 'value'
},
series:
[
{
name: '全部',
type: 'line',
stack: 'Total',
smooth: true,
// data: [120, 132,0, 101, 134, 90,0, 230, 210]
data: this.quLineLists[0].data
},
{
name: '人',
type: 'line',
smooth: true,
stack: 'Total',
// data: [220, 182, 191, 234, 290, 330, 310]
data: this.quLineLists[1].data
},
{
name: '物',
type: 'line',
stack: 'Total',
smooth: true,
// data: [150, 232, 201, 154, 190, 330, 410]
data: this.quLineLists[2].data
}
]
}
// 把配置option選項(xiàng)用js放進(jìn)dom節(jié)點(diǎn)
myChart.setOption(option)
}
}).catch((err) => {
console.log(err)
})
},
}
}
}
</script>
<style scoped>
</style>
四、效果展示：
總結(jié)
到此這篇關(guān)于vue中如何使用echarts動(dòng)態(tài)渲染數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue echarts動(dòng)態(tài)渲染數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
淺談nuxtjs校驗(yàn)登錄中間件和混入(mixin)
這篇文章主要介紹了淺談nuxtjs校驗(yàn)登錄中間件和混入(mixin)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
本文主要介紹了Vue3 JSX解釋器的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
props主要用于組件的傳值,他的工作就是為了接收外面?zhèn)鬟^(guò)來(lái)的數(shù)據(jù),與data、el、ref是一個(gè)級(jí)別的配置項(xiàng),下面這篇文章主要給大家介紹了關(guān)于Vue組件如何設(shè)置Props的相關(guān)資料,需要的朋友可以參考下2022-06-06
vue如何集成raphael.js中國(guó)地圖的方法示例
最近的數(shù)據(jù)統(tǒng)計(jì)項(xiàng)目中要用到中國(guó)地圖，也就是在地圖上動(dòng)態(tài)的顯示某個(gè)時(shí)間段某個(gè)省份地區(qū)的統(tǒng)計(jì)數(shù)據(jù)，我們不需要flash，僅僅依靠raphael.js以及SVG圖像就可以完成地圖的交互操作。本文就給大家介紹了關(guān)于利用vue集成raphael.js中國(guó)地圖的相關(guān)資料，需要的朋友可以參考下。2017-08-08
這篇文章主要介紹了Vue腳手架中的 render 理解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-10-10
Vue數(shù)組根據(jù)對(duì)象屬性去重和數(shù)組對(duì)象去重實(shí)現(xiàn)方式
文章介紹了兩種去重方法：一種是根據(jù)對(duì)象的`id`屬性去重,另一種是根據(jù)`id`和`name`屬性去重,通過(guò)`map()`和`filter()`方法結(jié)合`indexOf()`實(shí)現(xiàn)去重2025-12-12
Vue router的addRoute方法實(shí)現(xiàn)控制權(quán)限方法詳解
這篇文章主要介紹了vue動(dòng)態(tài)路由添加，vue-router的addRoute方法實(shí)現(xiàn)權(quán)限控制流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-09-09
Vue配合Vant使用時(shí)area省市區(qū)選擇器的使用方式
這篇文章主要介紹了Vue配合Vant使用時(shí)area省市區(qū)選擇器的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了VUE3+TS獲取組件類(lèi)型的方法踩坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue實(shí)現(xiàn)動(dòng)態(tài)路由設(shè)置的兩大方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue中兩種動(dòng)態(tài)路由設(shè)置方案,主要是前端控制方案和后端控制方案,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2026-04-04