<template>
? <div id="BusinessTop5Chart" style="flex: 1; height: 300px; width: 614px; margin-left: 10px"></div>
</template>
<script>
import { getNoteMatters } from '@/api/government';
const colors = [
? ?'rgba(248, 75, 110, 1)',
? ?'rgba(239, 142, 47, 1)',
? ?'rgba(234, 202, 4, 1)',
? ?'rgba(79, 224, 255, 1)',
? ?'rgba(106, 196, 255, 1)',
?];
export default {
? data() {
? ? return {
? ? ? list: [],
? ? ? list1: [],
? ? ? list2: [],
? ? ? Top5ListName: [],
? ? ? Top5ListValue:[]
? ? };
? },
? mounted() {
? ? this.getNoteMatters();
? },
? methods: {
? ? initMap() {
? ? ? var myChart = this.$echarts.init(document.getElementById('BusinessTop5Chart'));
? ? ? const option = {
? ? ? ? grid: {
? ? ? ? ? top: 20,
? ? ? ? ? bottom: 30,
? ? ? ? ? left: 10,
? ? ? ? ? right: 150,
? ? ? ? ? containLabel: true,
? ? ? ? },
? ? ? ? tooltip: {
? ? ? ? ? show: true,
? ? ? ? ? trigger: 'axis',
? ? ? ? ? axisPointer: {
? ? ? ? ? ? type: 'shadow',
? ? ? ? ? },
? ? ? ? },
? ? ? ? xAxis: {
? ? ? ? ? type: 'value',
? ? ? ? ? splitLine: {
? ? ? ? ? ? show: false,
? ? ? ? ? },
? ? ? ? ? axisLine: {
? ? ? ? ? ? show: false,
? ? ? ? ? },
? ? ? ? ? axisLabel: {
? ? ? ? ? ? show: false,
? ? ? ? ? },
? ? ? ? ? axisTick: {
? ? ? ? ? ? show: false,
? ? ? ? ? },
? ? ? ? ? position: 'top',
? ? ? ? },
? ? ? ? yAxis: {
? ? ? ? ? type: 'category',
? ? ? ? ? data: this.Top5ListName,
? ? ? ? ? inverse: true, //倒敘
? ? ? ? ? axisLine: {
? ? ? ? ? ? show: false,
? ? ? ? ? },
? ? ? ? ? axisTick: {
? ? ? ? ? ? show: false,
? ? ? ? ? },
? ? ? ? ? axisLabel: {
? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? color: 'rgba(255,255,255,0.85)',
? ? ? ? ? ? ? fontSize: 14,
? ? ? ? ? ? ? fontFamily: 'TencentSans',
? ? ? ? ? ? },
? ? ? ? ? ? padding: [0, 0, 20, 0],
? ? ? ? ? ? inside: true,
? ? ? ? ? ? verticalAlign: 'bottom',
? ? ? ? ? },
? ? ? ? },
? ? ? ? series: [
? ? ? ? ? {
? ? ? ? ? ? type: 'bar',
? ? ? ? ? ? barGap: '-90%',
? ? ? ? ? ? barMaxWidth: 14,
? ? ? ? ? ? z: 0,
? ? ? ? ? ? label: {
? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? show: false,
? ? ? ? ? ? ? ? position: 'right',
? ? ? ? ? ? ? ? fontSize: 14,
? ? ? ? ? ? ? ? offset: [16, 0],
? ? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? ? ? data: this.list,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? type: 'bar',
? ? ? ? ? ? barGap: '-90%',
? ? ? ? ? ? barMaxWidth: 14,
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? color: 'rgba(26, 49, 99, 0.5)',
? ? ? ? ? ? },
? ? ? ? ? ? tooltip: {
? ? ? ? ? ? ? show: false,
? ? ? ? ? ? },
? ? ? ? ? ? data: this.list1,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? type: 'pictorialBar',
? ? ? ? ? ? symbolRepeat: 'fixed',
? ? ? ? ? ? symbolMargin: 4,
? ? ? ? ? ? symbol: 'rect',
? ? ? ? ? ? symbolClip: true,
? ? ? ? ? ? symbolSize: [1, 14],
? ? ? ? ? ? symbolPosition: 'start',
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? color: 'rgba(0,0,0,1)',
? ? ? ? ? ? },
? ? ? ? ? ? data: this.list2,
? ? ? ? ? },
? ? ? ? ],
? ? ? };
? ? ? myChart.setOption(option);
? ? },
? ? getNoteMatters() {
? ? ? getNoteMatters().then((res) => {
? ? ? ? const { status, data } = res;
? ? ? ? const { businessTpo5 } = JSON.parse(data);
? ? ? ? if (status === 200) {
? ? ? ? // this.Top5ListName=[
? ? ? ? // ? ? ?{0: "三亞市稅務(wù)局",?
? ? ? ? // ? ? ? 1: "三亞市市場監(jiān)督管理局",?
? ? ? ? // ? ? ? 2: "三亞市公安局",?
? ? ? ? // ? ? ? 3: "三亞市郵政管理局",?
? ? ? ? // ? ? ? 4: "三亞市社會保險服務(wù)中心窗口"}]
? ? ? ? ? this.Top5ListName = businessTpo5.map((item) => {
? ? ? ? ? ? return item.agencies;
? ? ? ? ? });
? ? ? ? // this.Top5ListValue=[{0: 189354, 1: 56933, 2: 13267, 3: 10979, 4: 9054}]
? ? ? ? ? this.Top5ListValue = businessTpo5.map((item) => {
? ? ? ? ? ? return Number(item.num);
? ? ? ? ? });
? ? ? ? ? const max = Math.max.apply(null, this.Top5ListValue);
? ? ? ?// this.list=[{itemStyle:
?? ? ? // ?? ??? ?color: "rgba(248, 75, 110, 1)"
? ? ? ?//?? ? ?? ?name: "三亞市稅務(wù)局"
? ? ? ?//?? ? ?? ?num: "189354"
? ? ? ?//?? ? ?? ?rate: "57.03%"
? ? ? ?//?? ? ?? ?value: 189354}]
? ? ? ? ? this.list = businessTpo5.map((item, index) => {
? ? ? ? ? ? let obj = {
? ? ? ? ? ? ? name: item.agencies,
? ? ? ? ? ? ? value: Number(item.num),
? ? ? ? ? ? ? num: item.num,
? ? ? ? ? ? ? rate: item.rate,
? ? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? ? color: colors[index],
? ? ? ? ? ? ? },
? ? ? ? ? ? };
? ? ? ? ? ? return obj;
? ? ? ? ? });
? ? ? ?// this.list1=[
? ? ? ?// label:{
?? ? ? // normal:{
? ? ? ?// color: colors[index],
? ? ? ?// fontSize: 14
? ? ? ?// position: "right"
? ? ? ?// show: true
? ? ? ?// offset:[16,0]
? ? ? ?// name: "三亞市稅務(wù)局"
? ? ? ?// formatter(){return(item.num+'單位'+''+item.rate)}
? ? ? ?// rate: "57.03%"
? ? ? ?// value: 189354}}
? ? ? ? ? this.list1 = businessTpo5.map((item, index) => {
? ? ? ? ? ? let obj = {
? ? ? ? ? ? ? name: item.agencies,
? ? ? ? ? ? ? value: max,
? ? ? ? ? ? ? label: item.num,
? ? ? ? ? ? ? rate: item.rate,
? ? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? ? ? position: 'right',
? ? ? ? ? ? ? ? ? fontSize: 14,
? ? ? ? ? ? ? ? ? color: colors[index],
? ? ? ? ? ? ? ? ? offset: [16, 0],
? ? ? ? ? ? ? ? ? formatter() {
? ? ? ? ? ? ? ? ? ? return (
? ? ? ? ? ? ? ? ? ? ? item.num + '件' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + item.rate
? ? ? ? ? ? ? ? ? ? );
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? },
? ? ? ? ? ? };
? ? ? ? ? ? return obj;
? ? ? ? ? });
? ? ? // this.list2=[{label: "189354"
?? ? ?// name: "三亞市稅務(wù)局"
?? ? ?// rate: "57.03%"
?? ? ?// value: 189354}] ? ?
? ? ? ? this.list2 = businessTpo5.map((item) => {
? ? ? ? ? ? let obj = {
? ? ? ? ? ? ? name: item.agencies,
? ? ? ? ? ? ? value: Number(item.num),
? ? ? ? ? ? ? label: item.num,
? ? ? ? ? ? ? rate: item.rate,
? ? ? ? ? ? };
? ? ? ? ? ? return obj;
? ? ? ? ? });
? ? ? ? }
? ? ? ? this.initMap();
? ? ? });
? ? },
? },
};
</script>