本文已参与「新人创作礼」活动，一起开启掘金创作之路.
<template>
<div id="bost" style="width:800px;height:600px"></div>
</template>
<script>
import * as echarts from "echarts";
import { onMounted } from "@vue/runtime-core";
import axios from "axios";
//import { text } from 'express'
// 3、统计各个年费下商品库存总数分布，形成饼图
export default {
name: "App",
setup() {
onMounted(() => {
axios.get("/api/getYearCount").then((res)=>{
var arrmap = new Map()
for(var i=0;i<res.data.length;i++){
var number=res.data[i].p_number//获取库存数量
var p_type = res.data[i].p_type//获取当前商品名字
if(arrmap.has(p_type)){
var tempnunber =arrmap.get(p_type)
arrmap.set(p_type,tempnunber+number)
}else{
arrmap.set(p_type,number)
}
}
//饼图分析
var Stringarrtile =[]
var Stringarrtiles =[]
var objkcs=[]
for (let i of arrmap) {
Stringarrtile.push(i[0])
Stringarrtiles.push(i[1])
}
for(let i=0;i<Stringarrtile.length;i++){
var d =new Object();
d.name = Stringarrtile[i]
d.value= Stringarrtiles[i]
objkcs.push(d)
}
console.log(objkcs)
var chartDom =document.getElementById('bost');
var myChart = echarts.init(chartDom);
var option;
option = {
title:{
text:'2020年份库存总数分布',
subtext:'总数',
left:'center'
},
tooltip:{
trigger:'item'
},
legend:{
orient:'vertical',
left:'left'
},
series:[
{
name:'Acess From',
type:'pie',
radius:'50%',
data: objkcs,//饼图数据处理
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
option && myChart.setOption(option);
})
});
},
};
</script>
多个水平饼图
<template>
<div id="bost" style="width:500px;height:600px"></div>
<div id="bost1" style="width:500px;height:600px"></div>
<div id="bost2" style="width:500px;height:600px"></div>
<div id="bost3" style="width:500px;height:600px"></div>
<div id="bost4" style="width:500px;height:600px"></div>
<div id="bost5" style="width:500px;height:600px"></div>
<div id="bost6" style="width:500px;height:600px"></div>
<div id="bost7" style="width:500px;height:600px"></div>
<div id="bost8" style="width:500px;height:600px"></div>
</template>
<script>
import * as echarts from "echarts";
import { onMounted } from "@vue/runtime-core";
import axios from "axios";
//import { text } from 'express'
// 统计不同保险公司下，各个保险类别下的保险人数汇总（每个保险公司一个饼）水平排列多个饼
export default {
name: "App",
setup() {
onMounted(() => {
axios.get("/api/getBaoxian").then((res)=>{
let arrmap = new Map()
let names = new Set()
for(let i=0;i<res.data.length;i++){
let number=res.data[i].p_company//获取保险名字
let p_type = res.data[i].p_type//获取保险类别
names.add(number)
if(arrmap.has(number+p_type)){
let tempnunber =arrmap.get(number+p_type)
arrmap.set(number+p_type,tempnunber+1)
}else{
arrmap.set(number+p_type,1)
}
}
var ygobjkct1=[]
var ygobjkct2=[]
var ygobjkct3=[]
var ygobjkct4=[]
var ygobjkct5=[]
var ygobjkct6=[]
var ygobjkct7=[]
var ygobjkct8=[]
var ygobjkct9=[]
for (let i of arrmap) {
let objks =new Object
objks.name=i[0]
objks.value=i[1]
let temp = i[0]+''
if(temp.indexOf('阳光人寿')!=-1){
ygobjkct1.push(objks)
}
if(temp.indexOf('华夏人寿')!=-1){
ygobjkct2.push(objks)
}
if(temp.indexOf('新华人寿')!=-1){
ygobjkct3.push(objks)
}
if(temp.indexOf('平安人寿')!=-1){
ygobjkct4.push(objks)
}
if(temp.indexOf('泰康人寿')!=-1){
ygobjkct5.push(objks)
}
if(temp.indexOf('人保寿险')!=-1){
ygobjkct6.push(objks)
}
if(temp.indexOf('太平洋人寿')!=-1){
ygobjkct7.push(objks)
}
if(temp.indexOf('中国人寿')!=-1){
ygobjkct8.push(objks)
}
if(temp.indexOf('太平人寿')!=-1){
ygobjkct9.push(objks)
}
}
//开始饼图
var chartDom =document.getElementById('bost');
var myChart = echarts.init(chartDom);
var option;
option = {
title:{
text:ygobjkct1[0].name.substr(0,4),
subtext:'总数',
left:'center'
},
tooltip:{
trigger:'item'
},
legend:{
orient:'vertical',
left:'left'
},
series:[
{
type:'pie',
radius:'50%',
data: ygobjkct1,//饼图数据处理
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
option && myChart.setOption(option);
//开始饼图
var chartDom1 =document.getElementById('bost1');
var myChar1t = echarts.init(chartDom1);
var option1;
option1 = {
title:{
text:ygobjkct2[0].name.substr(0,4),
subtext:'总数',
left:'center'
},
tooltip:{
trigger:'item'
},
legend:{
orient:'vertical',
left:'left'
},
series:[
{
type:'pie',
radius:'50%',
data: ygobjkct2,//饼图数据处理
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
option1 && myChar1t.setOption(option1);
})
//设置多个饼图
});
},
};
</script>
<style>
div{
float: left;
}
</style>
