elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

还原图表

shibei_master
jiangyy 3 years ago
parent
75e7d16ffa
commit
58a4a04a37
4 changed files with 183 additions and 755 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 86
      src/views/modules/visual/communityGovern/shijianchuli/lineOption copy.js
  2. 183
      src/views/modules/visual/communityGovern/shijianchuli/pieOption copy.js
  3. 311
      src/views/modules/visual/communityGovern/shijianchuli/pieOption.js
  4. 358
      src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue

86
src/views/modules/visual/communityGovern/shijianchuli/lineOption copy.js
View File

@ -1,86 +0,0 @@
import * as echarts from 'echarts'
export function lineOption () {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
xAxis: {
type: 'category',
// boundaryGap: false,
axisLabel: {
color: '#8ec7dc',
fontSize: 16
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#0c4b59'
}
}
},
yAxis: {
nameTextStyle: {
color: '#8ec7dc',
fontSize: 18
},
splitNumber: 4,
minInterval: 1,
show: true,
type: 'value',
axisLabel: {
color: '#8ec7dc',
fontSize: 18
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: ['#145968'],
type: 'dotted'
}
},
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolOffset: [0, 15],
lineStyle: {
color: '#0c4b59'
}
}
},
series: [
{
name: '项目数',
type: 'line',
smooth: true,
barWidth: 15,
areaStyle: {},
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[
{ offset: 0, color: 'rgba(121, 55, 255, 0)' },
{ offset: 1, color: '#6339FF' }
]
)
}
},
// {
// data: [820, 932, 901, 934, 1290, 1330, 1320],
// type: 'line',
// areaStyle: {}
// }
]
}
}

183
src/views/modules/visual/communityGovern/shijianchuli/pieOption copy.js
View File

@ -1,183 +0,0 @@
export function pieOption (_charts) {
const center= ['50%', '170px']
return {
title: {
text: '0',
top: 140,
left: 'center',
textStyle: {
width: '100%',
fontSize: 32,
color: '#FFFFFF',
fontWeight: 400
},
itemGap: 5,
subtext: '总数',
subtextStyle: {
fontSize: 20,
color: '#fff',
fontWeight: 400
}
},
tooltip: {
show: false
},
// legend: {
// top: 350,
// bottom: 0,
// itemWidth: 20,
// itemHeight: 10,
// textStyle: {
// color: '#D2E7FF',
// fontSize: 16,
// lineHeight: 20,
// },
// },
series: [
// 外侧圆环
{
type: 'pie',
// 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
startAngle: 0,
hoverAnimation: false,
// tooltip: {
// },
center: center,
radius: ['58%', '58.3%'],
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 360,
itemStyle: {
normal: {
color: 'rgba(40, 101, 250, 0)',
width:0,
borderColor: 'rgba(40, 101, 250, 0.5)',
borderWidth: 1,
borderType: 'dotted'
}
}
}
]
},
// 突出的
{
hoverAnimation: false,
// name: 'Access From',
type: 'pie',
center: center,
radius: ['35%', '48%'],
avoidLabelOverlap: false,
// top: top + '%',
// height: '80%',
selectedMode: 'single',
left: 'center',
width: 400,
label: {
// show: false,
position: 'outside',
alignTo: 'edge',
// formatter: '{a|{c}}\n\n{name|{b}}',
formatter: '{a|{c}%}\n{r|}\n{name|{b}}',
minMargin: 5,
edgeDistance: 1,
lineHeight: 15,
color: '#fff',
fontSize: 12,
// distanceToLabelLine: -60,
rich: {
name: {
padding: [0, 6, 0, 6]
},
a: {
fontSize: 30,
color: '#fff',
padding: [0, 6, 6, 6]
},
r: {
backgroundColor: 'auto',
borderRadius: 6,
width: 6,
height: 6,
// padding: [3, 3, 0, -12]
}
}
},
labelLine: {
show: false,
smooth: 0.2,
length: 30,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < _charts.getWidth() / 2;
const points = params.labelLinePoints;
// Update the end point.
if (points) {
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
}
return {
labelLinePoints: points
};
},
itemStyle: {
color:function(params) {
//自定义颜色
var colorList = [ '#FAC126', '#3DDA83'];
return colorList[params.dataIndex]
}
},
data: [],
},
// 中间圆环
{
type: 'pie',
// 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
startAngle: 0,
hoverAnimation: false,
center: center,
// tooltip: {
// },
radius: ['0%', '25%'],
label: {
show: false
},
labelLine: {
show: false
},
data: [{
value: 360,
itemStyle: {
normal: {
color: 'rgba(8, 37, 134, 1)',
}
}
}
]
},
]
}
}

