Skip to content

S
SuperMan
Commit ecdf09a2 authored by youjie's avatar youjie
Browse files
Options

no message

parent 97621247
Show whitespace changes
Inline Side-by-side
Showing with 0 additions and 472 deletions
src/components/FinancialModule/DataAnalysis/components/oneEchart/IncomeShare copy.vue deleted 100644 → 0
View file @ 97621247
<template>
<div class="echartsBox">
<div class="titleBox" style="position: relative;">
<h3>月度收入占比 %</h3>
<div style="margin-left: 20px;position: absolute;top: 5px;left: 140px;">
<el-select v-model="CurrentMonth" @change="getEchart"
style="width: 120px;" size="small">
<el-option
v-for="item in MonthList"
:label="item"
:value="item"
:key="item"
></el-option>
</el-select>
</div>
</div>
<div style="background: #fff;">
<div id="ShareMyEchart" class="allMyEchartBox" style="width: 500px;height: 300px;"></div>
</div>
</div>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/2.0.4/echarts-gl.min.js"></script>
<script>
export default {
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
LineAnalysisDataHZ: [],//各线路统计
CostAnalysisData: [],//各成本统计
colorList:['#089bab','#FFA171','#72b8ff','#ff9cc6','#7b78ff','#28cc90','#ee8fff','#5cf2ff','#ff9a00','#4fc4f7','#738eff','#b0edff',
'rgba(228,57,57,.9)','rgba(248,126,46,1)','rgba(252,196,34,.7)','#3DD948','#39CAE4','rgba(44,49,241,.6)','rgba(122,57,228,.5)','#E65FC1','#D0B478','#BABABA',
'rgba(228,57,57,.7)','rgba(247,154,44,.7)','rgba(255,246,11,.7)','rgba(61,217,72,.7)','rgba(57,202,228,.7)','rgba(44,49,241,.7)','rgba(122,57,228,.7)'],
CurrentMonth: null
}
},
created() {
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.LineAnalysisDataHZ = n.LineAnalysisDataHZ//各线路统计
this.CostAnalysisData = n.CostAnalysisData//各成本统计
this.CurrentMonth = this.MonthList[this.MonthList.length-1]
// this.getEchart()
// this.initChartR2()
},
deep: true,
immediate: false,
}
},
mounted() {
this.initChartR2()
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
// return
let datas = [{
name: this.CurrentMonth,
type: 'pie',
radius: '50%',
data: [], // 绑定实时数据数组
emphasis: {
itemStyle: {
shadowBlur: 5,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
let titles = []
let Stocklegend = {}
let Newobj = {}
this.LineAnalysisDataHZ.forEach((x,indexs)=>{
let Name = `${x.Name}`
if(Name!='合计'){
titles.push(Name)
let newDetailList = []
x.DetailList.forEach(y=>{
if(y.Month==this.CurrentMonth) {
newDetailList.push(y)
}
})
if(newDetailList.length>0){
newDetailList.forEach((y,index)=>{
datas[0].data.push({
value: y.IncomeRate,
name: x.Name,
})
})
}
// if(indexs>3){
// let name=x.Name;
// Newobj[name]=false;
// }
// Stocklegend=Newobj;
}
})
let chartDom = document.getElementById('ShareMyEchart');
let myChart = this.$echarts.init(chartDom);
let option
option = {
color:this.colorList,
tooltip: {
trigger: 'item'
},
legend: {
bottom:'bottom',
left: 'left',
type:'scroll',
icon: "circle",
padding: [25, 20, 20, 20] ,
selected: Stocklegend
},
series: datas
}
myChart.setOption(option,true)
},
initChartR2() {
let chartDom = document.getElementById('ShareMyEchart');
let myChart = this.$echarts.init(chartDom);
function getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
height
) {
// 计算
const midRatio = (startRatio + endRatio) / 2
const startRadian = startRatio * Math.PI * 2
const endRadian = endRatio * Math.PI * 2
const midRadian = midRatio * Math.PI * 2
// 如果只有一个扇形，则不实现选中效果。
if (startRatio === 0 && endRatio === 1) {
isSelected = false
}
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
k = typeof k !== 'undefined' ? k : 1 / 3
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
// 计算高亮效果的放大比例（未高亮，则比例为 1）
const hoverRate = isHovered ? 1.05 : 1
// 返回曲面参数方程
return {
u: {
min: -Math.PI,
max: Math.PI * 3,
step: Math.PI / 32
},
v: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20
},
x: function(u, v) {
if (u < startRadian) {
return (
offsetX +
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
)
}
if (u > endRadian) {
return (
offsetX +
Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
)
}
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
},
y: function(u, v) {
if (u < startRadian) {
return (
offsetY +
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
)
}
if (u > endRadian) {
return (
offsetY +
Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
)
}
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
},
z: function(u, v) {
if (u < -Math.PI * 0.5) {
return Math.sin(u)
}
if (u > Math.PI * 2.5) {
return Math.sin(u)
}
return Math.sin(v) > 0 ? 1 * height : -1
}
}
}
// 生成模拟 3D 饼图的配置项
function getPie3D(pieData, internalDiameterRatio) {
const series = []
let sumValue = 0
let startValue = 0
let endValue = 0
const legendData = []
const k =
typeof internalDiameterRatio !== 'undefined'
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
: 1 / 3
// 为每一个饼图数据，生成一个 series-surface 配置
for (let i = 0; i < pieData.length; i++) {
sumValue += pieData[i].value
const seriesItem = {
name:
typeof pieData[i].name === 'undefined'
? `series${i}`
: pieData[i].name,
type: 'surface',
parametric: true,
wireframe: {
show: false
},
pieData: pieData[i],
pieStatus: {
selected: false,
hovered: false,
k: k
}
}
if (typeof pieData[i].itemStyle !== 'undefined') {
const itemStyle = {}
typeof pieData[i].itemStyle.color !== 'undefined'
? (itemStyle.color = pieData[i].itemStyle.color)
: null
typeof pieData[i].itemStyle.opacity !== 'undefined'
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
: null
seriesItem.itemStyle = itemStyle
}
series.push(seriesItem)
}
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
for (let i = 0; i < series.length; i++) {
endValue = startValue + series[i].pieData.value
series[i].pieData.startRatio = startValue / sumValue
series[i].pieData.endRatio = endValue / sumValue
series[i].parametricEquation = getParametricEquation(
series[i].pieData.startRatio,
series[i].pieData.endRatio,
false,
false,
k,
2000
)
startValue = endValue
legendData.push(series[i].name)
}
return series
}
// 传入数据生成 option
const optionsData = [
{
name: '国际货代',
value: 13.87,
itemStyle: {
opacity: 0.5,
color: '#7bc35a'
}
},
{
name: '租赁业务',
value: 0.6,
itemStyle: {
opacity: 0.5,
color: '#2f97df'
}
},
{
name: '仓储装卸',
value: 9.53,
itemStyle: {
opacity: 0.5,
color: '#4268d6'
}
},
{
name: '干线运输',
value: 72.17,
itemStyle: {
opacity: 0.5,
color: '#d35e5f'
}
},
{
name: '配送业务',
value: 3.67,
itemStyle: {
opacity: 0.5,
color: '#c2c763'
}
},
{
name: '其他业务',
value: 0.17,
itemStyle: {
opacity: 0.5,
color: '#8fdffe'
}
}
]
const series = getPie3D(optionsData.map(item => {
if (item.value < 5) {
item.value = 5
}
return item
}), 0, 240, 28, 26, 0.5)
series.push({
name: 'pie2d',
type: 'pie',
label: {
opacity: 1,
position: 'outside',
fontSize: 12,
lineHeight: 20,
textStyle: {
fontSize: 12,
color: '#fff'
}
},
labelLine: {
length: 30,
length2: 30
},
minAngle: 10,
startAngle: -50, // 起始角度，支持范围[0, 360]。
clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: ['0', '25%'],
center: ['50%', '50%'],
data: optionsData.map(item => {
item.itemStyle.opacity = 0
return item
})
})
// 准备待返回的配置项，把准备好的 legendData、series 传入。
const option = {
legend: {
show: false
},
animation: true,
tooltip: {
formatter: (params) => {
if (
params.seriesName !== 'mouseoutSeries' &&
params.seriesName !== 'pie2d'
) {
return `${
params.seriesName
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
params.color
};"></span>${
option.series[params.seriesIndex].pieData.value + '%'
}`
}
},
textStyle: {
fontSize: 14
}
},
title: {
x: 'center',
top: '20',
textStyle: {
color: '#fff',
fontSize: 22
}
},
// backgroundColor: '#0E3567',
labelLine: {
show: true,
lineStyle: {
color: '#7BC0CB'
},
normal: {
show: true,
length: 10,
length2: 10
}
},
label: {
show: true,
position: 'outside',
formatter: '{b} \n{d}%',
textStyle: {
color: '#fff',
fontSize: '12px'
}
},
xAxis3D: {
min: -1,
max: 1
},
yAxis3D: {
min: -1,
max: 1
},
zAxis3D: {
min: -1,
max: 1
},
grid3D: {
show: false,
boxHeight: 0.01,
// top: '30%',
bottom: '50%',
// environment: "rgba(255,255,255,0)",
viewControl: {
distance: 300,
alpha: 35,
beta: 60,
autoRotate: false // 自动旋转
}
},
series: series
}
myChart.setOption(option)
}
}
}
</script>
<style>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment