<template><div class="povertyProgress"><div class="header"><div class="title">消费扶贫进度</div><div class="back"><i class="mintui mintui-back"></i></div></div><div class="povertyProgressWrap"><div class="povertyProgressContent"><div class="middleWrap"><div class="timeWrap">时间终止：2020年5月30日</div><div class="topWrap"><div class="topItem"><div class="bgWrap"><div class="numWrap"><span class="num">1532</span><span class="danwei">个</span></div><div class="imgWrap"><img src=".././../assets/pkx.png" alt /><span class="nameWrap">贫困县</span></div></div></div><div class="topItem"><div class="bgWrap"><div class="numWrap"><span class="num">19223</span><span class="danwei">家</span></div><div class="imgWrap"><img src=".././../assets/gys.png" alt /><span class="nameWrap">供应商</span></div></div></div><div class="topItem"><div class="bgWrap"><div class="numWrap"><span class="num">52190</span><span class="danwei">件</span></div><div class="imgWrap"><img src=".././../assets/fpcp.png" alt /><span class="nameWrap">扶贫产品</span></div></div></div><div class="topItem"><div class="bgWrap"><div class="numWrap"><span class="num">4607</span><span class="danwei">亿元</span></div><div class="imgWrap"><img src=".././../assets/cpjzl.png" alt /><span class="nameWrap">产品价值量</span></div></div></div></div></div><div class="titleEchart">各地供应商和产品</div><div class="mapChinaWrap"><div id="mapWrap"></div><div class="mapText">根据各地认证供应商、产品数量分层级按颜色展示：</div><div class="mapIconWrap"><div class="mapIcon"><div class="iconColor1"></div><div class="iconText">1-2名</div></div><div class="mapIcon"><div class="iconColor2"></div><div class="iconText">3-4名</div></div><div class="mapIcon"><div class="iconColor3"></div><div class="iconText">5-10名</div></div><div class="mapIcon"><div class="iconColor4"></div><div class="iconText">其他</div></div></div></div><div class="titleEchart">销售最热top5的产品柱状图</div><div class="topBarWrap"><div id="barWrap"></div></div><div class="titleEchart">重点产品销售分析</div><div class="topLineWrap"><div id="lineWrap"></div></div><div class="titleEchart">各品类销售占比</div><div class="topPieWrap"><div id="pieWrap"></div></div><div class="titleEchart">TOP10企业采购额度排序表</div><div class="topBar2Wrap"><div id="bar2Wrap"></div></div></div></div></div>
</template>
<script>
// import { } from '@/api'
import echarts from "echarts"
import "../../../node_modules/echarts/map/js/china.js";
export default {name: 'povertyProgress',components: {},data () {return {}},mounted () {this.mapinit()this.barInit()this.lineInit()this.pieInit()this.bar2Init()window.addEventListener("resize", () => {this.mapChart.resize();this.barChart.resize();this.bar2Chart.resize();this.lineChart.resize();this.pieChart.resize();});},activated () {},methods: {goBack () {this.$router.back()},mapinit () {this.mapChart = echarts.init(document.getElementById("mapWrap"));let option = {series: [{type: "map",map: "china",itemStyle: {borderColor: "#fff"},data: [{ name: '北京', value: 11, itemStyle: { normal: { areaColor: '#4189ED', } } },{ name: '天津', value: 22, itemStyle: { normal: { areaColor: ' #18A1B6', } } },{ name: '河北', value: 33, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '辽宁', value: 44, itemStyle: { normal: { areaColor: '#18A1B6', } } },{ name: '黑龙江', value: 55, itemStyle: { normal: { areaColor: '#18A1B6', } } },{ name: '吉林', value: 66, itemStyle: { normal: { areaColor: '#18A1B6', } } },{ name: '内蒙古', value: 77, itemStyle: { normal: { areaColor: '#18A1B6', } } },{ name: '山西', value: 88, itemStyle: { normal: { areaColor: '#18A1B6', } } },{ name: '山东', value: 99, itemStyle: { normal: { areaColor: '#E23A58', } } },{ name: '新疆', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '河南', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '江苏', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '甘肃', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '西藏', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '青海', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '宁夏', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '陕西', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '四川', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '江苏', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '云南', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '安徽', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '湖北', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '重庆', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '贵州', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '湖南', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '江西', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '浙江', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '广西', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '海南', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '广东', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '福建', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },{ name: '台湾', value: 9, itemStyle: { normal: { areaColor: '#4189ED', } } },{ name: '香港', value: 9, itemStyle: { normal: { areaColor: '#4189ED', } } },{ name: '澳门', value: 9, itemStyle: { normal: { areaColor: '#4189ED', } } },{ name: '南海诸岛', value: 99, itemStyle: { normal: { opacity: 0, label: { show: false } } } },]}]}this.mapChart.setOption(option);},barInit () {this.barChart = echarts.init(document.getElementById("barWrap"));let option = {tooltip: {show: false},grid: {top: "15%",left: '5%',right: '10%',bottom: '6%',containLabel: true},xAxis: [{type: 'category',data: ['五常大米', '西藏耗牛肉', '新疆哈密瓜', '烟台苹果', '赣南脐橙',],axisTick: {show: false},axisLabel: {interval: 0,rotate: -40,color: "#969696",align: "center",margin: 30,},axisLine: {lineStyle: {color: "999"}}}],yAxis: [{name: "销售额(万元)",nameTextStyle: {color: "#999",},type: 'value',axisLine: {show: false},axisTick: {show: false},axisLabel: {color: "#999",}}],series: [{name: '直接访问',type: 'bar',barWidth: '30%',data: [100, 52, 200, 334, 390],itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: '#DC1A00' },{ offset: 1, color: '#FE705E' }])},emphasis: {itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: '#F8AC2C' },{ offset: 1, color: '#E23A58' }])}},}]}this.barChart.setOption(option);},bar2Init () {this.bar2Chart = echarts.init(document.getElementById("bar2Wrap"));let option = {tooltip: {show: false},grid: {top: "15%",left: '5%',right: '10%',bottom: '6%',containLabel: true},yAxis: [{type: 'category',data: ['五常大米', '西藏耗牛肉', '新疆哈密瓜', '烟台苹果', '赣南脐橙',],axisTick: {show: false},axisLabel: {interval: 0,rotate: -40,color: "#999",align: "center",margin: 30,},axisLine: {lineStyle: {color: "999"}}}],xAxis: [{nameTextStyle: {color: "#999",},type: 'value',axisLine: {show: false},axisTick: {show: false},axisLabel: {color: "#999",}}],series: [{name: '直接访问',type: 'bar',barWidth: '30%',data: [100, 52, 200, 334, 390],itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 1, 0,[{ offset: 0, color: '#FE705E' },{ offset: 1, color: '#DC1A00' }])},emphasis: {itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 1, 0,[{ offset: 0, color: '#F8AC2C' },{ offset: 1, color: '#E23A58' }])}},}]}this.bar2Chart.setOption(option);},lineInit () {this.lineChart = echarts.init(document.getElementById("lineWrap"));let option = {tooltip: {trigger: 'axis'},color: ['#73A0FA', '#73DEB3', '#7585A2', '#F7C739', '#EB7E65', '#83D0EF'],legend: {bottom: 10,data: ['核桃', '大枣', '耗牛', '青稞', '奶粉'],itemWidth: 8,itemHeight: 8,textStyle: {color: '#999'}},grid: {top: "15%",left: '5%',right: '8%',bottom: '12%',containLabel: true},xAxis: {type: 'category',boundaryGap: true,axisLine: {lineStyle: {color: "999"}},axisTick: { alignWithLabel: true },axisLabel: {interval: 0,rotate: -40,color: "#999",align: "center",margin: 30,},data: ['2019.01.01', '2019.02.01', '2019.01.02', '2019.01.03', '2019.01.04']},yAxis: {type: 'value',name: "销售额(万元)",nameTextStyle: {color: "#999",},axisLine: {show: false},axisTick: {show: false},axisLabel: {color: "#999",}},series: [{name: '核桃',type: 'line',symbol: 'none',smooth: true,data: [332, 102, 101, 134, 90,]},{name: '大枣',symbol: 'none',type: 'line',smooth: true,data: [182, 372, 191, 234, 290,]},{name: '耗牛',symbol: 'none',type: 'line',smooth: true,data: [150, 132, 281, 154, 190,]},{name: '青稞',symbol: 'none',type: 'line',smooth: true,data: [10, 32, 181, 54, 290,]},{name: '奶粉',symbol: 'none',type: 'line',smooth: true,data: [15, 132, 81, 15, 90,]},]}this.lineChart.setOption(option);},pieInit () {this.pieChart = echarts.init(document.getElementById("pieWrap"));let option = {tooltip: {trigger: 'axis'},color: ['#73A0FA', '#73DEB3', '#7585A2', '#F7C739', '#EB7E65', '#83D0EF'],legend: [{x: "15%",y: "80%",icon: "circle",data: ['厨房调料'],// '粮油副食', '新鲜水果', '畜禽肉蛋', '衣服加工', '冲调饮料'],itemWidth: 8,itemHeight: 8,itemGap: 20,textStyle: {color: '#999'          }},{x: "40%",y: "80%",icon: "circle",data: ['粮油副食'],// '粮油副食', '新鲜水果', '畜禽肉蛋', '衣服加工', '冲调饮料'],itemWidth: 8,itemHeight: 8,itemGap: 20,textStyle: {color: '#999'}},{x: "65%",y: "80%",icon: "circle",data: ['新鲜水果'],// '粮油副食', '新鲜水果', '畜禽肉蛋', '衣服加工', '冲调饮料'],itemWidth: 8,itemHeight: 8,itemGap: 20,textStyle: {color: '#999'}},{x: "15%",y: "87%",icon: "circle",data: ['畜禽肉蛋'],// '粮油副食', '新鲜水果', '畜禽肉蛋', '衣服加工', '冲调饮料'],itemWidth: 8,itemHeight: 8,itemGap: 20,textStyle: {color: '#999'}},{x: "40%",y: "87%",icon: "circle",data: ['衣服加工'],// '粮油副食', '新鲜水果', '畜禽肉蛋', '衣服加工', '冲调饮料'],itemWidth: 8,itemHeight: 8,itemGap: 20,textStyle: {color: '#999'}},{x: "65%",y: "87%",icon: "circle",data: ['冲调饮料'],// '粮油副食', '新鲜水果', '畜禽肉蛋', '衣服加工', '冲调饮料'],itemWidth: 8,itemHeight: 8,itemGap: 20,textStyle: {color: '#999'}},],series: [{name: '访问来源',type: 'pie',radius: ['32%', '48%'],center: ['50%', '40%'],data: [{ value: 335, name: '厨房调料' },{ value: 310, name: '粮油副食' },{ value: 234, name: '新鲜水果' },{ value: 235, name: '畜禽肉蛋' },{ value: 148, name: '衣服加工' },{ value: 348, name: '冲调饮料' }],label: {height: '28',fontSize: '12',color: "#999",formatter (params) {console.log(params)return params.name + '\n' + params.value}},labelLine: {lineStyle: { color: "#999" }},itemStyle: { // 此配置normal: {borderWidth: 1,borderColor: '#ffffff',},}}]}this.pieChart.setOption(option);}}
}
</script>
<style lang="less" scoped>
.povertyProgress {width: 100%;height: 100%;.header {width: 100%;height: 0.8rem;display: flex;justify-content: flex-start;align-items: center;position: relative;background: @bgThemeColor;.back {width: 0.4rem;height: 0.8rem;margin-left: 0.4rem;display: flex;justify-content: flex-start;align-items: center;.mintui-back {color: #fff;font-size: 0.4rem;}}.title {color: #fff;font-size: @titleSize;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: @bgThemeColor;}}.povertyProgressWrap {width: 100%;width: 100%;position: absolute;top: 0.8rem;left: 0;bottom: 0;.povertyProgressContent {width: 100%;height: 100%;overflow: scroll;-webkit-overflow-scrolling: touch;touch-action: auto;position: static;background: #f7f8fa;padding-bottom: 0.4rem;.middleWrap {position: relative;background: linear-gradient(to bottom,@bgThemeColor 0%,@bgLinearColor 75%,#f7f8fa 75%,#f7f8fa 100%);.timeWrap {width: 100%;height: 0.8rem;color: #fff;font-size: 0.24rem;background-color: @bgThemeColor;padding-right: 0.3rem;display: flex;justify-content: flex-end;align-items: center;}.topWrap {width: 100%;height: 4rem;padding: 0 0.4rem;display: flex;flex-wrap: wrap;.topItem {width: 3.2rem;height: 1.6rem;background-color: #fff;margin-bottom: 0.3rem;border-radius: 0.04rem;box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.03);.bgWrap {width: 2.72rem;height: 1.36rem;background: rgba(255, 255, 255, 0.26);border-radius: 4px;box-shadow: 0px 20px 20px 0px rgba(9, 77, 173, 0.04);margin-top: 0.34rem;margin-left: 0.24rem;.numWrap {width: 100%;opacity: 1;display: flex;justify-content: center;align-items: center;line-height: 0.58rem;text-align: center;.num {color: #333;font-size: 0.48rem;font-weight: bold;}.danwei {color: #333;font-size: 0.28rem;}}.imgWrap {width: 100%;display: flex;justify-content: center;align-items: center;height: 0.4rem;img {width: 0.28rem;height: 0.28rem;margin-right: 0.1rem;}.nameWrap {color: #333;font-size: 0.26rem;}}}}.topItem:nth-child(2n + 1) {margin-right: 0.3rem;}}}.titleEchart {width: 100%;height: 1rem;margin-top: 0.2rem;font-size: 0.4rem;font-weight: 500;color: rgba(47, 47, 47, 1);display: flex;justify-content: flex-start;align-items: center;padding-left: 0.3rem;}.mapChinaWrap {width: 6.9rem;height: 7rem;background: rgba(255, 255, 255, 1);box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.03);margin: auto;overflow: hidden;#mapWrap {width: 10rem;height: 6rem;transform: translate(-1.5rem, 0);}}.mapText {width: 100%;color: #333;font-size: 0.24rem;margin-left: 0.2rem;}.mapIconWrap {width: 100%;padding: 0 0.3rem;display: flex;justify-content: space-around;align-items: center;color: #292929;font-size: 0.24rem;margin-top: 0.18rem;.mapIcon {width: 25%;height: 0.5rem;display: flex;justify-content: center;align-items: center;.iconColor1 {width: 0.2rem;height: 0.2rem;background-color: #e23a58;}.iconColor2 {width: 0.2rem;height: 0.2rem;background-color: #f8ac2c;}.iconColor3 {width: 0.2rem;height: 0.2rem;background-color: #18a1b6;}.iconColor4 {width: 0.2rem;height: 0.2rem;background-color: #4189ed;}.iconText {height: 0.45rem;text-align: center;line-height: 0.45rem;margin-left: 0.1rem;}}}.topBarWrap {width: 6.9rem;height: 5.4rem;background: rgba(255, 255, 255, 1);box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.03);margin: auto;#barWrap {width: 6.9rem;height: 5.4rem;}}.topLineWrap {width: 6.9rem;height: 6.5rem;background: rgba(255, 255, 255, 1);box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.03);margin: auto;#lineWrap {width: 6.9rem;height: 6.5rem;}}.topPieWrap {width: 6.9rem;height: 7rem;background: rgba(255, 255, 255, 1);box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.03);margin: auto;#pieWrap {width: 6.9rem;height: 7.3rem;}}.topBar2Wrap {width: 6.9rem;height: 5.4rem;background: rgba(255, 255, 255, 1);box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.03);margin: auto;#bar2Wrap {width: 6.9rem;height: 5.4rem;}}}}
}
</style>