vue中Echarts使用動態(tài)數(shù)據(jù)的兩種實現(xiàn)方式
更新時間：2022年10月21日 16:46:02 作者：海闊天空.
這篇文章主要介紹了vue中Echarts使用動態(tài)數(shù)據(jù)的兩種實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Echarts使用動態(tài)數(shù)據(jù)的兩種方式
在使用Echarts時我們數(shù)據(jù)一般不是靜態(tài)寫死的，而是通過后端接口動態(tài)獲取的，在此總結(jié)兩種在vue框架下Echarts使用動態(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對應屬性值
//在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幾種常用圖表動態(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個月的出函數(shù)量（筆）",
min: 0,
max: 500,
interval: 100,
axisLabel: {
formatter: "{value}",
},
},
],
series: [
{
data: this.chartData,
type: "bar",
},
],
};
// echarts圖表自適應
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">保費收入</div>
</el-col>
<el-col :span="2">
<div :class="{active:isActive2===3}" @click="getDataMon12(3)" class="cursor-pointer">擔保金額</div>
</el-col> -->
</el-row>
<div ref="echartDemo1" class="chart-box" style="height: 400px"></div>
JS部分：
/**
* 獲取面積折線圖 filterType 1保函數(shù)量 2保費收入 3擔保金額 不傳返回所有
*/
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部分：
// 選中時的樣式
.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">保費收入</div>
</el-col>
<el-col :span="2">
<div :class="{active:isActive2===3}" @click="getDataMonLine(3)" class="cursor-pointer">擔保金額</div>
</el-col> -->
</el-row>
<div ref="echartDemo2" class="chart-box" style="height: 400px"></div>
JS部分：
/**
* 獲取層疊折線圖 filterType 1保函數(shù)量 2保費收入 3擔保金額 不傳返回所有
*/
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ù)/投標保函按月統(tǒng)計表格數(shù)據(jù)是：", res.data);
this.twelvemonthDataLine = res.data;
// 示例數(shù)據(jù)
// this.twelvemonthDataLine=[
// { detailList: [
// {countOrder: 0, guaranteeOrgName: "08擔保"},
// {countOrder: 0, guaranteeOrgName: "01擔保"},
// {countOrder: 4, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長安責任保險股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險"},
// {countOrder: 0, guaranteeOrgName: "02擔保"},
// ],
// ym: "2021-06"},
// {detailList: [
// {countOrder: 20, guaranteeOrgName: "08擔保"},
// {countOrder: 0, guaranteeOrgName: "01擔保"},
// {countOrder: 9, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔保有限公司"},
// {countOrder: 1, guaranteeOrgName: "長安責任保險股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險"},
// {countOrder: 0, guaranteeOrgName: "02擔保"},
// ],
// ym: "2021-07"},
// {detailList: [
// {countOrder: 6, guaranteeOrgName: "08擔保"},
// {countOrder: 0, guaranteeOrgName: "01擔保"},
// {countOrder: 0, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔保有限公司"},
// {countOrder: 1, guaranteeOrgName: "長安責任保險股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 1, guaranteeOrgName: "匯友保險"},
// {countOrder: 0, guaranteeOrgName: "02擔保"},
// ],
// ym: "2021-08"},
// {detailList: [
// {countOrder: 0, guaranteeOrgName: "08擔保"},
// {countOrder: 0, guaranteeOrgName: "01擔保"},
// {countOrder: 4, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長安責任保險股份有限公司"},
// {countOrder: 1, guaranteeOrgName: "陽光保險"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險"},
// {countOrder: 0, guaranteeOrgName: "02擔保"},
// ],
// ym: "2021-09"},
// {detailList: [
// {countOrder: 0, guaranteeOrgName: "08擔保"},
// {countOrder: 0, guaranteeOrgName: "01擔保"},
// {countOrder: 4, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長安責任保險股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險"},
// {countOrder: 0, guaranteeOrgName: "02擔保"},
// ],ym: "2021-10"},
// {detailList: [
// {countOrder: 0, guaranteeOrgName: "08擔保"},
// {countOrder: 0, guaranteeOrgName: "01擔保"},
// {countOrder: 1, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長安責任保險股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險"},
// {countOrder: 0, guaranteeOrgName: "02擔保"},
// ],ym: "2021-11"},
// {detailList: [
// {countOrder: 0, guaranteeOrgName: "08擔保"},
// {countOrder: 0, guaranteeOrgName: "01擔保"},
// {countOrder: 0, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長安責任保險股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險"},
// {countOrder: 0, guaranteeOrgName: "02擔保"},
// ],ym: "2021-12"},
// {detailList: [
// {countOrder: 12, guaranteeOrgName: "08擔保"},
// {countOrder: 4, guaranteeOrgName: "01擔保"},
// {countOrder: 4, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔保"},
// {countOrder: 7, guaranteeOrgName: "06擔保"},
// {countOrder: 3, guaranteeOrgName: "06擔保"},
// {countOrder: 1, guaranteeOrgName: "河南華誠工程擔保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長安責任保險股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險"},
// {countOrder: 0, guaranteeOrgName: "02擔保"},
// ],ym: "2022-01"},
// {detailList: [
// {countOrder: 0, guaranteeOrgName: "08擔保"},
// {countOrder: 0, guaranteeOrgName: "01擔保"},
// {countOrder: 0, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長安責任保險股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險"},
// {countOrder: 0, guaranteeOrgName: "02擔保"},
// ],ym: "2022-02"},
// {detailList: [
// {countOrder: 0, guaranteeOrgName: "08擔保"},
// {countOrder: 0, guaranteeOrgName: "01擔保"},
// {countOrder: 0, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長安責任保險股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險"},
// {countOrder: 0, guaranteeOrgName: "02擔保"},
// ],ym: "2022-03"},
// {detailList: [
// {countOrder: 0, guaranteeOrgName: "08擔保"},
// {countOrder: 6, guaranteeOrgName: "01擔保"},
// {countOrder: 0, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長安責任保險股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險"},
// {countOrder: 1, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險"},
// {countOrder: 0, guaranteeOrgName: "02擔保"},
// ],ym: "2022-04"},
// {detailList: [
// {countOrder: 3, guaranteeOrgName: "08擔保"},
// {countOrder: 13, guaranteeOrgName: "01擔保"},
// {countOrder: 0, guaranteeOrgName: "中原銀行股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "07擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "06擔保"},
// {countOrder: 0, guaranteeOrgName: "河南華誠工程擔保有限公司"},
// {countOrder: 0, guaranteeOrgName: "長安責任保險股份有限公司"},
// {countOrder: 0, guaranteeOrgName: "陽光保險"},
// {countOrder: 0, guaranteeOrgName: "中聯(lián)銀"},
// {countOrder: 0, guaranteeOrgName: "匯友保險"},
// {countOrder: 0, guaranteeOrgName: "02擔保"},
// ],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({
// 每個擔保機構，對應一條折線圖
name: data[i].guaranteeOrgName,
type: "line",
data: countOrders // 每個擔保機構，對應的橫坐標的值組成的數(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部分：
// 選中時的樣式
.active {
color: #00a950;
}
4.餅狀圖
效果圖
代碼片段
HTML部分：
<div class="piechart">
<div class="tittle">
<div class="text1">交易平臺統(tǒng)計</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ù)據(jù)刷新 1為投標保函按月合計 2為出函平臺統(tǒng)計的時間選擇器 3為出函機構統(tǒng)計的時間選擇器 4為交易平臺統(tǒng)計的時間選擇器
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("出函平臺數(shù)據(jù)：", res.data);
this.issuinGuaranteeData = res.data;
//后臺響應數(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} (umuaqsy%)"
},
title: [
{
subtext: "保函數(shù)量占比",
left: "16.67%",
top: "5%",
textAlign: "center"
},
{
subtext: "保函金額占比",
left: "50%",
top: "5%",
textAlign: "center"
},
{
subtext: "擔保金額占比",
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部分：
// 選中時的樣式
.active {
color: #00a950;
}
---以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了vue中ref實現(xiàn)子向父傳值的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
這篇文章主要為大家詳細介紹了Vue生命周期的示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了vue中關于template報錯等問題的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
前端vue按1920*1080設計圖的頁面適配屏幕縮放并適配4K屏詳解
最近在做一個數(shù)據(jù)可視化的項目,整個項目全是大屏展示,期間也是遇到很多問題,最令人頭疼的就是大屏的適配,下面這篇文章主要給大家介紹了前端vue按1920*1080設計圖的頁面適配屏幕縮放并適配4K屏的相關資料,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細介紹了Vue導入Echarts實現(xiàn)折線散點圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家介紹了Javascript對象及Proxy工作原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
vue 實現(xiàn)強制類型轉(zhuǎn)換 數(shù)字類型轉(zhuǎn)為字符串
今天小編就為大家分享一篇vue 實現(xiàn)強制類型轉(zhuǎn)換 數(shù)字類型轉(zhuǎn)為字符串，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
父組件向子組件傳值，使用 props：可以通過在子組件上綁定 props，然后在父組件中通過 v-bind 綁定相應的數(shù)據(jù)來傳遞數(shù)據(jù)，這篇文章主要介紹了Vue?組件之間傳值的方法,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue使用Canvas在畫布上添加圖片方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
在VSCode中添加好用的插件可以提高我們的開發(fā)效率,這些可以幫助我們格式化,擴充性,執(zhí)行最佳實踐的代碼方式,自動完成一些瑣碎的事情,下面這篇文章主要給大家推薦介紹了關于Vue3開發(fā)必備的六個VSCode插件,需要的朋友可以參考下2022-12-12