vue中Echarts使用動(dòng)態(tài)數(shù)據(jù)的兩種實(shí)現(xiàn)方式
更新時(shí)間：2022年10月21日 16:46:02 作者：海闊天空.
這篇文章主要介紹了vue中Echarts使用動(dòng)態(tài)數(shù)據(jù)的兩種實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Echarts使用動(dòng)態(tài)數(shù)據(jù)的兩種方式
在使用Echarts時(shí)我們數(shù)據(jù)一般不是靜態(tài)寫死的，而是通過后端接口動(dòng)態(tài)獲取的，在此總結(jié)兩種在vue框架下Echarts使用動(dòng)態(tài)數(shù)據(jù)的方式。
1.通過computed
computed: {
? ? options() {
? ? ? let that = this;
? ? ? let option = {
? ? ? ? ? tooltip : {
? ? ? ? ? ? trigger: 'axis',
? ? ? ? ? ? formatter: function(item) {
? ? ? ? ? ? ? return `支付金額 ${item[0].value}元`
? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? legend: {
? ? ? ? ? ? formatter: function(item){
? ? ? ? ? ? ? return `${item}: ${that.priceData.todayPrice}`
? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? grid: {
? ? ? ? ? ? ? left: '3%',
? ? ? ? ? ? ? right: '4%',
? ? ? ? ? ? ? bottom: '3%',
? ? ? ? ? ? ? containLabel: true
? ? ? ? ? },
? ? ? ? ? xAxis: {
? ? ? ? ? ? ? type: 'category',
? ? ? ? ? ? ? boundaryGap: false,
? ? ? ? ? ? ? data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24]
? ? ? ? ? },
? ? ? ? ? yAxis: {
? ? ? ? ? ? ? type: 'value',
? ? ? ? ? ? ? splitLine: { //網(wǎng)格線
? ? ? ? ? ? ? ? show: false
? ? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? series: [{
? ? ? ? ? ? ? data: that.priceData.timePriceRange,
? ? ? ? ? ? ? type: 'line',
? ? ? ? ? ? ? smooth: true,
? ? ? ? ? ? ? name: '支付金額',
? ? ? ? ? ? ? itemStyle : {
?? ??? ??? ??? ??? ??? ??? ??? ?normal : {
? ? ? ? ? ? ? ? ? color: '#13CE66',
?? ??? ??? ??? ??? ??? ??? ??? ??? ?lineStyle:{
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?color:'#13CE66'
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ?}
? ? ? ? ? }]
? ? ? }
? ? ? return option;
? ? }
? },
//初始化
initEcharts(){
? ? ? let ?myChart = Echarts.init(this.$refs.chart);
? ? ? myChart.setOption(this.options);
? ? }2.在data中定義option
通過在初始化之前，直接改變option對(duì)應(yīng)屬性值
//在data中定義option
initEcharts(){
? ? ? this.option.yAxis[1].max = this.maxRate;
? ? ? this.option.xAxis.data = this.dateList;
? ? ? this.option.series[0].data = this.payPriceTrendList;
? ? ? let ?myChart = Echarts.init(this.$refs.chart);
? ? ? myChart.setOption(this.option);
? ? }數(shù)據(jù)變化后需要再次調(diào)init方法刷線圖表
vue Echarts幾種常用圖表動(dòng)態(tài)數(shù)據(jù)切換
幾種常用圖表
1.柱狀圖
效果圖
代碼片段
HTML部分：
<div ref="echartMain1" id="echart-main"></div>
JS部分：
getEchartData() {
this.$http
.post("/sys/currency/twelvemonthstatistic", {
traddingOrgId:id,
})
.then(({ data }) => {
//示例數(shù)據(jù)
data=[
{
"ym": "2021-06",
"countOrder": 0,
"sumGuaranteeFee": 0,
"sumBzjAmount": 0,
"sumGuaranteeFeeToWanYuan": 0,
"sumBzjAmountToWanYuan": 0
},
{
"ym": "2021-07",
"countOrder": 0,
"sumGuaranteeFee": 0,
"sumBzjAmount": 0,
"sumGuaranteeFeeToWanYuan": 0,
"sumBzjAmountToWanYuan": 0
},
{
"ym": "2021-08",
"countOrder": 0,
"sumGuaranteeFee": 0,
"sumBzjAmount": 0,
"sumGuaranteeFeeToWanYuan": 0,
"sumBzjAmountToWanYuan": 0
},
{
"ym": "2021-09",
"countOrder": 0,
"sumGuaranteeFee": 0,
"sumBzjAmount": 0,
"sumGuaranteeFeeToWanYuan": 0,
"sumBzjAmountToWanYuan": 0
},
{
"ym": "2021-10",
"countOrder": 0,
"sumGuaranteeFee": 0,
"sumBzjAmount": 0,
"sumGuaranteeFeeToWanYuan": 0,
"sumBzjAmountToWanYuan": 0
},
{
"ym": "2021-11",
"countOrder": 0,
"sumGuaranteeFee": 0,
"sumBzjAmount": 0,
"sumGuaranteeFeeToWanYuan": 0,
"sumBzjAmountToWanYuan": 0
},
{
"ym": "2021-12",
"countOrder": 0,
"sumGuaranteeFee": 0,
"sumBzjAmount": 0,
"sumGuaranteeFeeToWanYuan": 0,
"sumBzjAmountToWanYuan": 0
},
{
"ym": "2022-01",
"countOrder": 0,
"sumGuaranteeFee": 0,
"sumBzjAmount": 0,
"sumGuaranteeFeeToWanYuan": 0,
"sumBzjAmountToWanYuan": 0
},
{
"ym": "2022-02",
"countOrder": 0,
"sumGuaranteeFee": 0,
"sumBzjAmount": 0,
"sumGuaranteeFeeToWanYuan": 0,
"sumBzjAmountToWanYuan": 0
},
{
"ym": "2022-03",
"countOrder": 0,
"sumGuaranteeFee": 0,
"sumBzjAmount": 0,
"sumGuaranteeFeeToWanYuan": 0,
"sumBzjAmountToWanYuan": 0
},
{
"ym": "2022-04",
"countOrder": 0,
"sumGuaranteeFee": 0,
"sumBzjAmount": 0,
"sumGuaranteeFeeToWanYuan": 0,
"sumBzjAmountToWanYuan": 0
},
{
"ym": "2022-05",
"countOrder": 0,
"sumGuaranteeFee": 0,
"sumBzjAmount": 0,
"sumGuaranteeFeeToWanYuan": 0,
"sumBzjAmountToWanYuan": 0
}
]
data.forEach((value, index) => {
this.chartDate.push(value.ym);//X軸月份
this.chartData.push(value.countOrder);//Y軸數(shù)量
});
this.echart();
});
},
echart() {
var myChart = echarts.init(this.$refs.echartMain1);
let option = {
xAxis: [
{
type: "category",
data: this.chartDate,
axisPointer: {
type: "shadow",
},
},
],
yAxis: [
{
type: "value",
name: "近12個(gè)月的出函數(shù)量（筆）",
min: 0,
max: 500,
interval: 100,
axisLabel: {
formatter: "{value}",
},
},
],
series: [
{
data: this.chartData,
type: "bar",
},
],
};
// echarts圖表自適應(yīng)
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
},
2.平滑折線面積圖
效果圖
代碼片段
HTML部分：
<el-row :gutter="20" class="tittle">
<el-col :span="16">
<div class="text1">近12月保函數(shù)據(jù)</div>
</el-col>
<!-- <el-col :span="2">
<div :class="{active:isActive2===1}" @click="getDataMon12(1)" class="cursor-pointer">保函數(shù)量</div>
</el-col>
<el-col :span="2">
<div :class="{active:isActive2===2}" @click="getDataMon12(2)" class="cursor-pointer">保費(fèi)收入</div>
</el-col>
<el-col :span="2">
<div :class="{active:isActive2===3}" @click="getDataMon12(3)" class="cursor-pointer">擔(dān)保金額</div>
</el-col> -->
</el-row>
<div ref="echartDemo1" class="chart-box" style="height: 400px"></div>
JS部分：
/**
* 獲取面積折線圖 filterType 1保函數(shù)量 2保費(fèi)收入 3擔(dān)保金額 不傳返回所有
*/
getDataMon12(filterType) {
if (filterType) {
this.isActive2 = filterType;
// console.log('filterType高亮的是：',filterType,this.isActive2);
}
var monTop121 = [];
var monTop122 = [];
var monTop123 = [];
var dataTop121 = [];
var dataTop122 = [];
var dataTop123 = [];
this.$http
.post("/sys/data/twelvemonthstatistic", {
dataType: 1,
filterType: filterType
})
.then(res => {
// console.log("面積折線圖數(shù)據(jù)是：", res.data);
res.data.forEach((value, index) => {
if (filterType == 1) {
monTop121.push(value.ym);
dataTop121.push(value.countOrder);
} else if (filterType == 2) {
monTop122.push(value.ym);
dataTop122.push(value.sumGuaranteeFeeToWanYuan);
} else if (filterType == 3) {
monTop123.push(value.ym);
dataTop123.push(value.sumBzjAmountToWanYuan);
}
});
if (filterType == 1) {
this.initChartBar1(monTop121, dataTop121);
} else if (filterType == 2) {
this.initChartBar1(monTop122, dataTop122);
} else if (filterType == 3) {
this.initChartBar1(monTop123, dataTop123);
}
});
},
/**
* 面積折線圖
*/
initChartBar1(mon, data) {
var option = {
tooltip: {
trigger: "axis"
},
title: {
subtext: "保函數(shù)量(件)",
left: "5%",
top: "0%",
textAlign: "center"
},
xAxis: {
type: "category",
boundaryGap: false,
data: mon
},
yAxis: {
type: "value"
},
series: [
{
data: data,
type: "line",
smooth: true,
areaStyle: {}
}
]
};
this.chartBar1 = echarts.init(this.$refs.echartDemo1);
this.chartBar1.setOption(option);
window.addEventListener("resize", () => {
this.chartBar1.resize();
});
},
css部分：
// 選中時(shí)的樣式
.active {
color: #00a950;
}
3.折線圖堆疊
效果圖
代碼片段
HTML部分：
<el-row :gutter="20" class="tittle">
<el-col :span="16">
<div class="text1">近12月保函數(shù)據(jù)</div>
</el-col>
<!-- <el-col :span="2">
<div :class="{active:isActive2===1}" @click="getDataMonLine(1)" class="cursor-pointer">保函數(shù)量</div>
</el-col>
<el-col :span="2">
<div :class="{active:isActive2===2}" @click="getDataMonLine(2)" class="cursor-pointer">保費(fèi)收入</div>
</el-col>
<el-col :span="2">
<div :class="{active:isActive2===3}" @click="getDataMonLine(3)" class="cursor-pointer">擔(dān)保金額</div>
</el-col> -->
</el-row>
<div ref="echartDemo2" class="chart-box" style="height: 400px"></div>
JS部分：
/**
* 獲取層疊折線圖 filterType 1保函數(shù)量 2保費(fèi)收入 3擔(dān)保金額 不傳返回所有
*/
getDataMonLine(filterType) {
if(filterType){
this.isActive2=filterType
// console.log('filterType高亮的是：',filterType,this.isActive2);
}
var monTop121 = [];
var monTop122 = [];
var monTop123 = [];
var dataTop121 = [];
var dataTop122 = [];
var dataTop123 = [];
this.$http
.post("/sys/data/guaranteeorgtwelvemonthstatistic", {
dataType: 1,
filterType:filterType,
})
.then((res) => {
// console.log("折線圖數(shù)據(jù)/投標(biāo)保函按月統(tǒng)計(jì)表格數(shù)據(jù)是：", res.data);
this.twelvemonthDataLine = res.data;
// 示例數(shù)據(jù)
// this.twelvemonthDataLine=[
// { detailList: [
// {countOrder: 0, guaranteeOrgName: "08擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "01擔(dān)保"},
// {countOrder: 4, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔(dān)保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長(zhǎng)安責(zé)任保險(xiǎn)股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "02擔(dān)保"},
// ],
// ym: "2021-06"},
// {detailList: [
// {countOrder: 20, guaranteeOrgName: "08擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "01擔(dān)保"},
// {countOrder: 9, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔(dān)保有限公司"},
// {countOrder: 1, guaranteeOrgName: "長(zhǎng)安責(zé)任保險(xiǎn)股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "02擔(dān)保"},
// ],
// ym: "2021-07"},
// {detailList: [
// {countOrder: 6, guaranteeOrgName: "08擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "01擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔(dān)保有限公司"},
// {countOrder: 1, guaranteeOrgName: "長(zhǎng)安責(zé)任保險(xiǎn)股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 1, guaranteeOrgName: "匯友保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "02擔(dān)保"},
// ],
// ym: "2021-08"},
// {detailList: [
// {countOrder: 0, guaranteeOrgName: "08擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "01擔(dān)保"},
// {countOrder: 4, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔(dān)保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長(zhǎng)安責(zé)任保險(xiǎn)股份有限公司"},
// {countOrder: 1, guaranteeOrgName: "陽光保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "02擔(dān)保"},
// ],
// ym: "2021-09"},
// {detailList: [
// {countOrder: 0, guaranteeOrgName: "08擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "01擔(dān)保"},
// {countOrder: 4, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔(dān)保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長(zhǎng)安責(zé)任保險(xiǎn)股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "02擔(dān)保"},
// ],ym: "2021-10"},
// {detailList: [
// {countOrder: 0, guaranteeOrgName: "08擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "01擔(dān)保"},
// {countOrder: 1, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔(dān)保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長(zhǎng)安責(zé)任保險(xiǎn)股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "02擔(dān)保"},
// ],ym: "2021-11"},
// {detailList: [
// {countOrder: 0, guaranteeOrgName: "08擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "01擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔(dān)保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長(zhǎng)安責(zé)任保險(xiǎn)股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "02擔(dān)保"},
// ],ym: "2021-12"},
// {detailList: [
// {countOrder: 12, guaranteeOrgName: "08擔(dān)保"},
// {countOrder: 4, guaranteeOrgName: "01擔(dān)保"},
// {countOrder: 4, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔(dān)保"},
// {countOrder: 7, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 3, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 1, guaranteeOrgName: "河南華誠工程擔(dān)保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長(zhǎng)安責(zé)任保險(xiǎn)股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "02擔(dān)保"},
// ],ym: "2022-01"},
// {detailList: [
// {countOrder: 0, guaranteeOrgName: "08擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "01擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔(dān)保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長(zhǎng)安責(zé)任保險(xiǎn)股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "02擔(dān)保"},
// ],ym: "2022-02"},
// {detailList: [
// {countOrder: 0, guaranteeOrgName: "08擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "01擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔(dān)保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長(zhǎng)安責(zé)任保險(xiǎn)股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "02擔(dān)保"},
// ],ym: "2022-03"},
// {detailList: [
// {countOrder: 0, guaranteeOrgName: "08擔(dān)保"},
// {countOrder: 6, guaranteeOrgName: "01擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔(dān)保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長(zhǎng)安責(zé)任保險(xiǎn)股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險(xiǎn)"},
// {countOrder: 1, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "02擔(dān)保"},
// ],ym: "2022-04"},
// {detailList: [
// {countOrder: 3, guaranteeOrgName: "08擔(dān)保"},
// {countOrder: 13, guaranteeOrgName: "01擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "06擔(dān)保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔(dān)保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長(zhǎng)安責(zé)任保險(xiǎn)股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險(xiǎn)"},
// {countOrder: 0, guaranteeOrgName: "02擔(dān)保"},
// ],ym: "2022-05"}
// ]
this.twelvemonthDataLine.forEach((value, index) => {
if (filterType == 1) {
monTop121.push(value.ym);
dataTop121.push(value.detailList);
}
else if (filterType == 2) {
monTop122.push(value.ym);
dataTop122.push(value.sumGuaranteeFeeToWanYuan);
} else if (filterType == 3) {
monTop123.push(value.ym);
dataTop123.push(value.sumBzjAmountToWanYuan);
}
});
if (filterType == 1) {
this.initChartLine(monTop121, dataTop121)
} else if (filterType == 2) {
this.initChartLine(monTop122, dataTop122);
} else if (filterType == 3) {
this.initChartLine(monTop123,dataTop123);
}
});
},
/**
* 層疊折線圖
*/
initChartLine(mon, data) {
// console.log('monTop121:',mon);
let series = [];
let leggend = [];
for (let i = 0; i < data.length; i++) {
let countOrders = [];
leggend.push(data[i].guaranteeOrgName);
// countOrders=[0,1,5,2,4,5,3,1,4,9,14,2]
var arr = data[i];
arr.forEach((item, index) => {
countOrders.push(item.countOrder);
});
// 將數(shù)據(jù)組裝到series數(shù)組，供option配置使用
series.push({
// 每個(gè)擔(dān)保機(jī)構(gòu)，對(duì)應(yīng)一條折線圖
name: data[i].guaranteeOrgName,
type: "line",
data: countOrders // 每個(gè)擔(dān)保機(jī)構(gòu)，對(duì)應(yīng)的橫坐標(biāo)的值組成的數(shù)組
});
}
console.log(leggend);
console.log("series是：", series);
var option = {
tooltip: {
trigger: "axis"
},
title: {
subtext: "保函數(shù)量(件)",
left: "5%",
top: "0%",
textAlign: "center"
},
legend: {
padding: 10,
tooltip: {
show: true
},
data: leggend
},
xAxis: {
type: "category",
boundaryGap: false,
data: mon
},
yAxis: {
type: "value"
},
series: series
};
this.chartLine = echarts.init(this.$refs.echartDemo2);
this.chartLine.setOption(option);
window.addEventListener("resize", () => {
this.chartLine.resize();
});
},
css部分：
// 選中時(shí)的樣式
.active {
color: #00a950;
}
4.餅狀圖
效果圖
代碼片段
HTML部分：
<div class="piechart">
<div class="tittle">
<div class="text1">交易平臺(tái)統(tǒng)計(jì)</div>
<el-date-picker v-model="
type="datetimerange" :picker-options="pickerOptions2" range-separator="至" start-placeholder="開始日期" end-placeholder="結(jié)束日期" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:01', '23:59:59']" style="width: 390px" @change="timeHandle(4)">
</el-date-picker>
</div>
<div ref="echartDemo3" class="chart-box" style="height: 400px"></div>
</div>
JS部分：
// 時(shí)間選擇修改時(shí)數(shù)據(jù)刷新 1為投標(biāo)保函按月合計(jì) 2為出函平臺(tái)統(tǒng)計(jì)的時(shí)間選擇器 3為出函機(jī)構(gòu)統(tǒng)計(jì)的時(shí)間選擇器 4為交易平臺(tái)統(tǒng)計(jì)的時(shí)間選擇器
timeHandle(num) {
var that = this;
if (num == 1) {
this.getMonthData(12, this.value1);
// this.value1=""
} else if (num == 2) {
this.getIssuinGuarantee("", this.value2);
// this.value2=""
} else if (num == 3) {
this.getCensusData("", this.value3);
// this.value3=""
} else {
this.getTradeData("", this.value4);
// this.value4=""
}
},
getIssuinGuarantee(days, time) {
if (days) {
this.isActive3 = days;
// console.log('days高亮的是：',days,this.isActive3);
}
this.$http({
url: "/sys/data/guaranteeorgplatformstatistic",
method: "post",
data: {
dataType: 1,
days: days,
startTime: !time[0] ? "" : time[0],
endTime: !time[1] ? "" : time[1]
}
}).then(res => {
// console.log("出函平臺(tái)數(shù)據(jù)：", res.data);
this.issuinGuaranteeData = res.data;
//后臺(tái)響應(yīng)數(shù)據(jù)是
this.issuinGuaranteeData=[
{
countOrder: 3
countOrderRatio: 21.42
sumBzjAmount: 3000
sumBzjAmountRatio: 21.42
sumBzjAmountToWanYuan: 0.3
sumGuaranteeFee: 600
sumGuaranteeFeeRatio: 10.9
sumGuaranteeFeeToWanYuan: 0.06
traddingOrgId: "303c3dfaa3c54864a1b67f5fee694231"
traddingOrgName: "駐馬店公共資源交易中心"
},
{
countOrder: 4
countOrderRatio: 28.57
sumBzjAmount: 4000
sumBzjAmountRatio: 28.57
sumBzjAmountToWanYuan: 0.4
sumGuaranteeFee: 1400
sumGuaranteeFeeRatio: 25.45
sumGuaranteeFeeToWanYuan: 0.14
traddingOrgId: "57f2e9ceb8834fe7ac37e06f9dab7aef"
traddingOrgName: "通許縣公共資源交易中心"
},
{
countOrder: 2
countOrderRatio: 14.28
sumBzjAmount: 2000
sumBzjAmountRatio: 14.28
sumBzjAmountToWanYuan: 0.2
sumGuaranteeFee: 1000
sumGuaranteeFeeRatio: 18.18
sumGuaranteeFeeToWanYuan: 0.1
traddingOrgId: "8af00e2ff8ea458da5b122495ee83303"
traddingOrgName: "杞縣公共資源交易中心"
},
{
countOrder: 5
countOrderRatio: 35.73
sumBzjAmount: 5000
sumBzjAmountRatio: 35.73
sumBzjAmountToWanYuan: 0.5
sumGuaranteeFee: 2500
sumGuaranteeFeeRatio: 45.47
sumGuaranteeFeeToWanYuan: 0.25
traddingOrgId: "c83acb963a4140438984b196abcec46c"
traddingOrgName: "鞏義公共資源交易中心"
}
]
this.initChartBar3(this.issuinGuaranteeData);
});
},
/**
* 3餅圖
*/
initChartBar3(data) {
var temp1 = [];
var temp2 = [];
var temp3 = [];
data.forEach((value, index) => {
temp1.push({
name: value.guaranteeOrgName,
value: value.countOrderRatio
});
temp2.push({
name: value.guaranteeOrgName,
value: value.sumGuaranteeFeeRatio
});
temp3.push({
name: value.guaranteeOrgName,
value: value.sumBzjAmountRatio
});
});
// console.log(temp1)
// console.log(temp2)
// console.log(temp3)
var option = {
tooltip: {
trigger: "item",
formatter: " : {c} (vvxyksv9kd%)"
},
title: [
{
subtext: "保函數(shù)量占比",
left: "16.67%",
top: "5%",
textAlign: "center"
},
{
subtext: "保函金額占比",
left: "50%",
top: "5%",
textAlign: "center"
},
{
subtext: "擔(dān)保金額占比",
left: "83.33%",
top: "5%",
textAlign: "center"
}
],
series: [
{
type: "pie",
radius: "55%",
center: ["50%", "50%"],
data: temp1,
right: "66.6667%"
},
{
type: "pie",
radius: "55%",
center: ["50%", "50%"],
data: temp2,
left: "33.3333%",
right: "33.3333%"
},
{
type: "pie",
radius: "55%",
center: ["50%", "50%"],
data: temp3,
left: "66.6667%"
}
]
};
this.chartBar3 = echarts.init(this.$refs.echartDemo3);
this.chartBar3.setOption(option);
window.addEventListener("resize", () => {
this.chartBar3.resize();
});
},
css部分：
// 選中時(shí)的樣式
.active {
color: #00a950;
}
---以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解析Vue2 dist 目錄下各個(gè)文件的區(qū)別
本篇文章主要介紹了解析Vue2 dist 目錄下各個(gè)文件的區(qū)別，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹在Vue中是如何封裝axios的相關(guān)資料，axios的封裝主要是幫助我們簡(jiǎn)化代碼和利于后期的更新維護(hù)，感興趣的小伙伴可以和小編一起來閱讀下面文章的具體內(nèi)容2021-10-10
這篇文章主要介紹了vue多頁面開發(fā)和打包的正確處理方法，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細(xì)介紹了Vue參數(shù)的增刪改實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了vue中的生命周期及鉤子函數(shù),Vue?實(shí)例有一個(gè)完整的生命周期，也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載?Dom、渲染,下面文章詳細(xì)介紹,需要的朋友可以參考一下2021-12-12
這篇文章主要介紹了vue關(guān)于Promise的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue.js根據(jù)代碼運(yùn)行環(huán)境選擇baseurl的方法
本篇文章主要介紹了vue.js根據(jù)代碼運(yùn)行環(huán)境選擇baseurl的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了ESLint 是如何檢查 .vue 文件的，幫助大家更好的理解和使用ESLINT，感興趣的朋友可以了解下
2020-11-11 
Vue?el-table實(shí)現(xiàn)右鍵菜單功能
這篇文章主要為大家詳細(xì)介紹了Vue?el-table實(shí)現(xiàn)右鍵菜單功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04