vue封裝echarts組件,數(shù)據(jù)動態(tài)渲染方式
更新時間：2022年12月05日 09:19:46 作者：藍胖子的多啦A夢
這篇文章主要介紹了vue封裝echarts組件,數(shù)據(jù)動態(tài)渲染方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue封裝echarts組件,數(shù)據(jù)動態(tài)渲染
需求：顯示默認時間為當前時間至7天之前時間 去請求數(shù)據(jù)
實現(xiàn)效果：
1.安裝Echarts
cnpm install echarts -S
2.在vue項目中使用Echarts
父組件使用子組件的代碼
template區(qū)的使用
<BarChart
:labelList="chartData.labelList"
:checkOutValueList="chartData.checkOutValueList"
:putInValueList="chartData.putInValueList"
/>數(shù)據(jù) （引入組件，注冊組件，定義圖表需要的數(shù)據(jù)）
data() {
return {
chartData: {}, //echart圖表數(shù)據(jù)
};
},
接口返回數(shù)據(jù)
created() {
this.getList();
},
methods: {
getList() {
let data = {
updateDate: this.deviceFormData.time,
pn: this.pn,
};
getInOutData(data).then((res) => {
this.chartData = res;
console.log(this.chartData, "子組件this.chartData");
});
},
}
數(shù)據(jù)結(jié)構(gòu)：
子組件頁面代碼（接收數(shù)據(jù)，并渲染）
<template>
<div
:class="className"
:style="{ height: height, width: width }"
id="myChart"
/>
</template>
<script>
import echarts from "echarts";
export default {
props: {
//接受父組件傳遞來的數(shù)據(jù)
labelList: Array,
checkOutValueList: Array,
putInValueList: Array,
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "300px",
},
},
data() {
return {};
},
watch: {
labelList: function (newQuestion, oldQuestion) {
this.initChart();
},
},
mounted() {
this.initChart();
},
methods: {
initChart() {
// 創(chuàng)建 echarts 實例。
var myChartOne = echarts.init(document.getElementById("myChart"));
myChartOne.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
textStyle: {
color: "#ffffff",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: this.labelList,
axisTick: {
alignWithLabel: true,
},
axisLabel: {
textStyle: {
color: "#fff", //坐標值得具體的顏色
},
},
},
],
yAxis: [
{
type: "value",
axisLabel: {
textStyle: {
color: "#fff", //坐標值得具體的顏色
},
},
},
],
series: [
{
name: window.vm.$i18n.t("barChart.putQuantity"),
type: "bar",
data: this.checkOutValueList,
itemStyle: {
color: "#9B59B6",
},
},
{
name: window.vm.$i18n.t("barChart.outQuantity"),
type: "bar",
data: this.putInValueList,
itemStyle: {
color: "#DFBA49",
},
},
],
});
},
},
};
</script>
vue動態(tài)渲染echarts圖表
最近做項目遇到這樣一個場景，有一個標簽選擇界面，選擇不同的標簽需要展示不同的圖表有可能折線圖，有可能柱狀圖，也可能餅圖，圖表的類型由后端返回，標簽可以多選。這個時候就需要動態(tài)來渲染不定數(shù)量和類型的echarts圖表了。
第一步，選擇標簽
將選擇的所有標簽存儲到downloadCheckList數(shù)組中，再添加一個數(shù)組editableTabs用來存放需要展示的標簽的相關(guān)信息。obj1代表發(fā)送請求時需要攜帶的參數(shù),obj也需要攜帶，處理數(shù)據(jù)會用到。同時初始化echarts圖表。
//選擇標簽完成
selecttrue(val) {
let that=this
// 每次選擇標簽完成創(chuàng)建echarts實例，
if(val==2){
//遍歷整理信息
for (let i in that.downloadCheckList) {
let obj = {
title: that.downloadCheckList[i],//圖表名字
id: "chart" + i, //圖表id
chart: null, //用來存儲圖表實例
name: i, //每個圖表對應的順序
};
let obj1={
timeScope:"$timeScope"
}
obj1[that.downloadCheckList[i]]=`$${that.downloadCheckList[i]}`
that.editableTabs.push(obj);
//發(fā)送ajax請求
that.getDataFromLabel(obj1,that.Time[0], that.Time[1],obj);
}
//分配初始化圖表
that.chartInit();
}else{
// 切換時間不需要執(zhí)行chartInit()創(chuàng)建echarts實例
for (let i in that.editableTabs) {
let obj = that.editableTabs[i]
let obj1={
timeScope:"$timeScope"
}
obj1[that.editableTabs[i].title]=`$${that.editableTabs[i].title}`
that.getDataFromLabel(obj1, that.Time[0], that.Time[1],obj);
}
}
}
// 分配初始化圖表
chartInit() {
let that = this;
this.$nextTick(() => {
//動態(tài)獲取寬高
let WH=document.getElementById('WH').childNodes[0]
for (let i in that.editableTabs) {
that.editableTabs[i].chart = that.$echarts.init(document.getElementById(that.editableTabs[i].id));
}
that.width =parseInt(window.getComputedStyle(WH,null).width)-14+'px'
that.height =parseInt(window.getComputedStyle(WH,null).height)-10+'px'
});
},
HTML部分使用v-for 遍歷 editableTabs數(shù)組代表需要展示的圖表。這里使用動態(tài)寬高來適應不同屏幕尺寸。
<div v-for="item in editableTabs" id='WH' :key="item.id">
<div :style="{width:width,height:height}" :id="item.id" :ref="item.id">{{item.title}}</div>
</div>
</div>
第二步 處理服務端返回的數(shù)據(jù)
請求完成后執(zhí)行 setdatalabel() 方法處理數(shù)據(jù)，data為服務端返回的數(shù)據(jù)，obj為請求時攜帶的標簽信息，
setdatalabel(data,obj) {
let that=this
//新建dataobj存儲總數(shù)據(jù)，dataArr用來存儲echarts的series屬性的數(shù)據(jù)，處理完成的數(shù)據(jù)放在這里即可
let dataobj={
sort:obj.name, //當前標簽在數(shù)組editableTabs中的位置
shapeType:"", //存儲當前標簽需要展示的圖表類型（bar line pie ）
title:obj.title, //當前標簽名稱（echarts的title）
dataArr:[] //存放處理完成的series數(shù)據(jù)
}
//將data包含的圖表類型賦給dataobj.shapeType
// 分辨展示類型
// 根據(jù)不同的圖表類型執(zhí)行不同的的處理方法
if(dataobj.shapeType=="pie"){
that.setPieData(dataobj,data)
}else if(dataobj.shapeType=="line"){
that.setLineDate(dataobj,data)
}
},
第三步 創(chuàng)建圖表數(shù)據(jù)
數(shù)據(jù)處理完成之后，將攜帶數(shù)據(jù)的dataobj傳遞給渲染圖表的方法,(這里折線圖和柱狀圖可以使用同一個方法，處理數(shù)據(jù)時動態(tài)修改type即可)
setLineDate(dataobj,data){
//處理數(shù)據(jù)的邏輯
//........
//.........
//處理完成之后創(chuàng)建圖表
this.createlinechart(dataobj)
}
createlinechart(dataobj) {
let that = this;
let option = (option = {
title: {
text: dataobj.title,
textStyle: {
fontSize: 14,
color: "#626262",
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "",
},
backgroundColor: "white",
extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
borderColor: "#ECECEC",
textStyle: {
//字體樣式
color: "#979797",
align: "left",
},
confine: true,
},
legend: {
icon: dataobj.shapeType=='bar'?'':'circle',
x: "right",
y: "0%",
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: this.chartXisArr, //x軸數(shù)據(jù)
axisPointer: {
type: "",
},
axisLabel: {
color: "#E1E1E1",
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#E1E1E1",
},
},
},
],
yAxis: [
{
type: "value",
show: true,
axisLabel: {
formatter: "{value} /人次",
color: "#E1E1E1",
},
axisTick: {
//y軸刻度線
show: false,
},
axisLine: {
//y軸
show: false,
},
},
],
series: dataobj.dataArr,
});
this.$nextTick(()=>{
//對對應標簽的echarts實例執(zhí)行setOption()
this.editableTabs[Number(dataobj.sort)].chart.setOption(option, true);
//由于設置了動態(tài)寬高，所以需要resize()
this.editableTabs[Number(dataobj.sort)].chart.resize()
})
},
如果是餅圖則執(zhí)行餅圖的處理數(shù)據(jù)方法并 setOption() 即可,同理如果需要其他圖表類型，則繼續(xù)添加對應處理方法即可。
最后附上效果圖，（新手一枚，如有錯誤還請指正！）
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
uniapp使用v-loading并且不引入element-ui的操作方法
這篇文章主要介紹了uniapp使用v-loading并且不引入element-ui,首先創(chuàng)建loading.js，創(chuàng)建lloading.scss，本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
基于vue-cli3和element實現(xiàn)登陸頁面
這篇文章主要介紹了vue-cli3和element做一個簡單的登陸頁面本文實例圖文相結(jié)合給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
vue3如何使用provide實現(xiàn)狀態(tài)管理詳解
Vue3中有一對新增的api，provide和inject,熟悉Vue2的朋友應該明,這篇文章主要給大家介紹了關(guān)于vue3如何使用provide實現(xiàn)狀態(tài)管理的相關(guān)資料,需要的朋友可以參考下2021-10-10
vue調(diào)試工具vue-devtools的安裝全過程
這篇文章主要介紹了vue調(diào)試工具vue-devtools的安裝全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue項目base64加解密使用方式以及解密亂碼問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了vue 中 命名視圖的用法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2019-08-08
vue 動態(tài)設置img的src地址無效,npm run build 后找不到文件的解決
這篇文章主要介紹了vue 動態(tài)設置img的src地址無效,npm run build 后找不到文件的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue-jsonp的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue 權(quán)限認證token的實現(xiàn)方法
這篇文章主要介紹了vue 權(quán)限認證token的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue如何使用AIlabel標注組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04