311
src/views/modules/visual/communityGovern/shijianchuli/pieOption.js
View File

@ -1,183 +1,184 @@
export function pieOption (_charts) { export function pieOption (_charts) {
const center= ['50%', '170px'] const center= ['50%', '170px']
return { return {
title: { title: {
text: '0', text: '0',
top: 140, top: 140,
left: 'center', left: 'center',
textStyle: { textStyle: {
width: '100%', width: '100%',
fontSize: 32, fontSize: 32,
color: '#FFFFFF', color: '#FFFFFF',
fontWeight: 400 fontWeight: 400
},
itemGap: 5,
subtext: '总数',
subtextStyle: {
fontSize: 20,
color: '#fff',
fontWeight: 400
}
},
tooltip: {
show: false
},
// legend: {
// top: 350,
// bottom: 0,
// itemWidth: 20,
// itemHeight: 10,
// textStyle: {
// color: '#D2E7FF',
// fontSize: 16,
// lineHeight: 20,
// },
// },
series: [
// 外侧圆环
{
type: 'pie',
// 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
startAngle: 0,
hoverAnimation: false,
// tooltip: {
// },
center: center,
radius: ['58%', '58.3%'],
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
}, },
data: [{ itemGap: 5,
value: 360, subtext: '总数',
itemStyle: { subtextStyle: {
normal: { fontSize: 20,
color: 'rgba(40, 101, 250, 0)', color: '#fff',
width:0, fontWeight: 400
borderColor: 'rgba(40, 101, 250, 0.5)',
borderWidth: 1,
borderType: 'dotted'
}
}
} }
]
}, },
tooltip: {
// 突出的 show: false
{
hoverAnimation: false,
// name: 'Access From',
type: 'pie',
center: center,
radius: ['35%', '48%'],
avoidLabelOverlap: false,
// top: top + '%',
// height: '80%',
selectedMode: 'single',
left: 'center',
width: 400,
label: {
// show: false,
position: 'outside',
alignTo: 'edge',
// formatter: '{a|{c}}\n\n{name|{b}}',
formatter: '{a|{c}%}\n{r|}\n{name|{b}}',
minMargin: 5,
edgeDistance: 1,
lineHeight: 15,
color: '#fff',
fontSize: 12,
// distanceToLabelLine: -60,
rich: {
name: {
padding: [0, 6, 0, 6]
},
a: {
fontSize: 30,
color: '#fff',
padding: [0, 6, 6, 6]
},
r: {
backgroundColor: 'auto',
borderRadius: 6,
width: 6,
height: 6,
// padding: [3, 3, 0, -12]
}
}
},
labelLine: {
show: false,
smooth: 0.2,
length: 30,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < _charts.getWidth() / 2;
const points = params.labelLinePoints;
// Update the end point.
if (points) {
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
}
return {
labelLinePoints: points
};
},
itemStyle: {
color:function(params) {
//自定义颜色
var colorList = [ '#FAC126', '#3DDA83'];
return colorList[params.dataIndex]
}
},
data: [],
}, },
// 中间圆环 // legend: {
{ // top: 350,
// bottom: 0,
// itemWidth: 20,
// itemHeight: 10,
// textStyle: {
// color: '#D2E7FF',
// fontSize: 16,
// lineHeight: 20,
// },
// },
series: [
// 外侧圆环
{
type: 'pie', type: 'pie',
// 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
startAngle: 0, startAngle: 0,
hoverAnimation: false, hoverAnimation: false,
center: center,
// tooltip: { // tooltip: {
// }, // },
radius: ['0%', '25%'], center: center,
radius: ['58%', '58.3%'],
label: { label: {
normal: {
show: false show: false
}
}, },
labelLine: { labelLine: {
normal: {
show: false show: false
}
}, },
data: [{ data: [{
value: 360, value: 360,
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgba(8, 37, 134, 1)', color: 'rgba(40, 101, 250, 0)',
width:0,
borderColor: 'rgba(40, 101, 250, 0.5)',
borderWidth: 1,
borderType: 'dotted'
} }
} }
} }
] ]
}, },
]
// 突出的
{
hoverAnimation: false,
// name: 'Access From',
type: 'pie',
center: center,
radius: ['35%', '48%'],
avoidLabelOverlap: false,
// top: top + '%',
// height: '80%',
selectedMode: 'single',
left: 'center',
width: 400,
label: {
// show: false,
position: 'outside',
alignTo: 'edge',
// formatter: '{a|{c}}\n\n{name|{b}}',
formatter: '{a|{c}%}\n{r|}\n{name|{b}}',
minMargin: 5,
edgeDistance: 1,
lineHeight: 15,
color: '#fff',
fontSize: 12,
// distanceToLabelLine: -60,
rich: {
name: {
padding: [0, 6, 0, 6]
},
a: {
fontSize: 30,
color: '#fff',
padding: [0, 6, 6, 6]
},
r: {
backgroundColor: 'auto',
borderRadius: 6,
width: 6,
height: 6,
// padding: [3, 3, 0, -12]
}
}
},
labelLine: {
show: false,
smooth: 0.2,
length: 30,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < _charts.getWidth() / 2;
const points = params.labelLinePoints;
// Update the end point.
if (points) {
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
}
return {
labelLinePoints: points
};
},
itemStyle: {
color:function(params) {
//自定义颜色
var colorList = [ '#FAC126', '#3DDA83'];
return colorList[params.dataIndex]
}
},
data: [],
},
// 中间圆环
{
type: 'pie',
// 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
startAngle: 0,
hoverAnimation: false,
center: center,
// tooltip: {
// },
radius: ['0%', '25%'],
label: {
show: false
},
labelLine: {
show: false
},
data: [{
value: 360,
itemStyle: {
normal: {
color: 'rgba(8, 37, 134, 1)',
}
}
}
]
},
]
}
} }
}

