产业分析留档
This commit is contained in:
parent
31ad5b577b
commit
0378087eeb
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 25 KiB |
134
src/views/dataV/pageOne/AreaCount copy.vue
Normal file
134
src/views/dataV/pageOne/AreaCount copy.vue
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
<template>
|
||||||
|
<div class="w100 h100">
|
||||||
|
<div class="echart" id="mychart" style="height: 100%"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { autoHover } from '../echartsOption';
|
||||||
|
export default {
|
||||||
|
name: '',
|
||||||
|
mixins: [],
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {},
|
||||||
|
created() {},
|
||||||
|
mounted() {
|
||||||
|
this.initEcharts();
|
||||||
|
},
|
||||||
|
destroyed() {},
|
||||||
|
methods: {
|
||||||
|
initEcharts() {
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '10%',
|
||||||
|
right: '3%',
|
||||||
|
left: '5%',
|
||||||
|
bottom: '10%',
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
'产业园规划',
|
||||||
|
'标准农田',
|
||||||
|
'种植业',
|
||||||
|
'标注养殖',
|
||||||
|
'养殖业',
|
||||||
|
'高标准农田',
|
||||||
|
],
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#FFFFFF',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
margin: 10,
|
||||||
|
color: '#e2e9ff',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}',
|
||||||
|
color: '#e2e9ff',
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(0,186,255,.6)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255,0.12)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
data: [80, 80, 97, 53, 95, 26],
|
||||||
|
barWidth: '14px',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: this.$echarts.graphic.LinearGradient(0,0,0,1,[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(0,244,255,1)', // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(0,77,167,1)', // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],false
|
||||||
|
),
|
||||||
|
shadowColor: 'rgba(0,160,221,1)',
|
||||||
|
shadowBlur: 4,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
lineHeight: 30,
|
||||||
|
formatter: '{c}',
|
||||||
|
position: 'top',
|
||||||
|
textStyle: {
|
||||||
|
color: '#00D6F9',
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const myChart = this.$echarts.init(document.getElementById('mychart'));
|
||||||
|
myChart.setOption(option);
|
||||||
|
autoHover(myChart,option,1500);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
114
src/views/dataV/pageOne/HomeCount copy.vue
Normal file
114
src/views/dataV/pageOne/HomeCount copy.vue
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
<template>
|
||||||
|
<div class="w100 h100">
|
||||||
|
<div class="topBox">
|
||||||
|
<div class="topLft">
|
||||||
|
<p>6%</p>
|
||||||
|
<p>家庭农场</p>
|
||||||
|
</div>
|
||||||
|
<div class="topRit">
|
||||||
|
<div class="topList" v-for="(item,index) in dataList" :key="index">
|
||||||
|
<p>
|
||||||
|
<img :src="item.imgs" alt="">
|
||||||
|
<span>{{item.nums}}</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span>{{item.name}}</span>
|
||||||
|
<span>{{item.homer}}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: '',
|
||||||
|
mixins: [],
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return{
|
||||||
|
dataList:[
|
||||||
|
{name:'龙头企业',nums:10,imgs:require('../img/5.png'),homer:'（家）'},
|
||||||
|
{name:'入园参与',nums:28,imgs:require('../img/6.png'),homer:'（家）'},
|
||||||
|
{name:'家庭农场',nums:56,imgs:require('../img/7.png'),homer:'（家）'},
|
||||||
|
{name:'合作社',nums:811,imgs:require('../img/8.png'),homer:'（家）'}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
destroyed() {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.topBox{
|
||||||
|
display: flex;
|
||||||
|
.topLft{
|
||||||
|
padding:20px 0 0 30px;
|
||||||
|
width:40%;
|
||||||
|
text-align: center;
|
||||||
|
p:nth-child(1){
|
||||||
|
background: url('../img/4.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width:144px;
|
||||||
|
height: 112px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 112px;
|
||||||
|
color:#ccefff ;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
p:nth-child(2){
|
||||||
|
background: url('../img/9.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width:125px;
|
||||||
|
height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 38px;
|
||||||
|
color:#ccefff ;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-left:10px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.topRit{
|
||||||
|
width:56%;
|
||||||
|
display: flex;
|
||||||
|
padding:50px 0 0 30px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.topList{
|
||||||
|
width:50%;
|
||||||
|
p:nth-child(1){
|
||||||
|
display: flex;
|
||||||
|
margin:0;
|
||||||
|
align-items: center;
|
||||||
|
img{
|
||||||
|
width:24px;
|
||||||
|
height: 24px;
|
||||||
|
margin-right:8px
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
font-size: 22px;
|
||||||
|
color: #ccefff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p:nth-child(2){
|
||||||
|
display: flex;
|
||||||
|
margin:0;
|
||||||
|
align-items: center;
|
||||||
|
padding-top:10px;
|
||||||
|
color:#ccc
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.topList:nth-child(3){
|
||||||
|
margin-top:30px
|
||||||
|
}
|
||||||
|
.topList:nth-child(4){
|
||||||
|
margin-top:30px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
100
src/views/dataV/pageOne/MapChart copy.vue
Normal file
100
src/views/dataV/pageOne/MapChart copy.vue
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
<template>
|
||||||
|
<div class="w100 h100 flex aic">
|
||||||
|
<div class="topLeft">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-date-picker v-model="value1" type="year" placeholder="选择年">
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<img src="../img/output.png" alt="" />
|
||||||
|
<div class="topRit">
|
||||||
|
<p>农业总产值（亿元）</p>
|
||||||
|
<p style="color: #2effb7">1,000.00</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="../img/level.png" alt="" />
|
||||||
|
<div class="topRit">
|
||||||
|
<p>产业园总产值（亿元）</p>
|
||||||
|
<p style="color: #ff6e6f">27.51</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="../img/production.png" alt="" />
|
||||||
|
<div class="topRit">
|
||||||
|
<p>主导鸡肉产量（吨）</p>
|
||||||
|
<p style="color: #fcde1f">30,656.00</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="../img/123.png" alt="" />
|
||||||
|
<div class="topRit">
|
||||||
|
<p>主导小麦产量（吨）</p>
|
||||||
|
<p style="color: #00f6ff">44,120.00</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="topRight">
|
||||||
|
<img src="../img/3.png" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Map',
|
||||||
|
mixins: [],
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value1:'',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
destroyed() {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.topLeft{
|
||||||
|
width: 30%;
|
||||||
|
height: 100%;
|
||||||
|
::v-deep .el-input__inner{
|
||||||
|
background: #203c4966!important;
|
||||||
|
border: none;
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
ul{
|
||||||
|
padding-left:0px
|
||||||
|
}
|
||||||
|
ul li{
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin:20px 0;
|
||||||
|
img{
|
||||||
|
width:112px;
|
||||||
|
height: 118px;
|
||||||
|
}
|
||||||
|
.topRit{
|
||||||
|
margin-left:10px;
|
||||||
|
p:nth-child(1){
|
||||||
|
color:#fff;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top:20px
|
||||||
|
}
|
||||||
|
p:nth-child(2){
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top:10px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
78
src/views/dataV/pageOne/greenIndustry copy.vue
Normal file
78
src/views/dataV/pageOne/greenIndustry copy.vue
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="bom">
|
||||||
|
<div class="bomList" v-for="(item,index) in list" :key="index">
|
||||||
|
<div class="bomLeft">
|
||||||
|
<img :src="item.img" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="bomRigtht">
|
||||||
|
<p>{{item.name}}</p>
|
||||||
|
<p>
|
||||||
|
<span class="span1">{{item.num}}</span>
|
||||||
|
<span class="span2">{{item.percent}}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default{
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
list:[
|
||||||
|
{name:'农产品认证',num:40.2,percent:'%',img:require('../img/10.png')},
|
||||||
|
{name:'农产品面积',num:5475,percent:'亩',img:require('../img/11.png')},
|
||||||
|
{name:'综合利用率',num:93.9,percent:'%',img:require('../img/12.png')},
|
||||||
|
{name:'化肥利用率',num:40.2,percent:'%',img:require('../img/13.png')},
|
||||||
|
{name:'农药利用率',num:40.7,percent:'%',img:require('../img/14.png')},
|
||||||
|
{name:'监测合格率',num:99.9,percent:'%',img:require('../img/15.png')},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.bom{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top:10px;
|
||||||
|
.bomList{
|
||||||
|
width:33%;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 28px;
|
||||||
|
.bomLeft{
|
||||||
|
img{
|
||||||
|
width:80px;
|
||||||
|
height: 80px;
|
||||||
|
margin-right:10px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bomRigtht{
|
||||||
|
p:nth-child(1){
|
||||||
|
font-size: 18px;
|
||||||
|
color:#ccc;
|
||||||
|
margin:0;
|
||||||
|
margin-top:10px
|
||||||
|
}
|
||||||
|
p:nth-child(2){
|
||||||
|
font-size: 16px;
|
||||||
|
color:#ccc;
|
||||||
|
margin:0;
|
||||||
|
margin-top:5px
|
||||||
|
}
|
||||||
|
.span1{
|
||||||
|
font-size: 20px;
|
||||||
|
color:#ccefff
|
||||||
|
}
|
||||||
|
.span2{
|
||||||
|
font-size: 10px;
|
||||||
|
color:#99afbf;margin-left:10px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bomList:nth-child(4),.bomList:nth-child(5),.bomList:nth-child(6){
|
||||||
|
margin-top:32px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
69
src/views/dataV/pageOne/index copy.vue
Normal file
69
src/views/dataV/pageOne/index copy.vue
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<LayOut :bg="bg" :title="title">
|
||||||
|
<template #one>
|
||||||
|
<map-chart></map-chart>
|
||||||
|
</template>
|
||||||
|
<template #two>
|
||||||
|
<home-count></home-count>
|
||||||
|
</template>
|
||||||
|
<template #three>
|
||||||
|
<area-count></area-count>
|
||||||
|
</template>
|
||||||
|
<template #four>
|
||||||
|
<green-industry></green-industry>
|
||||||
|
</template>
|
||||||
|
<template #five>
|
||||||
|
<money-industry></money-industry>
|
||||||
|
</template>
|
||||||
|
<template #six>
|
||||||
|
<industry-percent></industry-percent>
|
||||||
|
</template>
|
||||||
|
</LayOut>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import LayOut from '../layOut.vue';
|
||||||
|
import MapChart from './MapChart.vue';
|
||||||
|
import HomeCount from './HomeCount.vue';
|
||||||
|
import AreaCount from './AreaCount.vue';
|
||||||
|
import greenIndustry from './greenIndustry.vue';
|
||||||
|
import moneyIndustry from './moneyIndustry.vue';
|
||||||
|
import industryPercent from './industrypercent.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
baseId:Number
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
LayOut,
|
||||||
|
MapChart,
|
||||||
|
HomeCount,
|
||||||
|
AreaCount,
|
||||||
|
greenIndustry,
|
||||||
|
moneyIndustry,
|
||||||
|
industryPercent,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
bg: require('../img/bg.png'),
|
||||||
|
title: [
|
||||||
|
'集约经营主体',
|
||||||
|
'主导产业面积',
|
||||||
|
'产业绿色发展',
|
||||||
|
'主导产业产值',
|
||||||
|
'主导产业占比',
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
baseId(n){
|
||||||
|
console.log('page1',n)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
329
src/views/dataV/pageOne/industrypercent copy.vue
Normal file
329
src/views/dataV/pageOne/industrypercent copy.vue
Normal file
@ -0,0 +1,329 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div>
|
||||||
|
<div class="echart" id="mychart3" ref="chart"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="echart" id="mychart4"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import "echarts-gl";
|
||||||
|
import { getPie3D, getParametricEquation } from "../echartsOption.js"; //工具类js，页面路径自己修改
|
||||||
|
|
||||||
|
const color = ["#3cd6b7", "#fe9326", "#124fb7", "#383893"];
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
optionData: [
|
||||||
|
{
|
||||||
|
name: "三产产值",
|
||||||
|
value: 13,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "二产产值",
|
||||||
|
value: 8,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "一产产值",
|
||||||
|
value: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "产圈总产产值",
|
||||||
|
value: 17,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
statusChart: null,
|
||||||
|
option: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.initChart();
|
||||||
|
this.initChart2()
|
||||||
|
const that = this;
|
||||||
|
window.onresize = function () {
|
||||||
|
that.changeSize();
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 图表初始化
|
||||||
|
initChart () {
|
||||||
|
this.statusChart = echarts.init(this.$refs.chart);
|
||||||
|
// 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
|
||||||
|
this.option = getPie3D(this.optionData, 0.6, 200, 28, 22, 40);
|
||||||
|
this.statusChart.setOption(this.option);
|
||||||
|
// 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
|
||||||
|
this.option.series.push({
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
type: "pie",
|
||||||
|
label: {
|
||||||
|
opacity: 1,
|
||||||
|
fontSize: 13,
|
||||||
|
lineHeight: 20,
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
startAngle: -90, // 起始角度，支持范围[0, 360]。
|
||||||
|
clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||||
|
radius: ["20%", "60%"],
|
||||||
|
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 = "";
|
||||||
|
// 监听 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 !== "信用评价"
|
||||||
|
) {
|
||||||
|
|
||||||
|
// 从 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]);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 自适应宽高
|
||||||
|
changeSize () {
|
||||||
|
this.statusChart.resize();
|
||||||
|
},
|
||||||
|
initChart2 () {
|
||||||
|
let data = ['三产产值', '二产产值', '一产产值', '产园总产值']
|
||||||
|
let option = {
|
||||||
|
grid: {
|
||||||
|
top: '8%',
|
||||||
|
left: '10%',
|
||||||
|
right: '20%',
|
||||||
|
bottom: '20%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
},
|
||||||
|
formatter: "{b0}: {c0}亿元"
|
||||||
|
},
|
||||||
|
|
||||||
|
xAxis: {
|
||||||
|
show: false, //是否显示x轴
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
inverse: true, //让y轴数据逆向
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#666' //y轴字体颜色
|
||||||
|
},
|
||||||
|
formatter: function (value, index) {
|
||||||
|
return [
|
||||||
|
'{title|' + value + '} '
|
||||||
|
].join('\n');
|
||||||
|
},
|
||||||
|
//定义富文本标签
|
||||||
|
rich: {
|
||||||
|
lg: {
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fontSize: 12, //字体默认12
|
||||||
|
color: '#08C',
|
||||||
|
padding: [0, 5, 0, 0]
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
color: '#fff',
|
||||||
|
fontWeight: 'lighter',
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: { show: false }, //横向的线
|
||||||
|
axisTick: { show: false }, //y轴的端点
|
||||||
|
axisLine: { show: false }, //y轴的线
|
||||||
|
data: data
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '数据内框',
|
||||||
|
type: 'bar',
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
position: 'right', // top, right, inside, insideTop,...
|
||||||
|
textStyle: {
|
||||||
|
color: 'white',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
formatter: '{c}' + "亿元"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
barBorderRadius: 30,
|
||||||
|
color: function (params) { // 颜色定制显示（按顺序）
|
||||||
|
var colorList = ['#4a5eea', '#f29b76', '#ea9ef3', '#80f1b0',];
|
||||||
|
return colorList[params.dataIndex]
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
barWidth: 10,
|
||||||
|
data: [40, 63, 20, 100,]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '外框',
|
||||||
|
type: 'bar',
|
||||||
|
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
barBorderRadius: 30,
|
||||||
|
color: '#285079',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
barGap: '-100%',
|
||||||
|
z: 0,
|
||||||
|
barWidth: 10,
|
||||||
|
data: [100, 100, 100, 100,],
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
const myChart = this.$echarts.init(document.getElementById("mychart4"));
|
||||||
|
myChart.setOption(option);
|
||||||
|
clearInterval(this.toolTipTimer)
|
||||||
|
let index = 0
|
||||||
|
this.toolTipTimer = setInterval(() => {
|
||||||
|
myChart.dispatchAction({
|
||||||
|
type: 'showTip', // 提示框
|
||||||
|
seriesIndex: 0,
|
||||||
|
dataIndex: index // 第几行柱子高亮
|
||||||
|
})
|
||||||
|
if (index == data.length - 1) index = 0 //展示到最后一个的时候 从0开始
|
||||||
|
else index++
|
||||||
|
}, 3000)
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
#mychart3 {
|
||||||
|
width: 260px;
|
||||||
|
height: 260px;
|
||||||
|
}
|
||||||
|
#mychart4 {
|
||||||
|
width: 360px;
|
||||||
|
height: 330px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
201
src/views/dataV/pageOne/moneyIndustry copy.vue
Normal file
201
src/views/dataV/pageOne/moneyIndustry copy.vue
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="echart" id="mychart2" style="height:260px"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
chartData: [
|
||||||
|
{
|
||||||
|
name: '三产产值',
|
||||||
|
value: 50,
|
||||||
|
test: '备注1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '二产产值',
|
||||||
|
value: 60,
|
||||||
|
test: '备注2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '二产产值',
|
||||||
|
value: 66,
|
||||||
|
test: '备注3'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '一产产值',
|
||||||
|
value: 72,
|
||||||
|
test: '备注4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '产园总产值',
|
||||||
|
value: 80,
|
||||||
|
test: '备注5'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.initEcharts();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initEcharts () {
|
||||||
|
var itemValue = [], bgData = []; //声明背景数据
|
||||||
|
// 取出所有数据最大值,作为柱形图背景数据
|
||||||
|
this.chartData.forEach(function (items, index) {
|
||||||
|
itemValue.push(items.value);
|
||||||
|
});
|
||||||
|
let maxdata = Math.max.apply(null, itemValue); ///applay方法★取得最大值
|
||||||
|
for (var i = 0; i < this.chartData.length; i++) {
|
||||||
|
bgData.push(maxdata); //取得最大值
|
||||||
|
}
|
||||||
|
let $colorList = this.$colorList
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
},
|
||||||
|
formatter: "{b0}: {c0}亿元",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '8%',
|
||||||
|
left: '2%',
|
||||||
|
right: '10%',
|
||||||
|
bottom: '10%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [{
|
||||||
|
type: 'value',
|
||||||
|
position: 'bottom',
|
||||||
|
boundaryGap: true, // 边界间隙
|
||||||
|
min: 0,
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 16
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255, 255, 255, .5)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false // 坐标轴小标记
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false, // 是否显示分割线
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255, 255, 9255, 0)', // 纵向向网格线颜色
|
||||||
|
type: 'dashed',
|
||||||
|
width: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
position: 'left',
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#8aa5ab',
|
||||||
|
fontSize: 15
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255, 255, 255, .5)',
|
||||||
|
width: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false // 坐标轴小标记
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: (function (data) {
|
||||||
|
var arr = [];
|
||||||
|
data.forEach(function (items) {
|
||||||
|
arr.push(items.name);
|
||||||
|
});
|
||||||
|
return arr;
|
||||||
|
})(this.chartData) // 载入y轴数据
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
type: 'bar',
|
||||||
|
barGap: "-130%",
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
barWidth: 12,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#1a2859' ,// 图表颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: bgData, // 载入背景数据
|
||||||
|
z: 0
|
||||||
|
}, {
|
||||||
|
type: 'bar',
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
position: 'right', // top, right, inside, insideTop,...
|
||||||
|
textStyle: {
|
||||||
|
color: 'white',
|
||||||
|
fontSize: 16
|
||||||
|
},
|
||||||
|
formatter: '{c}' + "亿元"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
barWidth: 12,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: function (params) { // 颜色定制显示（按顺序）
|
||||||
|
var colorList = $colorList;
|
||||||
|
return colorList[params.dataIndex]
|
||||||
|
},
|
||||||
|
barBorderRadius: [0, 17, 17, 0] //圆角
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.chartData, // 载入数据(内含自定义参数)
|
||||||
|
z: 1
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
const myChart = this.$echarts.init(document.getElementById("mychart2"));
|
||||||
|
myChart.setOption(option);
|
||||||
|
clearInterval(this.toolTipTimer)
|
||||||
|
let index = 0
|
||||||
|
this.toolTipTimer = setInterval(() => {
|
||||||
|
myChart.dispatchAction({
|
||||||
|
type: 'showTip', // 提示框
|
||||||
|
seriesIndex: 0,
|
||||||
|
dataIndex: index // 第几行柱子高亮
|
||||||
|
})
|
||||||
|
if (index == this.chartData.length - 1) index = 0 //展示到最后一个的时候 从0开始
|
||||||
|
else index++
|
||||||
|
}, 3000)
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user