产业分析留档
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