358
src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue
View File

@ -23,7 +23,7 @@
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
@click.native="handleChangeDate(item.value,true)"> @click.native="handleChangeDate(item.value)">
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
@ -47,32 +47,26 @@
</div> </div>
<div class="g-cpt-resi"> <div class="g-cpt-resi">
<div class="g-l"> <div class="g-l">
<div class="bottom_label"
style="margin-top:20px">事件总览</div>
<div class="l_top"> <div class="l_top">
<div v-if="!pieNoData && !dataLoading" <div v-if="!pieNoData && !dataLoading"
class="g-pie"> class="g-pie">
<div class="chart-container"> <screen-echarts-frame class="echart-wr"
<div class="chart"
id="cityGreenLand"
ref="chart"></div>
<!-- <screen-echarts-frame class="echart-wr"
@myChartMethod="pieInitOk" @myChartMethod="pieInitOk"
ref="pieChart"></screen-echarts-frame> --> ref="pieChart"></screen-echarts-frame>
<!-- 底座背景 -->
<div class="bg"></div>
</div>
<!-- <div class="pie-legend"> <div class="pie-legend">
<div :class="['legend_item',{'item_last':index===legendArray.length-1}]" <div :class="['legend_item',{'item_last':index===legendArray.length-1}]"
v-for="(item,index) in legendArray" v-for="(item,index) in legendArray"
:key="index"> :key="index">
<div class="item_name">{{item.name}}</div> <div class="item_name">{{item.name}}</div>
<img :src="item.url" /> <img :src="item.url" />
<!-- <div class="item_num">
<span class="item_count">{{item.count}}</span>
<span class="item_percent">{{item.percent}}</span>
</div> -->
</div> </div>
</div> --> </div>
</div> </div>
<screen-nodata class="nodata" <screen-nodata class="nodata"
@ -146,11 +140,6 @@ import { lineOption } from './lineOption.js'
import nextTick from 'dai-js/tools/nextTick' import nextTick from 'dai-js/tools/nextTick'
import dateFormat from "dai-js/tools/dateFormat"; import dateFormat from "dai-js/tools/dateFormat";
import * as echarts from 'echarts';
import 'echarts-gl';
import { getPie3D, getParametricEquation } from './chart.js' //工具类js，页面路径自己修改
const color = ['#005aff', '#f8b551']
export default { export default {
name: "shijianchulifenxi", name: "shijianchulifenxi",
@ -180,18 +169,6 @@ export default {
pieData: [], pieData: [],
optionData: [
{
name: '处理中',
value: 28
},
{
name: '已完成',
value: 72
}
],
statusChart: null,
option: {},
legendArray: [ legendArray: [
{ {
@ -315,23 +292,21 @@ export default {
//初始化时间、各组件 //初始化时间、各组件
this.initData() this.initData()
await this.getAgencylist()//获取组织级别 await this.getAgencylist()//获取组织级别
this.handleChangeDate(this.dataType, false) this.handleChangeDate(this.dataType)
//获取服务器数据 //获取服务器数据
await this.getProjectTotal() await this.getProjectTotal()
await this.getLineChart() await this.getLineChart()
await this.getTable()
this.dataLoading = false this.dataLoading = false
this.assignData() // this.assignData()
}, },
methods: { methods: {
async getApiData () { async getApiData () {
this.getTable()
await this.getProjectTotal() await this.getProjectTotal()
await this.getLineChart() await this.getLineChart()
@ -339,7 +314,7 @@ export default {
}, },
async handleChangeDate (index, isRefresh) { async handleChangeDate (index) {
let end = new Date(); let end = new Date();
let start = new Date(); let start = new Date();
if (index === '1') {//近一年 if (index === '1') {//近一年
@ -358,7 +333,7 @@ export default {
this.queryStartTime = dateFormat(start, 'yyyy-MM-dd') + " 00:00:00" this.queryStartTime = dateFormat(start, 'yyyy-MM-dd') + " 00:00:00"
this.queryEndTime = dateFormat(end, 'yyyy-MM-dd') + " 23:59:59" this.queryEndTime = dateFormat(end, 'yyyy-MM-dd') + " 23:59:59"
} }
if (index !== '0' && isRefresh) { if (index !== '0') {
await this.getApiData() await this.getApiData()
// this.assignPieChart() // this.assignPieChart()
} }
@ -367,8 +342,8 @@ export default {
}, },
assignData () { assignData () {
this.initChart()
// this.getPie() this.getPie()
this.getLine() this.getLine()
}, },
@ -409,10 +384,10 @@ export default {
//加载项目 //加载项目
async getProjectTotal () { async getProjectTotal () {
// if (this.$refs.pieChart) { if (this.$refs.pieChart) {
// this.$refs.pieChart.showLoading() this.$refs.pieChart.showLoading()
// this.$refs.pieChart.clear() this.$refs.pieChart.clear()
// } }
const url = "/gov/project/icEvent/processAnalysis/processStatusRatio"; const url = "/gov/project/icEvent/processAnalysis/processStatusRatio";
//const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/processStatusRatio"; //const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/processStatusRatio";
@ -424,9 +399,9 @@ export default {
}; };
const { data, code, msg } = await requestPost(url, params); const { data, code, msg } = await requestPost(url, params);
// if (this.$refs.pieChart) { if (this.$refs.pieChart) {
// this.$refs.pieChart.hideLoading() this.$refs.pieChart.hideLoading()
// } }
if (code === 0) { if (code === 0) {
this.projectTotal = parseInt(data.processingCount) + parseInt(data.closedCount); this.projectTotal = parseInt(data.processingCount) + parseInt(data.closedCount);
@ -445,7 +420,7 @@ export default {
} }
] ]
this.optionData = [ this.pieData = [
{ {
name: "已完成", name: "已完成",
@ -456,7 +431,6 @@ export default {
value: Math.floor(data.processingRatio * 10000) / 100 value: Math.floor(data.processingRatio * 10000) / 100
}, },
] ]
this.setLabel()
} else { } else {
this.$message.error(msg); this.$message.error(msg);
@ -590,7 +564,6 @@ export default {
xAxis: { data: this.lineXaxis }, xAxis: { data: this.lineXaxis },
series: [ series: [
{ data: this.lineSeriesData }, { data: this.lineSeriesData },
{ data: this.lineSeriesData },
] ]
}, true) }, true)
@ -682,6 +655,8 @@ export default {
} }
}); });
this.pieOption.series[1].data = this.pieData this.pieOption.series[1].data = this.pieData
this.demand.pageNo = 1 this.demand.pageNo = 1
this.getTable() this.getTable()
@ -690,256 +665,6 @@ export default {
this.$refs.pieChart.setOption(this.pieOption) this.$refs.pieChart.setOption(this.pieOption)
}, },
setLabel () {
this.optionData.forEach((item, index) => {
item.itemStyle = {
color: color[index]
}
item.label = {
normal: {
show: true,
color: color[index],
formatter: [
'{d|{d}%}',
'{b|{b}}'
].join('\n'), // 用\n来换行
rich: {
b: {
color: '#fff',
lineHeight: 25,
align: 'left',
fontSize: 13,
marginTop: 20
},
c: {
fontSize: 22,
color: '#fff',
textShadowColor: '#1c90a6',
textShadowOffsetX: 0,
textShadowOffsetY: 2,
textShadowBlur: 5
},
d: {
color: color[index],
fontSize: 22,
align: 'left'
}
}
}
}
item.labelLine = {
normal: {
length: 30,
length2: 80,
lineStyle: {
width: 1,
color: 'rgba(255,255,255,0.7)'
}
}
}
item.labelLayout = function (params) {
const isLeft = params.labelRect.x < myChart.getWidth() / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
}
})
},
// 图表初始化
initChart () {
this.$nextTick(() => {
// let statusChart = echarts.init(document.getElementById('cityGreenLand-charts'));
this.statusChart = echarts.init(document.getElementById('cityGreenLand'));
// 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
this.option = getPie3D(this.optionData, 0.8, 300, 28, 22, 0.4)
this.statusChart.setOption(this.option)
// 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
this.option.series.push({
name: '', //自己根据场景修改
backgroundColor: 'transparent',
type: 'pie',
label: {
opacity: 1,
fontSize: 13,
lineHeight: 20
},
startAngle: 40, // 起始角度，支持范围[0, 360]。
clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: ['30%', '35%'],
center: ['50%', '50%'],
data: this.optionData,
itemStyle: {
opacity: 0 //这里必须是0，不然2d的图会覆盖在表面
}
})
this.statusChart.setOption(this.option)
this.bindListen(this.statusChart)
})
},
// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
// optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
bindListen (myChart, optionName = 'option') {
let selectedIndex = ''
let hoveredIndex = ''
// 监听点击事件，实现选中效果（单选）
myChart.on('click', (params) => {
debugger
// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
const isSelected = !this[optionName].series[params.seriesIndex].pieStatus
.selected
const isHovered =
this[optionName].series[params.seriesIndex].pieStatus.hovered
const k = this[optionName].series[params.seriesIndex].pieStatus.k
const startRatio =
this[optionName].series[params.seriesIndex].pieData.startRatio
const endRatio =
this[optionName].series[params.seriesIndex].pieData.endRatio
// 如果之前选中过其他扇形，将其取消选中（对 option 更新）
if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
this[optionName].series[
selectedIndex
].parametricEquation = getParametricEquation(
this[optionName].series[selectedIndex].pieData.startRatio,
this[optionName].series[selectedIndex].pieData.endRatio,
false,
false,
k,
this[optionName].series[selectedIndex].pieData.value
)
this[optionName].series[selectedIndex].pieStatus.selected = false
}
// 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
this[optionName].series[
params.seriesIndex
].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
this[optionName].series[params.seriesIndex].pieData.value
)
this[optionName].series[params.seriesIndex].pieStatus.selected = isSelected
// 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
selectedIndex = isSelected ? params.seriesIndex : null
// 使用更新后的 option，渲染图表
myChart.setOption(this[optionName])
})
// 监听 mouseover，近似实现高亮（放大）效果
myChart.on('mouseover', (params) => {
// 准备重新渲染扇形所需的参数
let isSelected
let isHovered
let startRatio
let endRatio
let k
// 如果触发 mouseover 的扇形当前已高亮，则不做操作
if (hoveredIndex === params.seriesIndex) {
// 否则进行高亮及必要的取消高亮操作
} else {
// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
if (hoveredIndex !== '') {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
isSelected = this[optionName].series[hoveredIndex].pieStatus.selected
isHovered = false
startRatio = this[optionName].series[hoveredIndex].pieData.startRatio
endRatio = this[optionName].series[hoveredIndex].pieData.endRatio
k = this[optionName].series[hoveredIndex].pieStatus.k
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
this[optionName].series[
hoveredIndex
].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
this[optionName].series[hoveredIndex].pieData.value
)
this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = ''
}
// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
if (
params.seriesName !== 'mouseoutSeries' &&
params.seriesName !== 'pie2d'
) {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected =
this[optionName].series[params.seriesIndex].pieStatus.selected
isHovered = true
startRatio =
this[optionName].series[params.seriesIndex].pieData.startRatio
endRatio = this[optionName].series[params.seriesIndex].pieData.endRatio
k = this[optionName].series[params.seriesIndex].pieStatus.k
// 对当前点击的扇形，执行高亮操作（对 option 更新）
this[optionName].series[
params.seriesIndex
].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
this[optionName].series[params.seriesIndex].pieData.value + 60
)
this[optionName].series[
params.seriesIndex
].pieStatus.hovered = isHovered
// 记录上次高亮的扇形对应的系列号 seriesIndex
hoveredIndex = params.seriesIndex
}
// 使用更新后的 option，渲染图表
myChart.setOption(this[optionName])
}
})
// 修正取消高亮失败的 bug
myChart.on('globalout', () => {
// 准备重新渲染扇形所需的参数
let isSelected
let isHovered
let startRatio
let endRatio
let k
if (hoveredIndex !== '') {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected = this[optionName].series[hoveredIndex].pieStatus.selected
isHovered = false
k = this[optionName].series[hoveredIndex].pieStatus.k
startRatio = this[optionName].series[hoveredIndex].pieData.startRatio
endRatio = this[optionName].series[hoveredIndex].pieData.endRatio
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
this[optionName].series[
hoveredIndex
].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
this[optionName].series[hoveredIndex].pieData.value
)
this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = ''
}
// 使用更新后的 option，渲染图表
myChart.setOption(this[optionName])
})
},
handleChangeAgency () { handleChangeAgency () {
let obj = this.$refs["myCascader"].getCheckedNodes()[0].data let obj = this.$refs["myCascader"].getCheckedNodes()[0].data
if (obj) { if (obj) {
@ -994,7 +719,7 @@ export default {
this.userId = id; this.userId = id;
}, },
userId () { userId () {
// this.getApiData();
window.scrollTo(0, 0); window.scrollTo(0, 0);
}, },
}, },
@ -1012,33 +737,4 @@ export default {
scoped scoped
></style> ></style>
<style lang='scss' scoped>
.chart-container {
position: relative;
width: 600px;
height: 500px;
margin-top: 0;
.chart,
.bg {
width: 600px;
height: 500px;
z-index: 2;
}
.bg {
position: absolute;
bottom: 155px;
left: 50%;
z-index: 1;
width: 250px;
height: 140px;
background: no-repeat center;
background-image: url("../../../../../assets/img/shuju/3d-pid-bg.png");
background-size: 100% 100%;
transform: translateX(-50%);
}
}
</style>

Write Preview
Loading…
Cancel
Save