|
@@ -1,378 +1,366 @@
|
|
<!-- **************************************NO.7 散养户分布*************************************** -->
|
|
<!-- **************************************NO.7 散养户分布*************************************** -->
|
|
<template>
|
|
<template>
|
|
- <div class="chart-container">
|
|
|
|
- <div id="freelyraise" style="width: 100%; height:23vh;">
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="chart-container">
|
|
|
|
+ <div id="freelyraise" style="width: 100%; height:23vh;">
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- import * as echarts from 'echarts';
|
|
|
|
- export default {
|
|
|
|
- name: 'freelyraise',
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- count: 0
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- mounted() {
|
|
|
|
- this.myEcharts()
|
|
|
|
|
|
+ import * as echarts from 'echarts';
|
|
|
|
+ import {getZdqy} from '@/api/bigdata'
|
|
|
|
|
|
- },
|
|
|
|
|
|
+ export default {
|
|
|
|
+ name: 'freelyraise',
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ count: 0,
|
|
|
|
+ data_zdqy: []
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.zdqy()
|
|
|
|
+ },
|
|
|
|
|
|
- methods: {
|
|
|
|
- // 出处 http://192.144.199.210/forum.php?mod=viewthread&tid=6785&highlight=%E6%9F%B1%E7%8A%B6%E5%9B%BE
|
|
|
|
|
|
+ methods: {
|
|
|
|
+ zdqy() {
|
|
|
|
+ let that = this
|
|
|
|
+ getZdqy().then(resp => {
|
|
|
|
+ that.data_zdqy = resp.data
|
|
|
|
+ that.myEcharts()
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 出处 http://192.144.199.210/forum.php?mod=viewthread&tid=6785&highlight=%E6%9F%B1%E7%8A%B6%E5%9B%BE
|
|
|
|
|
|
- myEcharts() {
|
|
|
|
|
|
+ myEcharts() {
|
|
|
|
+ let that = this
|
|
|
|
+ var chartDom = document.getElementById('freelyraise');
|
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
|
+ var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
|
|
|
|
+ var option;
|
|
|
|
+ let data = that.data_zdqy
|
|
|
|
|
|
|
|
+ function contains(arr, dst) {
|
|
|
|
+ var i = arr.length;
|
|
|
|
+ while ((i -= 1)) {
|
|
|
|
+ if (arr[i] == dst) {
|
|
|
|
+ return i;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
|
|
- var chartDom = document.getElementById('freelyraise');
|
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
|
- var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
|
|
|
|
- var option;
|
|
|
|
- let data = [{
|
|
|
|
- "name": "双辽市",
|
|
|
|
- "num": "18.987691"
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- "name": "梨树县",
|
|
|
|
- "num": "20.377176"
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- "name": "伊通县",
|
|
|
|
- "num": "19.127404"
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- "name": "铁东区",
|
|
|
|
- "num": "18.40882"
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- "name": "铁西区",
|
|
|
|
- "num": "17.980597"
|
|
|
|
- },
|
|
|
|
- ]
|
|
|
|
|
|
+ var attackSourcesColor = [
|
|
|
|
+ new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
|
|
|
|
+ offset: 0,
|
|
|
|
+ color: "#EB3B5A"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ offset: 1,
|
|
|
|
+ color: "#FE9C5A"
|
|
|
|
+ }
|
|
|
|
+ ]),
|
|
|
|
+ new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
|
|
|
|
+ offset: 0,
|
|
|
|
+ color: "#FA8231"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ offset: 1,
|
|
|
|
+ color: "#FFD14C"
|
|
|
|
+ }
|
|
|
|
+ ]),
|
|
|
|
+ new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
|
|
|
|
+ offset: 0,
|
|
|
|
+ color: "#F7B731"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ offset: 1,
|
|
|
|
+ color: "#FFEE96"
|
|
|
|
+ }
|
|
|
|
+ ]),
|
|
|
|
+ new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
|
|
|
|
+ offset: 0,
|
|
|
|
+ color: "#21fe8f"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ offset: 1,
|
|
|
|
+ color: "#38911f"
|
|
|
|
+ }
|
|
|
|
+ ]),
|
|
|
|
+ new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
|
|
|
|
+ offset: 0,
|
|
|
|
+ color: "#395CFE"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ offset: 1,
|
|
|
|
+ color: "#2EC7CF"
|
|
|
|
+ }
|
|
|
|
+ ])
|
|
|
|
|
|
- function contains(arr, dst) {
|
|
|
|
- var i = arr.length;
|
|
|
|
- while ((i -= 1)) {
|
|
|
|
- if (arr[i] == dst) {
|
|
|
|
- return i;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- return false;
|
|
|
|
- }
|
|
|
|
|
|
+ ];
|
|
|
|
+ var attackSourcesColor1 = [
|
|
|
|
+ "#EB3B5A",
|
|
|
|
+ "#FA8231",
|
|
|
|
+ "#F7B731",
|
|
|
|
+ "#38911f",
|
|
|
|
+ "#3860FC",
|
|
|
|
+ "#F57474",
|
|
|
|
+ "#56D0E3",
|
|
|
|
+ "#1089E7",
|
|
|
|
+ "#F57474",
|
|
|
|
+ "#1089E7",
|
|
|
|
+ "#F57474",
|
|
|
|
+ "#F57474"
|
|
|
|
+ ];
|
|
|
|
+ var attaData = [];
|
|
|
|
+ var attaName = [];
|
|
|
|
+ var topName = []
|
|
|
|
+ data.forEach((it, index) => {
|
|
|
|
+ attaData[index] = parseFloat(it.num).toFixed(0);
|
|
|
|
+ //attaData[index] = parseInt(it.num);
|
|
|
|
+ attaName[index] = it.name;
|
|
|
|
+ topName[index] = `${it.name}`
|
|
|
|
+ });
|
|
|
|
+ var salvProMax = [];
|
|
|
|
+ var max = attaData[0];
|
|
|
|
+ for (let i = 0; i < attaData.length; i++) {
|
|
|
|
+ max = max < attaData[i + 1] ? attaData[i + 1] : max;
|
|
|
|
+ }
|
|
|
|
+ for (let i = 0; i < attaData.length; i++) {
|
|
|
|
+ salvProMax.push(max); //背景按最大值
|
|
|
|
+ }
|
|
|
|
|
|
- var attackSourcesColor = [
|
|
|
|
- new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
|
|
|
|
- offset: 0,
|
|
|
|
- color: "#EB3B5A"
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- offset: 1,
|
|
|
|
- color: "#FE9C5A"
|
|
|
|
- }
|
|
|
|
- ]),
|
|
|
|
- new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
|
|
|
|
- offset: 0,
|
|
|
|
- color: "#FA8231"
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- offset: 1,
|
|
|
|
- color: "#FFD14C"
|
|
|
|
- }
|
|
|
|
- ]),
|
|
|
|
- new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
|
|
|
|
- offset: 0,
|
|
|
|
- color: "#F7B731"
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- offset: 1,
|
|
|
|
- color: "#FFEE96"
|
|
|
|
- }
|
|
|
|
- ]),
|
|
|
|
- new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
|
|
|
|
- offset: 0,
|
|
|
|
- color: "#21fe8f"
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- offset: 1,
|
|
|
|
- color: "#38911f"
|
|
|
|
- }
|
|
|
|
- ]),
|
|
|
|
- new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
|
|
|
|
- offset: 0,
|
|
|
|
- color: "#395CFE"
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- offset: 1,
|
|
|
|
- color: "#2EC7CF"
|
|
|
|
- }
|
|
|
|
- ])
|
|
|
|
-
|
|
|
|
- ];
|
|
|
|
- var attackSourcesColor1 = [
|
|
|
|
- "#EB3B5A",
|
|
|
|
- "#FA8231",
|
|
|
|
- "#F7B731",
|
|
|
|
- "#38911f",
|
|
|
|
- "#3860FC",
|
|
|
|
- "#F57474",
|
|
|
|
- "#56D0E3",
|
|
|
|
- "#1089E7",
|
|
|
|
- "#F57474",
|
|
|
|
- "#1089E7",
|
|
|
|
- "#F57474",
|
|
|
|
- "#F57474"
|
|
|
|
- ];
|
|
|
|
- var attaData = [];
|
|
|
|
- var attaName = [];
|
|
|
|
- var topName = []
|
|
|
|
- data.forEach((it, index) => {
|
|
|
|
- attaData[index] = parseFloat(it.num).toFixed(0);
|
|
|
|
- //attaData[index] = parseInt(it.num);
|
|
|
|
- attaName[index] = it.name;
|
|
|
|
- topName[index] = `${it.name}`
|
|
|
|
- });
|
|
|
|
- var salvProMax = [];
|
|
|
|
- var max = attaData[0];
|
|
|
|
- for (let i = 0; i < attaData.length; i++) {
|
|
|
|
- max = max < attaData[i + 1] ? attaData[i + 1] : max;
|
|
|
|
- }
|
|
|
|
- for (let i = 0; i < attaData.length; i++) {
|
|
|
|
- salvProMax.push(max); //背景按最大值
|
|
|
|
- }
|
|
|
|
|
|
+ function attackSourcesDataFmt(sData) {
|
|
|
|
+ var sss = [];
|
|
|
|
+ sData.forEach(function (item, i) {
|
|
|
|
+ let itemStyle = {
|
|
|
|
+ color: i > 5 ? attackSourcesColor[5] : attackSourcesColor[i]
|
|
|
|
+ };
|
|
|
|
+ sss.push({
|
|
|
|
+ value: item,
|
|
|
|
+ itemStyle: itemStyle
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ return sss;
|
|
|
|
+ }
|
|
|
|
|
|
- function attackSourcesDataFmt(sData) {
|
|
|
|
- var sss = [];
|
|
|
|
- sData.forEach(function(item, i) {
|
|
|
|
- let itemStyle = {
|
|
|
|
- color: i > 5 ? attackSourcesColor[5] : attackSourcesColor[i]
|
|
|
|
- };
|
|
|
|
- sss.push({
|
|
|
|
- value: item,
|
|
|
|
- itemStyle: itemStyle
|
|
|
|
- });
|
|
|
|
- });
|
|
|
|
- return sss;
|
|
|
|
- }
|
|
|
|
|
|
+ option = {
|
|
|
|
+ tooltip: {
|
|
|
|
+ show: false,
|
|
|
|
+ backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色(此时为默认色)
|
|
|
|
+ textStyle: {
|
|
|
|
+ fontSize: 12
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ color: ["#F7B731"],
|
|
|
|
+ legend: {
|
|
|
|
+ show: false,
|
|
|
|
+ pageIconSize: [12, 12],
|
|
|
|
+ itemWidth: 20,
|
|
|
|
+ itemHeight: 10,
|
|
|
|
+ textStyle: {
|
|
|
|
+ //图例文字的样式
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ color: "#fff"
|
|
|
|
+ },
|
|
|
|
+ selectedMode: false,
|
|
|
|
+ data: ["个人所得(亿元)"]
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ left: '12%',
|
|
|
|
+ width: '70%',
|
|
|
|
+ bottom: '5%',
|
|
|
|
+ top: "8%",
|
|
|
|
+ },
|
|
|
|
+ xAxis: {
|
|
|
|
+ type: "value",
|
|
|
|
|
|
- option = {
|
|
|
|
- tooltip: {
|
|
|
|
- show: false,
|
|
|
|
- backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色(此时为默认色)
|
|
|
|
- textStyle: {
|
|
|
|
- fontSize: 12
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- color: ["#F7B731"],
|
|
|
|
- legend: {
|
|
|
|
- show: false,
|
|
|
|
- pageIconSize: [12, 12],
|
|
|
|
- itemWidth: 20,
|
|
|
|
- itemHeight: 10,
|
|
|
|
- textStyle: {
|
|
|
|
- //图例文字的样式
|
|
|
|
- fontSize: 12,
|
|
|
|
- color: "#fff"
|
|
|
|
- },
|
|
|
|
- selectedMode: false,
|
|
|
|
- data: ["个人所得(亿元)"]
|
|
|
|
- },
|
|
|
|
- grid: {
|
|
|
|
- left: '12%',
|
|
|
|
- width: '70%',
|
|
|
|
- bottom: '5%',
|
|
|
|
- top: "8%",
|
|
|
|
- },
|
|
|
|
- xAxis: {
|
|
|
|
- type: "value",
|
|
|
|
|
|
+ splitLine: {
|
|
|
|
+ show: false
|
|
|
|
+ },
|
|
|
|
+ axisLabel: {
|
|
|
|
+ show: false
|
|
|
|
+ },
|
|
|
|
+ axisTick: {
|
|
|
|
+ show: false
|
|
|
|
+ },
|
|
|
|
+ axisLine: {
|
|
|
|
+ show: false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ yAxis: [{ //左侧排行数字
|
|
|
|
+ type: "category",
|
|
|
|
+ inverse: true,
|
|
|
|
+ axisLine: {
|
|
|
|
+ show: false
|
|
|
|
+ },
|
|
|
|
+ axisTick: {
|
|
|
|
+ show: false
|
|
|
|
+ },
|
|
|
|
+ axisPointer: {
|
|
|
|
+ label: {
|
|
|
|
+ show: true,
|
|
|
|
+ //margin: 30
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ padding: [5, 0, 0, 0],
|
|
|
|
+ postion: "right",
|
|
|
|
+ data: attaName,
|
|
|
|
+ axisLabel: {
|
|
|
|
+ margin: 30,
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ align: "left",
|
|
|
|
+ padding: [2, 0, 0, 0],
|
|
|
|
+ color: "#000",
|
|
|
|
+ rich: {
|
|
|
|
+ nt1: {
|
|
|
|
+ color: "#fff",
|
|
|
|
+ backgroundColor: attackSourcesColor1[0],
|
|
|
|
+ width: 15,
|
|
|
|
+ height: 15,
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ align: "center",
|
|
|
|
+ borderRadius: 100,
|
|
|
|
+ lineHeight: "5",
|
|
|
|
+ padding: [0, 1, 2, 1]
|
|
|
|
+ // padding:[0,0,2,0],
|
|
|
|
+ },
|
|
|
|
+ nt2: {
|
|
|
|
+ color: "#fff",
|
|
|
|
+ backgroundColor: attackSourcesColor1[1],
|
|
|
|
+ width: 15,
|
|
|
|
+ height: 15,
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ align: "center",
|
|
|
|
+ borderRadius: 100,
|
|
|
|
+ padding: [0, 1, 2, 1]
|
|
|
|
+ },
|
|
|
|
+ nt3: {
|
|
|
|
+ color: "#fff",
|
|
|
|
+ backgroundColor: attackSourcesColor1[2],
|
|
|
|
+ width: 15,
|
|
|
|
+ height: 15,
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ align: "center",
|
|
|
|
+ borderRadius: 100,
|
|
|
|
+ padding: [0, 1, 2, 1]
|
|
|
|
+ },
|
|
|
|
+ nt: {
|
|
|
|
+ color: "#fff",
|
|
|
|
+ backgroundColor: attackSourcesColor1[3],
|
|
|
|
+ width: 15,
|
|
|
|
+ height: 15,
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ align: "center",
|
|
|
|
+ lineHeight: 3,
|
|
|
|
+ borderRadius: 100,
|
|
|
|
+ padding: [0, 1, 2, 1],
|
|
|
|
+ lineHeight: 5
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
|
|
- splitLine: {
|
|
|
|
- show: false
|
|
|
|
- },
|
|
|
|
- axisLabel: {
|
|
|
|
- show: false
|
|
|
|
- },
|
|
|
|
- axisTick: {
|
|
|
|
- show: false
|
|
|
|
- },
|
|
|
|
- axisLine: {
|
|
|
|
- show: false
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- yAxis: [{ //左侧排行数字
|
|
|
|
- type: "category",
|
|
|
|
- inverse: true,
|
|
|
|
- axisLine: {
|
|
|
|
- show: false
|
|
|
|
- },
|
|
|
|
- axisTick: {
|
|
|
|
- show: false
|
|
|
|
- },
|
|
|
|
- axisPointer: {
|
|
|
|
- label: {
|
|
|
|
- show: true,
|
|
|
|
- //margin: 30
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- padding: [5, 0, 0, 0],
|
|
|
|
- postion: "right",
|
|
|
|
- data: attaName,
|
|
|
|
- axisLabel: {
|
|
|
|
- margin: 30,
|
|
|
|
- fontSize: 12,
|
|
|
|
- align: "left",
|
|
|
|
- padding: [2, 0, 0, 0],
|
|
|
|
- color: "#000",
|
|
|
|
- rich: {
|
|
|
|
- nt1: {
|
|
|
|
- color: "#fff",
|
|
|
|
- backgroundColor: attackSourcesColor1[0],
|
|
|
|
- width: 15,
|
|
|
|
- height: 15,
|
|
|
|
- fontSize: 12,
|
|
|
|
- align: "center",
|
|
|
|
- borderRadius: 100,
|
|
|
|
- lineHeight: "5",
|
|
|
|
- padding: [0, 1, 2, 1]
|
|
|
|
- // padding:[0,0,2,0],
|
|
|
|
- },
|
|
|
|
- nt2: {
|
|
|
|
- color: "#fff",
|
|
|
|
- backgroundColor: attackSourcesColor1[1],
|
|
|
|
- width: 15,
|
|
|
|
- height: 15,
|
|
|
|
- fontSize: 12,
|
|
|
|
- align: "center",
|
|
|
|
- borderRadius: 100,
|
|
|
|
- padding: [0, 1, 2, 1]
|
|
|
|
- },
|
|
|
|
- nt3: {
|
|
|
|
- color: "#fff",
|
|
|
|
- backgroundColor: attackSourcesColor1[2],
|
|
|
|
- width: 15,
|
|
|
|
- height: 15,
|
|
|
|
- fontSize: 12,
|
|
|
|
- align: "center",
|
|
|
|
- borderRadius: 100,
|
|
|
|
- padding: [0, 1, 2, 1]
|
|
|
|
- },
|
|
|
|
- nt: {
|
|
|
|
- color: "#fff",
|
|
|
|
- backgroundColor: attackSourcesColor1[3],
|
|
|
|
- width: 15,
|
|
|
|
- height: 15,
|
|
|
|
- fontSize: 12,
|
|
|
|
- align: "center",
|
|
|
|
- lineHeight: 3,
|
|
|
|
- borderRadius: 100,
|
|
|
|
- padding: [0, 1, 2, 1],
|
|
|
|
- lineHeight: 5
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- { //右侧名字
|
|
|
|
- type: "category",
|
|
|
|
- inverse: true,
|
|
|
|
- axisTick: "none",
|
|
|
|
- axisLine: "none",
|
|
|
|
- show: true,
|
|
|
|
- axisLabel: {
|
|
|
|
- textStyle: {
|
|
|
|
- color: "#fff",
|
|
|
|
- fontSize: "12"
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- //data: attackSourcesDataFmt(attaName)
|
|
|
|
- data: attackSourcesDataFmt(attaData) //数字
|
|
|
|
- },
|
|
|
|
- { //名称
|
|
|
|
- type: 'category',
|
|
|
|
- offset: -10,
|
|
|
|
- position: "left",
|
|
|
|
- axisLabel: {
|
|
|
|
- color: `#fff`,
|
|
|
|
- fontSize: 10
|
|
|
|
- },
|
|
|
|
- axisLine: {
|
|
|
|
- show: false
|
|
|
|
- },
|
|
|
|
- inverse: true,
|
|
|
|
- axisTick: {
|
|
|
|
- show: false
|
|
|
|
- },
|
|
|
|
- axisLabel: {
|
|
|
|
- interval: 0,
|
|
|
|
- color: ["#fff"],
|
|
|
|
- align: "left",
|
|
|
|
- verticalAlign: "bottom",
|
|
|
|
- lineHeight: 32,
|
|
|
|
- fontSize: 12
|
|
|
|
- },
|
|
|
|
- data: topName
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- series: [{ //条形图数值
|
|
|
|
- zlevel: 1,
|
|
|
|
- name: "个人所得(亿元)",
|
|
|
|
- type: "bar",
|
|
|
|
- barWidth: "8px",
|
|
|
|
- animationDuration: 1500,
|
|
|
|
- data: attackSourcesDataFmt(attaData),
|
|
|
|
- align: "center",
|
|
|
|
- itemStyle: {
|
|
|
|
- normal: {
|
|
|
|
- barBorderRadius: 10
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- label: {
|
|
|
|
- show: false,
|
|
|
|
- fontSize: 12,
|
|
|
|
- color: "#fff",
|
|
|
|
- textBorderWidth: 2,
|
|
|
|
- padding: [2, 0, 0, 0]
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- { //最大值背景条形图
|
|
|
|
- name: "个人所得(亿元)",
|
|
|
|
- type: "bar",
|
|
|
|
- barWidth: 8,
|
|
|
|
- barGap: "-100%",
|
|
|
|
- margin: "20",
|
|
|
|
- data: salvProMax,
|
|
|
|
- textStyle: {
|
|
|
|
- //图例文字的样式
|
|
|
|
- fontSize: 12,
|
|
|
|
- color: "#fff"
|
|
|
|
- },
|
|
|
|
- itemStyle: {
|
|
|
|
- normal: {
|
|
|
|
- color: "#05325F",
|
|
|
|
- //width:"100%",
|
|
|
|
- fontSize: 12,
|
|
|
|
- barBorderRadius: 30
|
|
|
|
- },
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- ]
|
|
|
|
- };
|
|
|
|
- option && myChart.setOption(option);
|
|
|
|
- },
|
|
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ { //右侧名字
|
|
|
|
+ type: "category",
|
|
|
|
+ inverse: true,
|
|
|
|
+ axisTick: "none",
|
|
|
|
+ axisLine: "none",
|
|
|
|
+ show: true,
|
|
|
|
+ axisLabel: {
|
|
|
|
+ textStyle: {
|
|
|
|
+ color: "#fff",
|
|
|
|
+ fontSize: "12"
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //data: attackSourcesDataFmt(attaName)
|
|
|
|
+ data: attackSourcesDataFmt(attaData) //数字
|
|
|
|
+ },
|
|
|
|
+ { //名称
|
|
|
|
+ type: 'category',
|
|
|
|
+ offset: -10,
|
|
|
|
+ position: "left",
|
|
|
|
+ axisLabel: {
|
|
|
|
+ color: `#fff`,
|
|
|
|
+ fontSize: 10
|
|
|
|
+ },
|
|
|
|
+ axisLine: {
|
|
|
|
+ show: false
|
|
|
|
+ },
|
|
|
|
+ inverse: true,
|
|
|
|
+ axisTick: {
|
|
|
|
+ show: false
|
|
|
|
+ },
|
|
|
|
+ axisLabel: {
|
|
|
|
+ interval: 0,
|
|
|
|
+ color: ["#fff"],
|
|
|
|
+ align: "left",
|
|
|
|
+ verticalAlign: "bottom",
|
|
|
|
+ lineHeight: 32,
|
|
|
|
+ fontSize: 12
|
|
|
|
+ },
|
|
|
|
+ data: topName
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ series: [{ //条形图数值
|
|
|
|
+ zlevel: 1,
|
|
|
|
+ name: "个人所得(亿元)",
|
|
|
|
+ type: "bar",
|
|
|
|
+ barWidth: "8px",
|
|
|
|
+ animationDuration: 1500,
|
|
|
|
+ data: attackSourcesDataFmt(attaData),
|
|
|
|
+ align: "center",
|
|
|
|
+ itemStyle: {
|
|
|
|
+ normal: {
|
|
|
|
+ barBorderRadius: 10
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ label: {
|
|
|
|
+ show: false,
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ color: "#fff",
|
|
|
|
+ textBorderWidth: 2,
|
|
|
|
+ padding: [2, 0, 0, 0]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ { //最大值背景条形图
|
|
|
|
+ name: "个人所得(亿元)",
|
|
|
|
+ type: "bar",
|
|
|
|
+ barWidth: 8,
|
|
|
|
+ barGap: "-100%",
|
|
|
|
+ margin: "20",
|
|
|
|
+ data: salvProMax,
|
|
|
|
+ textStyle: {
|
|
|
|
+ //图例文字的样式
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ color: "#fff"
|
|
|
|
+ },
|
|
|
|
+ itemStyle: {
|
|
|
|
+ normal: {
|
|
|
|
+ color: "#05325F",
|
|
|
|
+ //width:"100%",
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ barBorderRadius: 30
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ };
|
|
|
|
+ option && myChart.setOption(option);
|
|
|
|
+ },
|
|
|
|
|
|
- },
|
|
|
|
|
|
+ },
|
|
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
+ }
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
- .chart-container {
|
|
|
|
- width: 100%;
|
|
|
|
- height: auto;
|
|
|
|
- position: relative;
|
|
|
|
- padding-bottom: 10px;
|
|
|
|
- display: flex;
|
|
|
|
- }
|
|
|
|
|
|
+ .chart-container {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: auto;
|
|
|
|
+ position: relative;
|
|
|
|
+ padding-bottom: 10px;
|
|
|
|
+ display: flex;
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|