From b1ff1b87ca65b2989f209d1d12778ddd8ce6a084 Mon Sep 17 00:00:00 2001
From: zhangxiaoxu123 <819527061@qq.com>
Date: 星期三, 04 一月 2023 21:40:23 +0800
Subject: [PATCH] 合并大屏项目
---
src/components/page/show/show-index.vue | 3500 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 3,500 insertions(+), 0 deletions(-)
diff --git a/src/components/page/show/show-index.vue b/src/components/page/show/show-index.vue
new file mode 100644
index 0000000..e2a2033
--- /dev/null
+++ b/src/components/page/show/show-index.vue
@@ -0,0 +1,3500 @@
+<template>
+ <div class="show-index">
+ <div class="show-index-title">
+ <h1>宄板嘲鐭垮尯缁煎悎琛屾斂鎵ф硶灞�鏅烘収娉婅溅骞冲彴</h1>
+ </div>
+ <div class="show-index-main">
+ <div class="show-index-main-left">
+ <div class="show-index-main-left-line">
+ <div class="show-index-main-left-block">
+ <div class="show-block-title">
+ <h1>鏅烘収娉婅溅鍩虹鏁版嵁</h1>
+ </div>
+ <div class="show-block-main">
+ <div class="main-inside-block">
+ <div class="main-inside-line1">
+ <h1>2,818.9</h1>
+ <h2>m虏</h2>
+ </div>
+ <div class="main-inside-line2">
+ <img src="../../../assets/images/show-block-icon1.png" alt="">
+ <h1>鍋滆溅鍦烘�婚潰绉�</h1>
+ </div>
+ </div>
+ <div class="main-inside-block">
+ <div class="main-inside-line1">
+ <h1>382</h1>
+ <h2>涓�</h2>
+ </div>
+ <div class="main-inside-line2">
+ <img src="../../../assets/images/show-block-icon2.png" alt="">
+ <h1>鐩戞帶鎬绘暟</h1>
+ </div>
+ </div>
+ <div class="main-inside-block">
+ <div class="main-inside-line1">
+ <h1>108</h1>
+ <h2>浜�</h2>
+ </div>
+ <div class="main-inside-line2">
+ <img src="../../../assets/images/show-block-icon3.png" alt="">
+ <h1>宸ヤ綔浜哄憳鎬绘暟</h1>
+ </div>
+ </div>
+ <div class="main-inside-block">
+ <div class="main-inside-line1">
+ <h1>2,818.9</h1>
+ <h2>杈�</h2>
+ </div>
+ <div class="main-inside-line2">
+ <img src="../../../assets/images/show-block-icon4.png" alt="">
+ <h1>褰撳墠鍋滆溅鎬绘暟</h1>
+ </div>
+ </div>
+ <div class="main-inside-block">
+ <div class="main-inside-line1">
+ <h1>2,818.9</h1>
+ <h2>浜�</h2>
+ </div>
+ <div class="main-inside-line2">
+ <img src="../../../assets/images/show-block-icon5.png" alt="">
+ <h1>鎵ф硶浜哄憳鎬绘暟</h1>
+ </div>
+ </div>
+ <div class="main-inside-block">
+ <div class="main-inside-line1">
+ <h1>60</h1>
+ <h2>鍙�</h2>
+ </div>
+ <div class="main-inside-line2">
+ <img src="../../../assets/images/show-block-icon6.png" alt="">
+ <h1>鍋滆溅鍦鸿澶囨�绘暟</h1>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="show-index-main-left-block">
+ <div class="show-block-title">
+ <h1>鏅烘収娉婅溅鏈堝害杞﹀満缁熻</h1>
+ </div>
+ <div class="show-block-main">
+ <div class="tclyvEcharts" id="tclyvEcharts"></div>
+ <div class="tcpmEcharts" id="tcpmEcharts"></div>
+ </div>
+ </div>
+ </div>
+ <div class="show-index-main-left-line">
+ <div class="show-index-main-left-block dingdan-num-block">
+ <div class="show-block-title">
+ <h1>鏅烘収娉婅溅鏈堝害璁㈠崟缁熻</h1>
+ </div>
+ <div class="show-block-main dingdan-num-box">
+ <div class="main-inside-line3">
+ <div class="dingdan-block show-month1">
+ <div class="dingdan-num-title">
+ <h1>绱璁㈠崟閲忔暟閲�</h1>
+ </div>
+ <div class="dingdan-num">
+ <h1>6355</h1>
+ <h2>鍗�</h2>
+ </div>
+ </div>
+ <div class="dingdan-block show-month2">
+ <div class="dingdan-num-title">
+ <h1>绱璁㈠崟閲戦</h1>
+ </div>
+ <div class="dingdan-num">
+ <h1>126355</h1>
+ <h2>鍏�</h2>
+ </div>
+ </div>
+ </div>
+ <div class="dingdanNumEcharts" id="ddtjEcharts"></div>
+ </div>
+ </div>
+ <div class="show-index-main-left-block dingdan-tongji-block">
+ <div class="show-block-title">
+ <h1>鏅烘収娉婅溅鏈堝害鍑哄叆鍦虹粺璁�</h1>
+ </div>
+ <div class="show-block-main dingdan-num-box">
+ <div class="main-inside-line3">
+ <div class="dingdan-block show-month3">
+ <div class="dingdan-num-title">
+ <h1>绱璁㈠崟閲忔暟閲�</h1>
+ </div>
+ <div class="dingdan-num">
+ <h1>6355</h1>
+ <h2>鍗�</h2>
+ </div>
+ </div>
+ <div class="dingdan-block show-month4">
+ <div class="dingdan-num-title">
+ <h1>绱璁㈠崟閲忔暟閲�</h1>
+ </div>
+ <div class="dingdan-num">
+ <h1>6355</h1>
+ <h2>鍗�</h2>
+ </div>
+ </div>
+ </div>
+ <div class="chuchangEcharts" id="crMonthEcharts"></div>
+ </div>
+ </div>
+ </div>
+ <div class="show-index-main-left-line">
+ <div class="show-index-main-left-block fadan-tongji-box">
+ <div class="show-block-title2">
+ <h1>鏅烘収娉婅溅鏈堝害鍋滆溅鍦鸿繘鍑哄叆杞﹁締涓庣綒鍗曠粺璁�</h1>
+ </div>
+ <div class="show-block-main">
+ <div class="fadantongjiEcharts" id="jcAndFdEcharts"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="show-index-main-middle">
+ <div class="show-main-middle-title">
+ <h1>2021骞�5鏈�6鏃� 10:28:59 鏄熸湡鍥�</h1>
+ </div>
+ <div class="show-main-middle-inside" id="mapMain">
+ </div>
+ <div class="menu-box menu-box-position1">
+ <div class="menu-box-inside">
+ <div class="menu-box-rel">
+ <h1>598</h1>
+ <h2>涓囪締</h2>
+ </div>
+ </div>
+
+ </div>
+ <div class="menu-box menu-box-position2">
+ <div class="menu-box-inside">
+ <div class="menu-box-rel">
+ <h1>598</h1>
+ <h2>涓囪締</h2>
+ </div>
+ </div>
+
+ </div>
+ <div class="menu-box menu-box-position3">
+ <div class="menu-box-inside">
+ <div class="menu-box-rel">
+ <h1>598</h1>
+ <h2>涓囪締</h2>
+ </div>
+ </div>
+
+ </div>
+ <div class="menu-box menu-box-position4">
+ <div class="menu-box-inside">
+ <div class="menu-box-rel">
+ <h1>598</h1>
+ <h2>涓囪締</h2>
+ </div>
+ </div>
+
+ </div>
+ <div class="menu-box menu-box-position5">
+ <div class="menu-box-inside">
+ <div class="menu-box-rel">
+ <h1>598</h1>
+ <h2>涓囪締</h2>
+ </div>
+ </div>
+
+ </div>
+ <div class="menu-box menu-box-position6">
+ <div class="menu-box-inside">
+ <div class="menu-box-rel">
+ <h1>598</h1>
+ <h2>涓囪締</h2>
+ </div>
+ </div>
+
+ </div>
+ <div class="menu-box-position7 dingdanMoney1">
+ <div class="money-line">
+ <h1>48</h1>
+ <h2>鍏�</h2>
+ </div>
+ <h3>浠婃棩娉婅溅璁㈠崟閲戦</h3>
+ </div>
+ <div class="menu-box-position7 dingdanMoney2">
+ <div class="money-line">
+ <h1>3960</h1>
+ <h2>鍏�</h2>
+ </div>
+ <h3>浠婃棩杩濇硶杞﹁締璁㈠崟閲戦</h3>
+ </div>
+ </div>
+ <div class="show-index-main-left">
+ <div class="show-index-main-left-line">
+ <div class="show-index-main-left-block">
+ <div class="show-block-title">
+ <h1>鏅烘収娉婅溅鏈堝害鎵ф硶浜哄憳缁熻</h1>
+ </div>
+ <div class="show-block-main">
+ <div class="tclyvEcharts" id="fkdclEcharts"></div>
+ <div class="tcpmEcharts" id="moneypmEcharts"></div>
+ </div>
+ </div>
+ <div class="show-index-main-left-block">
+ <div class="show-block-title">
+ <h1>鏅烘収娉婅溅妗堜欢鏉ユ簮姣斾緥缁熻</h1>
+ </div>
+ <div class="show-block-main4">
+ <div class="from-box-line">
+ <div class="dayXjPieEcharts" id="dayXjPieEcharts"></div>
+ <div class="dayXjPieEcharts" id="shangjiPieEcharts"></div>
+
+ </div>
+ <div class="from-box-line2">
+ <div class="dayXjZhuEcharts" id="dayXjZhuEcharts"></div>
+ <!--<div class="dayXjZhuEcharts" id="shangjiZhuEcharts"></div>-->
+ </div>
+ </div>
+ </div>
+
+ </div>
+ <div class="show-index-main-left-line">
+ <div class="show-index-main-left-block dingdan-num-block2">
+ <div class="show-block-title">
+ <h1>鏅烘収娉婅溅鏈堝害杩濇硶杞﹁締缁熻</h1>
+ </div>
+ <div class="show-block-main dingdan-num-box">
+ <div class="main-inside-line3">
+ <div class="dingdan-block show-month2">
+ <div class="dingdan-num-title">
+ <h1>杩濇硶杞﹁締璁㈠崟閲戦</h1>
+ </div>
+ <div class="dingdan-num">
+ <h1>6355</h1>
+ <h2>鍏�</h2>
+ </div>
+ </div>
+ <div class="dingdan-block show-month5">
+ <div class="dingdan-num-title">
+ <h1>杩濇硶杞﹁締璁㈠崟鏁伴噺</h1>
+ </div>
+ <div class="dingdan-num">
+ <h1>126355</h1>
+ <h2>鍗�</h2>
+ </div>
+ </div>
+ </div>
+ <div class="dingdanNumEcharts" id="mouthCltjEcharts"></div>
+ </div>
+ </div>
+ <div class="show-index-main-left-block dingdan-num-block">
+ <div class="show-block-title">
+ <h1>鏅烘収娉婅溅榛戝悕鍗曠粺璁�</h1>
+ </div>
+ <div class="show-block-main dingdan-num-box">
+ <div class="main-inside-line4">
+ <img src="../../../assets/images/black-icon1.png" alt="">
+ <div class="black-box">
+ <div class="black-num-box">
+ <h1>4369</h1>
+ <h2>浜�</h2>
+ </div>
+ <h3>褰撳墠榛戝悕鍗曟�绘暟</h3>
+ </div>
+ </div>
+ <div class="chuchangEcharts" id="blackEcharts"></div>
+ </div>
+ </div>
+ </div>
+ <div class="show-index-main-left-line">
+ <div class="show-index-main-left-block">
+ <div class="show-block-title">
+ <h1>鏅烘収娉婅溅缂磋垂鏃舵晥缁熻</h1>
+ </div>
+ <div class="show-block-main" id="weifaEcharts">
+ </div>
+ </div>
+ <div class="show-index-main-left-block">
+ <div class="show-block-title">
+ <h1>鏅烘収娉婅溅榛戝悕鍗曢噸鐐硅溅杈�</h1>
+ </div>
+ <div class="show-block-main3">
+ <div class="black-important-title">
+ <div class="xuhao">
+ <h1>搴忓彿</h1>
+ </div>
+ <div class="black-name">
+ <h1>杞︾墝鍙�</h1>
+ </div>
+ <div class="black-name">
+ <h1>杩濇硶鏈鐞嗕簨浠�</h1>
+ </div>
+ <div class="black-name">
+ <h1>鍦扮偣</h1>
+ </div>
+ <div class="black-name">
+ <h1>杩濇硶鏃堕棿</h1>
+ </div>
+ <div class="xuhao">
+ <h1>閫炬湡</h1>
+ </div>
+ </div>
+ <div class="black-important-card">
+ <div class="black-important-card-inside">
+ <vue-seamless-scroll :data="scrollList" :class-option="classOption" class="table-conten">
+ <div class="black-important-card-line" v-for="(item,index) in scrollList" :key="index">
+ <div class="xuhao2">
+ <h1>{{index + 1}}</h1>
+ </div>
+ <div class="black-name2">
+ <h1>{{item.chepai}}</h1>
+ </div>
+ <div class="black-name2">
+ <h1>{{item.tingche}}</h1>
+ </div>
+ <div class="black-name2">
+ <h1>{{item.adress}}</h1>
+ </div>
+ <div class="black-name2">
+ <h1>{{item.date}}</h1>
+ </div>
+ <div class="xuhao2">
+ <h1>{{item.shijianLenght}}</h1>
+ </div>
+ </div>
+ <!--<div class="black-important-card-line">
+ <div class="xuhao2">
+ <h1>1</h1>
+ </div>
+ <div class="black-name2">
+ <h1>鍐�AV7238</h1>
+ </div>
+ <div class="black-name2">
+ <h1>杩濇硶鍋滆溅</h1>
+ </div>
+ <div class="black-name2">
+ <h1>涓北璺缓鍗庡ぇ琛椾氦鍙�</h1>
+ </div>
+ <div class="black-name2">
+ <h1>2021.05.22</h1>
+ </div>
+ <div class="xuhao2">
+ <h1>3涓湀</h1>
+ </div>
+ </div>
+ <div class="black-important-card-line">
+ <div class="xuhao2">
+ <h1>1</h1>
+ </div>
+ <div class="black-name2">
+ <h1>鍐�AV7238</h1>
+ </div>
+ <div class="black-name2">
+ <h1>杩濇硶鍋滆溅</h1>
+ </div>
+ <div class="black-name2">
+ <h1>涓北璺缓鍗庡ぇ琛椾氦鍙�</h1>
+ </div>
+ <div class="black-name2">
+ <h1>2021.05.22</h1>
+ </div>
+ <div class="xuhao2">
+ <h1>3涓湀</h1>
+ </div>
+ </div>
+ <div class="black-important-card-line">
+ <div class="xuhao2">
+ <h1>1</h1>
+ </div>
+ <div class="black-name2">
+ <h1>鍐�AV7238</h1>
+ </div>
+ <div class="black-name2">
+ <h1>杩濇硶鍋滆溅</h1>
+ </div>
+ <div class="black-name2">
+ <h1>涓北璺缓鍗庡ぇ琛椾氦鍙�</h1>
+ </div>
+ <div class="black-name2">
+ <h1>2021.05.22</h1>
+ </div>
+ <div class="xuhao2">
+ <h1>3涓湀</h1>
+ </div>
+ </div>
+ <div class="black-important-card-line">
+ <div class="xuhao2">
+ <h1>1</h1>
+ </div>
+ <div class="black-name2">
+ <h1>鍐�AV7238</h1>
+ </div>
+ <div class="black-name2">
+ <h1>杩濇硶鍋滆溅</h1>
+ </div>
+ <div class="black-name2">
+ <h1>涓北璺缓鍗庡ぇ琛椾氦鍙�</h1>
+ </div>
+ <div class="black-name2">
+ <h1>2021.05.22</h1>
+ </div>
+ <div class="xuhao2">
+ <h1>3涓湀</h1>
+ </div>
+ </div>
+ <div class="black-important-card-line">
+ <div class="xuhao2">
+ <h1>1</h1>
+ </div>
+ <div class="black-name2">
+ <h1>鍐�AV7238</h1>
+ </div>
+ <div class="black-name2">
+ <h1>杩濇硶鍋滆溅</h1>
+ </div>
+ <div class="black-name2">
+ <h1>涓北璺缓鍗庡ぇ琛椾氦鍙�</h1>
+ </div>
+ <div class="black-name2">
+ <h1>2021.05.22</h1>
+ </div>
+ <div class="xuhao2">
+ <h1>3涓湀</h1>
+ </div>
+ </div>-->
+ </vue-seamless-scroll>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+ import echarts from "echarts/lib/echarts";
+ export default {
+ name: "show-index",
+ data() {
+ return {
+ avater:require('../../../assets/images/daping-title.png'),
+ scrollList:[
+ {
+ chepai:'鍐�AV7238',
+ tingche:'杩濇硶鍋滆溅',
+ adress:'涓北璺缓鍗庡ぇ琛椾氦鍙�',
+ date:'2021.05.22',
+ shijianLenght:'3涓湀',
+ },
+ {
+ chepai:'鍐�AV7238',
+ tingche:'杩濇硶鍋滆溅',
+ adress:'涓北璺缓鍗庡ぇ琛椾氦鍙�',
+ date:'2021.05.22',
+ shijianLenght:'3涓湀',
+ },
+ {
+ chepai:'鍐�AV7238',
+ tingche:'杩濇硶鍋滆溅',
+ adress:'涓北璺缓鍗庡ぇ琛椾氦鍙�',
+ date:'2021.05.22',
+ shijianLenght:'3涓湀',
+ }
+ ]
+ }
+ },
+ computed:{
+ classOption() {
+ return {
+ step: 0.6, // 鏁板�艰秺澶ч�熷害婊氬姩瓒婂揩
+ limitMoveNum: this.scrollList.length, // 寮�濮嬫棤缂濇粴鍔ㄧ殑鏁版嵁閲� this.dataList.length
+ hoverStop: true, // 鏄惁寮�鍚紶鏍囨偓鍋渟top
+ direction: 1, // 0鍚戜笅 1鍚戜笂 2鍚戝乏 3鍚戝彸
+ openWatch: true, // 寮�鍚暟鎹疄鏃剁洃鎺у埛鏂癲om
+ singleHeight: 0, // 鍗曟杩愬姩鍋滄鐨勯珮搴�(榛樿鍊�0鏄棤缂濅笉鍋滄鐨勬粴鍔�) direction => 0/1
+ singleWidth: 0, // 鍗曟杩愬姩鍋滄鐨勫搴�(榛樿鍊�0鏄棤缂濅笉鍋滄鐨勬粴鍔�) direction => 2/3
+ waitTime: 1000 // 鍗曟杩愬姩鍋滄鐨勬椂闂�(榛樿鍊�1000ms)
+ }
+ }
+ },
+ mounted() {
+ this.tclyvEcharts()
+ this.tcpmEcharts()
+ this.ddtjEcharts()
+ this.jcAndFdEcharts()
+ this.crMonthEcharts()
+ this.fkdclEcharts()
+ this.moneypmEcharts()
+ this.mouthCltjEcharts()
+ this.blackEcharts()
+ this.weifaEcharts()
+ this.dayXjPieEcharts()
+ this.shangjiPieEcharts()
+ this.dayXjZhuEcharts()
+ this.mapMain()
+
+ },
+ methods: {
+ //鏁翠綋杞︿綅鍒╃敤鐜�
+ tclyvEcharts() {
+ //https://www.makeapie.com/editor.html?c=xFkzKG-bpl
+ let myEchart = this.$echarts.init(document.getElementById('tclyvEcharts'))
+ let angle = 0;//瑙掑害锛岀敤鏉ュ仛绠�鍗曠殑鍔ㄧ敾鏁堟灉鐨�
+ let value = 55.33;
+ let option = {
+ title: {
+ text: '{a|'+ value +'}{c|%}',
+ x: 'center',
+ y: 'center',
+ textStyle: {
+ rich:{
+ a: {
+ fontSize: 40,
+ color: '#29EEF3'
+ },
+
+ c: {
+ fontSize: 18,
+ color: '#ffffff',
+ // padding: [5,0]
+ }
+ }
+ }
+ },
+ graphic: [{
+ type: 'text',
+ z: 100,
+ left: 'center',
+ top: '90%',
+ style: {
+ fill: '#34fff8',
+ text: '鏁翠綋杞︿綅鍒╃敤鐜�',
+ // text: [
+ // '妯酱琛ㄧず娓╁害锛屽崟浣嶆槸掳C',
+ // '绾佃酱琛ㄧず楂樺害锛屽崟浣嶆槸km',
+ // '鍙充笂瑙掓湁涓�涓浘鐗囧仛鐨勬按鍗�',
+ // '杩欎釜鏂囨湰鍧楀彲浠ユ斁鍦ㄥ浘涓悇',
+ // '绉嶄綅缃�'
+ // ].join('\n'),
+ font: '20px Microsoft YaHei'
+ }
+ }],
+ legend: { show: false },
+ series: [ {
+ name: "ring5",
+ type: 'custom',
+ coordinateSystem: "none",
+ renderItem: function(params, api) {
+ return {
+ type: 'arc',
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2,
+ r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
+ startAngle: (0+angle) * Math.PI / 180,
+ endAngle: (90+angle) * Math.PI / 180
+ },
+ style: {
+ stroke: "#0CD3DB",
+ fill: "transparent",
+ lineWidth: 1.5
+ },
+ silent: true
+ };
+ },
+ data: [0]
+ }, {
+ name: "ring5",
+ type: 'custom',
+ coordinateSystem: "none",
+ renderItem: function(params, api) {
+ return {
+ type: 'arc',
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2,
+ r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
+ startAngle: (180+angle) * Math.PI / 180,
+ endAngle: (270+angle) * Math.PI / 180
+ },
+ style: {
+ stroke: "#0CD3DB",
+ fill: "transparent",
+ lineWidth: 1.5
+ },
+ silent: true
+ };
+ },
+ data: [0]
+ }, {
+ name: "ring5",
+ type: 'custom',
+ coordinateSystem: "none",
+ renderItem: function(params, api) {
+ return {
+ type: 'arc',
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2,
+ r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
+ startAngle: (270+-angle) * Math.PI / 180,
+ endAngle: (40+-angle) * Math.PI / 180
+ },
+ style: {
+ stroke: "#0CD3DB",
+ fill: "transparent",
+ lineWidth: 1.5
+ },
+ silent: true
+ };
+ },
+ data: [0]
+ }, {
+ name: "ring5",
+ type: 'custom',
+ coordinateSystem: "none",
+ renderItem: function(params, api) {
+ return {
+ type: 'arc',
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2,
+ r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
+ startAngle: (90+-angle) * Math.PI / 180,
+ endAngle: (220+-angle) * Math.PI / 180
+ },
+ style: {
+ stroke: "#0CD3DB",
+ fill: "transparent",
+ lineWidth: 1.5
+ },
+ silent: true
+ };
+ },
+ data: [0]
+ }, {
+ name: "ring5",
+ type: 'custom',
+ coordinateSystem: "none",
+ renderItem: function(params, api) {
+ let x0 = api.getWidth() / 2;
+ let y0 = api.getHeight() / 2;
+ let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
+ let point = getCirlPoint(x0, y0, r, (90+-angle))
+ return {
+ type: 'circle',
+ shape: {
+ cx: point.x,
+ cy: point.y,
+ r: 4
+ },
+ style: {
+ stroke: "#0CD3DB",//绮�
+ fill: "#0CD3DB"
+ },
+ silent: true
+ };
+ },
+ data: [0]
+ }, {
+ name: "ring5", //缁跨偣
+ type: 'custom',
+ coordinateSystem: "none",
+ renderItem: function(params, api) {
+ let x0 = api.getWidth() / 2;
+ let y0 = api.getHeight() / 2;
+ let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
+ let point = getCirlPoint(x0, y0, r, (270+-angle))
+ return {
+ type: 'circle',
+ shape: {
+ cx: point.x,
+ cy: point.y,
+ r: 4
+ },
+ style: {
+ stroke: "#0CD3DB", //缁�
+ fill: "#0CD3DB"
+ },
+ silent: true
+ };
+ },
+ data: [0]
+ }, {
+ name: '鍚冪尓鑲夐鐜�',
+ type: 'pie',
+ radius: ['58%', '45%'],
+ silent: true,
+ clockwise: true,
+ startAngle: 90,
+ z: 0,
+ zlevel: 0,
+ label: {
+ normal: {
+ position: "center",
+
+ }
+ },
+ data: [{
+ value: value,
+ name: "",
+ itemStyle: {
+ normal: {
+ color: { // 瀹屾垚鐨勫渾鐜殑棰滆壊
+ colorStops: [{
+ offset: 0,
+ color: '#34fff8' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#a7fffc' // 100% 澶勭殑棰滆壊
+ }]
+ },
+ }
+ }
+ },
+ {
+ value: 100-value,
+ name: "",
+ label: {
+ normal: {
+ show: false
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: "#021c2c"
+ }
+ }
+ }
+ ]
+ },
+
+ {
+ name: "",
+ type: "gauge",
+ radius: "58%",
+ center: ['50%', '50%'],
+ startAngle: 0,
+ endAngle: 359.9,
+ splitNumber: 8,
+ hoverAnimation: true,
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ length: 60,
+ lineStyle: {
+ width: 5,
+ color: "#011020"
+ }
+ },
+ axisLabel: {
+ show: false
+ },
+ pointer: {
+ show: false
+ },
+ axisLine: {
+ lineStyle: {
+ opacity: 0
+ }
+ },
+ detail: {
+ show: false
+ },
+ data: [{
+ value: 0,
+ name: ""
+ }]
+ },
+
+ ]
+ };
+ //鑾峰彇鍦嗕笂闈㈡煇鐐圭殑鍧愭爣(x0,y0琛ㄧず鍧愭爣锛宺鍗婂緞锛宎ngle瑙掑害)
+ function getCirlPoint(x0, y0, r, angle) {
+ let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
+ let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
+ return {
+ x: x1,
+ y: y1
+ }
+ }
+ function draw(){
+ angle = angle+3
+ myEchart.setOption(option, true)
+ //window.requestAnimationFrame(draw);
+ }
+ setInterval(function() {
+ //鐢╯etInterval鍋氬姩鐢绘劅瑙夋湁闂
+ draw()
+ }, 100);
+ // myEchart.setOption(option,false)
+ },
+
+ //鍋滆溅鍦虹巼鐢ㄧ巼鎺掑悕
+ tcpmEcharts() {
+ //https://www.makeapie.com/editor.html?c=xiiP_yJDT
+ let myEchart = this.$echarts.init(document.getElementById('tcpmEcharts'))
+ var charts = { // 鎸夐『搴忔帓鍒椾粠澶у埌灏�
+ cityList: ['A1鍋滆溅鍦�', 'A2鍋滆溅鍦�', 'A3鍋滆溅鍦�', 'A4鍋滆溅鍦�', 'A5鍋滆溅鍦�'],
+ cityData: [7500, 6200, 5700, 4200, 3500]
+ }
+ var top10CityList = charts.cityList
+ var top10CityData = charts.cityData
+ var color = ['#ff9500', '#02d8f9', '#027fff']
+ var color1 = ['#ffb349', '#70e9fc', '#4aa4ff']
+
+ let lineY = []
+ let lineT = []
+ for (var i = 0; i < charts.cityList.length; i++) {
+ var x = i
+ if (x > 1) {
+ x = 2
+ }
+ var data = {
+ name: charts.cityList[i],
+ color: color[x],
+ value: top10CityData[i],
+ barGap: '-100%',
+ itemStyle: {
+ normal: {
+ show: true,
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+ offset: 0,
+ color: color[x]
+ }, {
+ offset: 1,
+ color: color1[x]
+ }], false),
+ barBorderRadius: 10
+ },
+ emphasis: {
+ shadowBlur: 15,
+ shadowColor: 'rgba(0, 0, 0, 0.1)'
+ }
+ }
+ }
+ var data1 = {
+ value: top10CityData[0],
+ itemStyle: {
+ color: '#001235',
+ barBorderRadius: 10
+ }
+ }
+ lineY.push(data)
+ lineT.push(data1)
+ }
+
+ let option = {
+ title: {
+ text: '鍋滆溅鍦哄埄鐢ㄧ巼鎺掑悕top5',
+ textStyle: {
+ align: 'center',
+ color: '#ff8a00',
+ fontSize: 20,
+ },
+ top: '1%',
+ left: 'center',
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: (p) => {
+ if (p.seriesName === 'total') {
+ return ''
+ }
+ return `${p.name}<br/>${p.value}`
+ }
+ },
+ grid: {
+ borderWidth: 0,
+ top: '20%',
+ left: '35%',
+ right: '20%',
+ bottom: '3%'
+ },
+ color: color,
+ yAxis: [{
+ type: 'category',
+ inverse: true,
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ axisLabel: {
+ show: false,
+ inside: false
+ },
+ data: top10CityList
+ }, {
+ type: 'category',
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: true,
+ inside: false,
+ lineHeight: '40',
+ textStyle: {
+ color: '#b3ccf8',
+ fontSize: '16',
+ fontFamily: 'PingFangSC-Regular'
+ },
+ formatter: function(val) {
+ return `${val}`
+ }
+ },
+ splitArea: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ data: top10CityData
+ }],
+ xAxis: {
+ type: 'value',
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ }
+ },
+ series: [{
+ name: 'total',
+ type: 'bar',
+ zlevel: 1,
+ barGap: '-100%',
+ barWidth: '10px',
+ data: lineT,
+ legendHoverLink: false
+ }, {
+ name: 'bar',
+ type: 'bar',
+ zlevel: 2,
+ barWidth: '10px',
+ data: lineY,
+ label: {
+ normal: {
+ color: '#b3ccf8',
+ show: true,
+ position: ['-100px', '-5px'],
+ textStyle: {
+ fontSize: 16
+ },
+ formatter: function(a) {
+ let num = ''
+ let str = ''
+ if (a.dataIndex + 1 < 10) {
+ num = '0' + (a.dataIndex + 1);
+ } else {
+ num = (a.dataIndex + 1);
+ }
+ if (a.dataIndex === 0) {
+ str = `{color1|${num}} {color4|${a.name}}`
+ } else if (a.dataIndex === 1) {
+ str = `{color2|${num}} {color4|${a.name}}`
+ } else {
+ str = `{color3|${num}} {color4|${a.name}}`
+ }
+ return str;
+ },
+ rich: {
+ color1: {
+ color: '#ff9500',
+ fontWeight: 700
+ },
+ color2: {
+ color: '#02d8f9',
+ fontWeight: 700
+ },
+ color3: {
+ color: '#027fff',
+ fontWeight: 700
+ },
+ color4: {
+ color: '#e5eaff'
+ }
+ }
+ }
+ }
+ }],
+ }
+ myEchart.setOption(option,false)
+ },
+
+ //鏈堝害娉婅溅璁㈠崟鏁伴噺鍙樺寲
+ ddtjEcharts() {
+ //https://www.makeapie.com/editor.html?c=xTsu_f6uCC
+ let myEchart = this.$echarts.init(document.getElementById('ddtjEcharts'))
+ var fontColor = '#f3ffff';
+ let option ={
+ title: {
+ text: '鏈堝害娉婅溅璁㈠崟鏁伴噺鍙樺寲',
+ textStyle: {
+ align: 'center',
+ color: '#ff8a00',
+ fontSize: 20,
+ },
+ top: '10%',
+ left: 'center',
+ },
+ grid: {
+ left: '5%',
+ right: '10%',
+ top:'30%',
+ bottom: '5%',
+ containLabel: true
+ },
+ tooltip : {
+ show: true,
+ trigger: 'item'
+ },
+ xAxis : [
+ {
+ type : 'category',
+ boundaryGap : false,
+ axisLabel:{
+ color: fontColor,
+ fontSize: 16
+ },
+ axisLine:{
+ show:false,
+ lineStyle:{
+ color:'#333f4c'
+ }
+ },
+ axisTick:{
+ show:false,
+ },
+ splitLine:{
+ show:false,
+ lineStyle:{
+ color:'#333f4c'
+ }
+ },
+ data : ['1鏈�','2鏈�','3鏈�','4鏈�','5鏈�','6鏈�','7鏈�','8鏈�','9鏈�','10鏈�','11鏈�','12鏈�']
+ }
+ ],
+ yAxis : [
+ {
+ type : 'value',
+ name : '(鍗�)',
+ min:0,
+ max:800,
+ axisLabel : {
+ formatter: '{value}',
+ textStyle:{
+ color:'#f3ffff',
+ fontSize: 16
+ }
+ },
+ axisLine:{
+ show:false,
+ lineStyle:{
+ color:'#27b4c2'
+ }
+ },
+ axisTick:{
+ show:false,
+ },
+ splitLine:{
+ show:true,
+ lineStyle:{
+ color:'#333f4c'
+ }
+ }
+ },
+ ],
+ series : [
+ {
+ name:'宸查噰绾�',
+ type:'line',
+ stack: '鎬婚噺',
+ symbol:'circle',
+ symbolSize: 8,
+ itemStyle: {
+ normal: {
+ color:'#0092f6',
+ lineStyle: {
+ color: "#10d0d3",
+ width:2
+ },
+ areaStyle: {
+ //color: '#94C9EC'
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: 'rgba(1,87,105,0.1)'
+ }, {
+ offset: 1,
+ color: 'rgba(1,87,105,0.9)'
+ }]),
+ }
+ }
+ },
+ markPoint:{
+ itemStyle:{
+ normal:{
+ color:'red'
+ }
+ }
+ },
+ data:[80, 132, 101, 334, 90, 230, 210, 582, 191, 234, 290, 330]
+ },
+ ]
+ };
+ myEchart.setOption(option, true)
+ },
+
+ //鏅烘収娉婅溅鏈堝害鍋滆溅鍦鸿繘鍑哄叆杞﹁締涓庣綒鍗曠粺璁�
+ jcAndFdEcharts() {
+ //https://www.makeapie.com/editor.html?c=xDirb7FouD
+ let myEchart = this.$echarts.init(document.getElementById('jcAndFdEcharts'))
+ var getsyzl=['A1','A2','A3','A4','A5','A6','A7','A8','A9','A10','A11','A12','A13','A14','A15','A16','A17','A18','A19','A20'];
+ var getwkrs=[826,673,588,782,779,855,826,673,588,782,779,855,826,673,588,782,779,855,826,826];
+ var getlkrs=[686,703,788,882,779,785,673,588,782,779,855,826,673,588,782,779,855,779,855,826];
+ let option= {
+ grid: {
+ top: '20%',
+ left: '5%',
+ right: '5%',
+ bottom: '3%',
+ containLabel: true
+ },
+ legend: {
+ data: ['杩涘嚭鍏ヨ溅杈�','鍙戝崟杞﹁締'],
+ right: "5%",
+ top:"8%",
+ textStyle: {
+ color: "#A1D5FF",
+ fontSize: 12
+ },
+ itemWidth: 12, // 璁剧疆瀹藉害
+ itemHeight:16, // 璁剧疆楂樺害
+ itemGap: 12 // 璁剧疆闂磋窛
+ },
+ xAxis: [{
+ data: getsyzl,
+ axisLabel: {
+ margin: 10,
+ color: '#f3ffff',
+ textStyle: {
+ fontSize: 16
+ },
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#102E74',
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ }],
+ yAxis: [{
+ type:'value',
+ axisLabel: {
+ color: '#f3ffff',
+ textStyle: {
+ fontSize: 16
+ },
+ },
+ axisLine: {
+ show:false,
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#102E74',
+ }
+ }
+ }],
+ series: [
+ {
+ name: "杩涘嚭鍏ヨ溅杈�",
+ type: 'bar',
+ data: getwkrs,
+ barWidth: '16px',
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(18,231,232,1)' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: 'rgba(159,255,255,1)' // 100% 澶勭殑棰滆壊
+ }], false),
+ barBorderRadius: [30, 30, 0, 0],
+ }
+ },
+ },{
+ name: "鍙戝崟杞﹁締",
+ type: 'bar',
+ data: getlkrs,
+ barWidth: '16px',
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(232,18,214,0.9)' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: 'rgba(198,173,255,0.9)' // 100% 澶勭殑棰滆壊
+ }], false),
+ barBorderRadius: [30, 30, 0, 0],
+ }
+ },
+ }
+ ]
+ }
+ myEchart.setOption(option, true)
+ },
+
+ //鏅烘収娉婅溅鏈堝害鍑哄叆鍦虹粺璁�
+ crMonthEcharts() {
+ //https://www.makeapie.com/editor.html?c=xLalwfP12d
+ let myEchart = this.$echarts.init(document.getElementById('crMonthEcharts'))
+ let dataText = [{
+ name: '杩�',
+ type: 'line',
+ smooth: true,
+ symbolSize: 8,
+ data: [127, 224, 120, 278, 227, 237],
+ barWidth: '30%',
+ itemStyle: {
+ normal: {
+ color: '#f0c725'
+ }
+ }
+ }, {
+ name: '鍑�',
+ type: 'line',
+ smooth: true,
+ symbolSize: 8,
+ data: [27, 124, 70, 178, 127, 157],
+ barWidth: '30%',
+ itemStyle: {
+ normal: {
+ color: '#16f892'
+ }
+ }
+ },
+ ]
+ let dataObj = {
+ year: ['2015', '2016', '2017', '2018', '2019', '2010'],
+ data: {
+ value: [{
+ name: '杩�',
+ value: [127, 224, 120, 278, 227, 237]
+ }, {
+ name: '鍑�',
+ value: [27, 124, 70, 178, 127, 157]
+ }]
+ }
+ }
+ let dataArr = []
+
+ dataObj.data.value.map(item => {
+ let datachild = []
+ let newArr = {
+ name: item.name,
+ type: 'line',
+ smooth: true,
+ symbolSize: 8,
+ data: item.value,
+ barWidth: '30%',
+ itemStyle: {
+ normal: {
+ color: item.name ==='杩�'?'#f0c725':item.name ==='鍑�'?'#0BE3FF':'#16f892'
+ }
+ }
+ }
+
+ dataArr.push(newArr)
+ })
+ console.log(dataArr)
+ let option = {
+ color: ['#8debfa', '#ffbe33'],
+ title: {
+ left: 'center',
+ top:'30',
+ text: '鏈堝害娉婅溅杩涘嚭鍦烘暟閲忓彉鍖�',
+ textStyle: {
+ color: '#ff8a00',
+ fontSize: '20',
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+ type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ }
+ },
+ legend: {
+ right: '30',
+ top: '30',
+ textStyle: {
+ color: '#c1cadf',
+ "fontSize": 14
+ }
+ },
+ grid: {
+ left: '5%',
+ right: '6%',
+ top: '25%',
+ bottom: '3%',
+ containLabel: true
+ },
+ toolbox: {
+ show: true,
+ orient: 'vertical',
+ x: 'right',
+ y: 'center'
+ },
+ xAxis: [{
+ type: 'category',
+ boundaryGap: false,
+ data: dataObj.year,
+ axisLine: {
+ lineStyle: {
+ color: '#102E74'
+ }
+ },
+ axisLabel: {
+ interval: 0,
+ color: '#f3ffff',
+ fontSize:'16'
+ }
+ }],
+ yAxis: [{
+ type: 'value',
+ name: '(杈�)',
+ nameTextStyle: {
+ color: '#f3ffff',
+ align: 'right',
+ lineHeight: 20
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#102E74'
+ }
+ },
+ axisLabel: {
+ interval: 0,
+ color: '#f3ffff',
+ fontSize:'16'
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#102E74',
+ }
+ }
+ }],
+ series: dataArr
+ };
+ myEchart.setOption(option,false)
+ },
+ //缃氭杞﹁締杈炬垚鐜�
+ fkdclEcharts() {
+ //https://www.makeapie.com/editor.html?c=xOB_SkK40D
+ let myEchart = this.$echarts.init(document.getElementById('fkdclEcharts'))
+ let value = 98;
+ let int = value.toFixed(2).split('.')[0];
+ let float = value.toFixed(2).split('.')[1];
+ let option = {
+ title: {
+ text: '{a|'+ value +'}{c|%}',
+ x: 'center',
+ y: 'center',
+ textStyle: {
+ rich: {
+ a: {
+ fontSize: 48,
+ color: '#fff',
+ fontWeight:'600',
+ },
+ b: {
+ fontSize: 20,
+ color: '#fff',
+ padding: [0, 0, 14, 0]
+ },
+ c: {
+ fontSize: 20,
+ color: '#fff',
+ padding: [5, 0]
+ }
+ }
+ }
+ },
+ graphic: [{
+ type: 'text',
+ z: 100,
+ left: 'center',
+ top: '90%',
+ style: {
+ fill: '#ffd701',
+ text: '缃氭杞﹁締杈炬垚鐜�',
+ // text: [
+ // '妯酱琛ㄧず娓╁害锛屽崟浣嶆槸掳C',
+ // '绾佃酱琛ㄧず楂樺害锛屽崟浣嶆槸km',
+ // '鍙充笂瑙掓湁涓�涓浘鐗囧仛鐨勬按鍗�',
+ // '杩欎釜鏂囨湰鍧楀彲浠ユ斁鍦ㄥ浘涓悇',
+ // '绉嶄綅缃�'
+ // ].join('\n'),
+ font: '20px Microsoft YaHei'
+ }
+ }],
+ series: [
+ {
+ type: 'gauge',
+ radius: '70%',
+ clockwise: false,
+ startAngle: '90',
+ endAngle: '-269.9999',
+ splitNumber: 30,
+ detail: {
+ offsetCenter: [0, -20],
+ formatter: ' '
+ },
+ pointer: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: [
+ [0, 'rgba(255,215,1,0.2)'],
+ [36.7 / 100, 'rgba(255,215,1,0.2)'],
+ [1, '#ffc705']
+ ],
+ width: 20
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ length: 100,
+ lineStyle: {
+ shadowBlur: 10,
+ shadowColor: 'rgba(0, 255, 255, 1)',
+ shadowOffsetY:'0',
+ color: '#020f18',
+ width: 2
+ }
+ },
+ axisLabel: {
+ show: false
+ }
+ },
+ {
+ type: 'pie',
+ radius: ['44%', '45%'],
+ hoverAnimation: false,
+ clockWise: false,
+ itemStyle: {
+ normal: {
+ color: '#0C355E'
+ }
+ },
+ label: {
+ show: false
+ },
+ data: _dashed()
+ },
+
+ {
+ type: 'pie',
+ radius: [0, '40%'],
+ hoverAnimation: false,
+ clockWise: false,
+ itemStyle: {
+ normal: {
+ shadowBlur: 20,
+ shadowColor: '#000',
+ color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
+ offset: 0,
+ color: '#174a74',
+ }, {
+ offset: 1,
+ color: '#060f20'
+ }])
+ }
+ },
+ label: {
+ show: false
+ },
+ data: [100]
+ },
+ {
+ type: 'pie',
+ radius: ['64%', '65.5%'],
+ hoverAnimation: false,
+ clockWise: false,
+ itemStyle: {
+ normal: {
+ shadowBlur: 20,
+ shadowColor: 'rgba(0, 255, 255,.3)',
+ color: '#0f232e'
+ }
+ },
+ label: {
+ show: false
+ },
+ data: [100]
+ },
+ {
+ type: 'pie',
+ radius: ['68%', '69.5%'],
+ hoverAnimation: false,
+ clockWise: false,
+ itemStyle: {
+ normal: {
+ shadowBlur: 20,
+ shadowColor: 'rgba(0, 255, 255,.3)',
+ color: 'rgba(15, 35, 46,.6)',
+ }
+ },
+ label: {
+ show: false
+ },
+ data: [100]
+ },
+ ]
+ };
+
+ function _dashed() {
+ let dataArr = [];
+ for (var i = 0; i < 100; i++) {
+ if (i % 2 === 0) {
+ dataArr.push({
+ name: (i + 1).toString(),
+ value: 20,
+ itemStyle: {
+ normal: {
+ color: 'rgb(0,255,255,.3)',
+ }
+ }
+ })
+ } else {
+ dataArr.push({
+ name: (i + 1).toString(),
+ value: 20,
+ itemStyle: {
+ normal: {
+ color: 'rgb(0,0,0,0)',
+ borderWidth: 1,
+ borderColor: "#fff09f"
+ }
+ }
+ })
+ }
+
+ }
+ return dataArr
+
+ }
+
+ function doing() {
+ let option = myEchart.getOption();
+ option.series[1].startAngle = option.series[1].startAngle - 1;
+ myEchart.setOption(option);
+ }
+ function startTimer() {
+ let timer = setInterval(doing, 100);
+ }
+ setTimeout(startTimer, 0);
+ myEchart.setOption(option,true)
+ },
+
+ //褰撴湀鎵ф硶浜哄憳缃氭病閲戦鎺掑悕
+ moneypmEcharts() {
+ //https://www.makeapie.com/editor.html?c=xiiP_yJDT
+ let myEchart = this.$echarts.init(document.getElementById('moneypmEcharts'))
+ var charts = { // 鎸夐『搴忔帓鍒椾粠澶у埌灏�
+ cityList: ['A1鍋滆溅鍦�', 'A2鍋滆溅鍦�', 'A3鍋滆溅鍦�', 'A4鍋滆溅鍦�', 'A5鍋滆溅鍦�'],
+ cityData: [7500, 6200, 5700, 4200, 3500]
+ }
+ var top10CityList = charts.cityList
+ var top10CityData = charts.cityData
+ var color = ['#ff9500', '#02d8f9', '#027fff']
+ var color1 = ['#ffb349', '#70e9fc', '#4aa4ff']
+
+ let lineY = []
+ let lineT = []
+ for (var i = 0; i < charts.cityList.length; i++) {
+ var x = i
+ if (x > 1) {
+ x = 2
+ }
+ var data = {
+ name: charts.cityList[i],
+ color: color[x],
+ value: top10CityData[i],
+ barGap: '-100%',
+ itemStyle: {
+ normal: {
+ show: true,
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+ offset: 0,
+ color: color[x]
+ }, {
+ offset: 1,
+ color: color1[x]
+ }], false),
+ barBorderRadius: 10
+ },
+ emphasis: {
+ shadowBlur: 15,
+ shadowColor: 'rgba(0, 0, 0, 0.1)'
+ }
+ }
+ }
+ var data1 = {
+ value: top10CityData[0],
+ itemStyle: {
+ color: '#001235',
+ barBorderRadius: 10
+ }
+ }
+ lineY.push(data)
+ lineT.push(data1)
+ }
+
+ let option = {
+ title: {
+ text: '褰撴湀鎵ф硶浜哄憳缃氭病閲戦鎺掑悕',
+ textStyle: {
+ align: 'center',
+ color: '#ff8a00',
+ fontSize: 20,
+ },
+ top: '1%',
+ left: 'center',
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: (p) => {
+ if (p.seriesName === 'total') {
+ return ''
+ }
+ return `${p.name}<br/>${p.value}`
+ }
+ },
+ grid: {
+ borderWidth: 0,
+ top: '20%',
+ left: '35%',
+ right: '20%',
+ bottom: '3%'
+ },
+ color: color,
+ yAxis: [{
+ type: 'category',
+ inverse: true,
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ axisLabel: {
+ show: false,
+ inside: false
+ },
+ data: top10CityList
+ }, {
+ type: 'category',
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: true,
+ inside: false,
+ lineHeight: '40',
+ textStyle: {
+ color: '#b3ccf8',
+ fontSize: '16',
+ fontFamily: 'PingFangSC-Regular'
+ },
+ formatter: function(val) {
+ return `${val}`
+ }
+ },
+ splitArea: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ data: top10CityData
+ }],
+ xAxis: {
+ type: 'value',
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ }
+ },
+ series: [{
+ name: 'total',
+ type: 'bar',
+ zlevel: 1,
+ barGap: '-100%',
+ barWidth: '10px',
+ data: lineT,
+ legendHoverLink: false
+ }, {
+ name: 'bar',
+ type: 'bar',
+ zlevel: 2,
+ barWidth: '10px',
+ data: lineY,
+ label: {
+ normal: {
+ color: '#b3ccf8',
+ show: true,
+ position: ['-100px', '-5px'],
+ textStyle: {
+ fontSize: 16
+ },
+ formatter: function(a) {
+ let num = ''
+ let str = ''
+ if (a.dataIndex + 1 < 10) {
+ num = '0' + (a.dataIndex + 1);
+ } else {
+ num = (a.dataIndex + 1);
+ }
+ if (a.dataIndex === 0) {
+ str = `{color1|${num}} {color4|${a.name}}`
+ } else if (a.dataIndex === 1) {
+ str = `{color2|${num}} {color4|${a.name}}`
+ } else {
+ str = `{color3|${num}} {color4|${a.name}}`
+ }
+ return str;
+ },
+ rich: {
+ color1: {
+ color: '#ff9500',
+ fontWeight: 700
+ },
+ color2: {
+ color: '#02d8f9',
+ fontWeight: 700
+ },
+ color3: {
+ color: '#027fff',
+ fontWeight: 700
+ },
+ color4: {
+ color: '#e5eaff'
+ }
+ }
+ }
+ }
+ }],
+ }
+ myEchart.setOption(option,false)
+ },
+
+ //鏈堝害杩濇硶杞︽暟閲忕粺璁�
+ mouthCltjEcharts() {
+ //https://www.makeapie.com/editor.html?c=xTsu_f6uCC
+ let myEchart = this.$echarts.init(document.getElementById('mouthCltjEcharts'))
+ var fontColor = '#f3ffff';
+ let option ={
+ title: {
+ text: '鏈堝害杩濇硶杞︽暟閲忕粺璁�',
+ textStyle: {
+ align: 'center',
+ color: '#ff8a00',
+ fontSize: 20,
+ },
+ top: '10%',
+ left: 'center',
+ },
+ grid: {
+ left: '5%',
+ right: '10%',
+ top:'30%',
+ bottom: '5%',
+ containLabel: true
+ },
+ tooltip : {
+ show: true,
+ trigger: 'item'
+ },
+ xAxis : [
+ {
+ type : 'category',
+ boundaryGap : false,
+ axisLabel:{
+ color: fontColor,
+ fontSize: 16
+ },
+ axisLine:{
+ show:false,
+ lineStyle:{
+ color:'#333f4c'
+ }
+ },
+ axisTick:{
+ show:false,
+ },
+ splitLine:{
+ show:false,
+ lineStyle:{
+ color:'#333f4c'
+ }
+ },
+ data : ['1鏈�','2鏈�','3鏈�','4鏈�','5鏈�','6鏈�','7鏈�','8鏈�','9鏈�','10鏈�','11鏈�','12鏈�']
+ }
+ ],
+ yAxis : [
+ {
+ type : 'value',
+ name : '(鍗�)',
+ min:0,
+ max:800,
+ axisLabel : {
+ formatter: '{value}',
+ textStyle:{
+ color:'#f3ffff',
+ fontSize: 16
+ }
+ },
+ axisLine:{
+ show:false,
+ lineStyle:{
+ color:'#27b4c2'
+ }
+ },
+ axisTick:{
+ show:false,
+ },
+ splitLine:{
+ show:true,
+ lineStyle:{
+ color:'#333f4c'
+ }
+ }
+ },
+ ],
+ series : [
+ {
+ name:'宸查噰绾�',
+ type:'line',
+ stack: '鎬婚噺',
+ symbol:'circle',
+ symbolSize: 8,
+ itemStyle: {
+ normal: {
+ color:'#0092f6',
+ lineStyle: {
+ color: "#10d0d3",
+ width:2
+ },
+ areaStyle: {
+ //color: '#94C9EC'
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: 'rgba(1,87,105,0.1)'
+ }, {
+ offset: 1,
+ color: 'rgba(1,87,105,0.9)'
+ }]),
+ }
+ }
+ },
+ markPoint:{
+ itemStyle:{
+ normal:{
+ color:'red'
+ }
+ }
+ },
+ data:[80, 132, 101, 334, 90, 230, 210, 582, 191, 234, 290, 330]
+ },
+ ]
+ };
+ myEchart.setOption(option, true)
+ },
+
+ blackEcharts() {
+ //https://www.makeapie.com/editor.html?c=xDirb7FouD
+ let myEchart = this.$echarts.init(document.getElementById('blackEcharts'))
+ let option = {
+ title: {
+ text: '榛戝悕鍗曡溅杈嗗垎甯冩儏鍐�',
+ textStyle: {
+ align: 'center',
+ color: '#ff8a00',
+ fontSize: 20,
+ },
+ top: '5%',
+ left: 'center',
+ },
+ grid: {
+ left: '5%',
+ right: '10%',
+ top:'20%',
+ bottom: '5%',
+ containLabel: true
+ },
+ xAxis: {
+ data: ['1-3涓湀', '3-6涓湀', '6-9涓湀', '9-12涓湀'],
+ axisLine: {
+ lineStyle: {
+ color: '#333f4c'
+ }
+ },
+ axisLabel: {
+ color: '#fff',
+ fontSize: 16
+ }
+ },
+ yAxis: {
+ name: "锛堣締锛�",
+ nameTextStyle: {
+ color: '#fff',
+ fontSize: 16
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#333f4c'
+ }
+ },
+ axisLabel: {
+ color: '#fff',
+ fontSize: 16
+ },
+ splitLine: {
+ show:false,
+ lineStyle: {
+ color: '#0177d4'
+ }
+ },
+ interval:500,
+ max:4000
+
+ },
+ series: [{
+ type: 'bar',
+ barWidth: 28,
+ itemStyle:{
+ normal:{
+ color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#00fcff'
+ }, {
+ offset: 0.8,
+ color: '#087bde'
+ }], false),
+ barBorderRadius: [50, 50, 0, 0] //鏌辩姸鍥惧渾瑙�
+ }
+ },
+ data: [254, 3254, 1654, 2454, 4757, 2011, 1211]
+ }]
+ };
+ myEchart.setOption(option, true)
+ },
+ //瀹為檯杩濇硶澶勭悊鏃堕棿缁熻
+ weifaEcharts() {
+ //https://www.makeapie.com/editor.html?c=xH0E6KFMcG
+ let myEchart = this.$echarts.init(document.getElementById('weifaEcharts'))
+ const CubeLeft = echarts.graphic.extendShape({
+ shape: {
+ x: 0,
+ y: 0
+ },
+ buildPath: function(ctx, shape) {
+ const xAxisPoint = shape.xAxisPoint
+ const c0 = [shape.x, shape.y]
+ const c1 = [shape.x - 9, shape.y - 9]
+ const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
+ const c3 = [xAxisPoint[0], xAxisPoint[1]]
+ ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
+ }
+ })
+ const CubeRight = echarts.graphic.extendShape({
+ shape: {
+ x: 0,
+ y: 0
+ },
+ buildPath: function(ctx, shape) {
+ const xAxisPoint = shape.xAxisPoint
+ const c1 = [shape.x, shape.y]
+ const c2 = [xAxisPoint[0], xAxisPoint[1]]
+ const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
+ const c4 = [shape.x + 18, shape.y - 9]
+ ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
+ }
+ })
+ const CubeTop = echarts.graphic.extendShape({
+ shape: {
+ x: 0,
+ y: 0
+ },
+ buildPath: function(ctx, shape) {
+ const c1 = [shape.x, shape.y]
+ const c2 = [shape.x + 18, shape.y - 9]
+ const c3 = [shape.x + 9, shape.y - 18]
+ const c4 = [shape.x - 9, shape.y - 9]
+ ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
+ }
+ })
+ echarts.graphic.registerShape('CubeLeft', CubeLeft)
+ echarts.graphic.registerShape('CubeRight', CubeRight)
+ echarts.graphic.registerShape('CubeTop', CubeTop)
+ const MAX = [6000, 6000, 6000, 6000, 6000, 5000, 4000, 3000, 2000, 4000, 3000, 2000]
+ const VALUE = [2012, 1230, 3790, 2349, 1654, 1230, 3790, 2349, 1654, 3790, 2349, 1654]
+ let option = {
+ title: {
+ text: '瀹為檯杩濇硶澶勭悊鏃堕棿缁熻',
+ top: 20,
+ left: 'center',
+ textStyle: {
+ color: '#ff8a00',
+ fontSize: 20
+ }
+ },
+ grid: {
+ left: 20,
+ right: 40,
+ bottom: '19%',
+ top: 107,
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: ['寰峰窞', '寰峰煄鍖�', '闄靛煄鍖�', '绂瑰煄甯�', '涔愰櫟甯�', '涓撮倯鍘�',
+ '骞冲師鍘�', '澶忔触鍘�', '姝﹀煄鍘�', '搴嗕簯鍘�', '瀹佹触鍘�', '榻愭渤鍘�'
+ ],
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: 'white'
+ }
+ },
+ offset: 20,
+ axisTick: {
+ show: false,
+ length: 9,
+ alignWithLabel: true,
+ lineStyle: {
+ color: '#7DFFFD'
+ }
+ },
+ axisLabel: {
+ fontSize: 10
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: 'white'
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ fontSize: 16
+ },
+ boundaryGap: ['20%', '20%']
+ },
+ series: [{
+ type: 'custom',
+ renderItem: function(params, api) {
+ const location = api.coord([api.value(0), api.value(1)])
+ return {
+ type: 'group',
+ children: [{
+ type: 'CubeLeft',
+ shape: {
+ api,
+ xValue: api.value(0),
+ yValue: api.value(1),
+ x: location[0],
+ y: location[1],
+ xAxisPoint: api.coord([api.value(0), 0])
+ },
+ style: {
+ fill: 'rgba(7,29,97,.6)'
+ }
+ }, {
+ type: 'CubeRight',
+ shape: {
+ api,
+ xValue: api.value(0),
+ yValue: api.value(1),
+ x: location[0],
+ y: location[1],
+ xAxisPoint: api.coord([api.value(0), 0])
+ },
+ style: {
+ fill: 'rgba(10,35,108,.7)'
+ }
+ }, {
+ type: 'CubeTop',
+ shape: {
+ api,
+ xValue: api.value(0),
+ yValue: api.value(1),
+ x: location[0],
+ y: location[1],
+ xAxisPoint: api.coord([api.value(0), 0])
+ },
+ style: {
+ fill: 'rgba(11,42,106,.8)'
+ }
+ }]
+ }
+ },
+ data: MAX
+ }, {
+ type: 'custom',
+ renderItem: (params, api) => {
+ const location = api.coord([api.value(0), api.value(1)])
+ return {
+ type: 'group',
+ children: [{
+ type: 'CubeLeft',
+ shape: {
+ api,
+ xValue: api.value(0),
+ yValue: api.value(1),
+ x: location[0],
+ y: location[1],
+ xAxisPoint: api.coord([api.value(0), 0])
+ },
+ style: {
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#3B80E2'
+ },
+ {
+ offset: 1,
+ color: '#49BEE5'
+ }
+ ])
+ }
+ }, {
+ type: 'CubeRight',
+ shape: {
+ api,
+ xValue: api.value(0),
+ yValue: api.value(1),
+ x: location[0],
+ y: location[1],
+ xAxisPoint: api.coord([api.value(0), 0])
+ },
+ style: {
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#3B80E2'
+ },
+ {
+ offset: 1,
+ color: '#49BEE5'
+ }
+ ])
+ }
+ }, {
+ type: 'CubeTop',
+ shape: {
+ api,
+ xValue: api.value(0),
+ yValue: api.value(1),
+ x: location[0],
+ y: location[1],
+ xAxisPoint: api.coord([api.value(0), 0])
+ },
+ style: {
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#3B80E2'
+ },
+ {
+ offset: 1,
+ color: '#49BEE5'
+ }
+ ])
+ }
+ }]
+ }
+ },
+ data: VALUE
+ }, {
+ type: 'bar',
+ label: {
+ normal: {
+ show: true,
+ position: 'top',
+ formatter: (e) => {
+ switch (e.name) {
+ case '10kV绾胯矾':
+ return VALUE[0]
+ case '鍏敤閰嶅彉':
+ return VALUE[1]
+ case '35kV涓诲彉':
+ return VALUE[2]
+ case '姘�':
+
+ }
+ },
+ fontSize: 16,
+ color: '#fff',
+ offset: [4, -25]
+ }
+ },
+ itemStyle: {
+ color: 'transparent'
+ },
+ data: MAX
+ }]
+ }
+ myEchart.setOption(option, true)
+ },
+
+ dayXjPieEcharts() {
+ //https://www.makeapie.com/editor.html?c=xN_ckhLnbC
+ let myEchart = this.$echarts.init(document.getElementById('dayXjPieEcharts'))
+ let option = {
+ title: [{
+ text: '75%',
+ left: '50%',
+ top: '42%',
+ textAlign: 'center',
+ textStyle: {
+ fontSize: '30',
+ fontWeight: '100',
+ color: '#ffffff',
+ textAlign: 'center',
+ },
+ }],
+ polar: {
+ radius: ['74%', '86%'],
+ center: ['50%', '50%'],
+ },
+ angleAxis: {
+ max: 100,
+ show: false,
+ startAngle: 0,
+ },
+ radiusAxis: {
+ type: 'category',
+ show: true,
+ axisLabel: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+
+ },
+ axisTick: {
+ show: false
+ },
+ },
+ series: [{
+ name: '',
+ type: 'bar',
+ roundCap: true,
+ barWidth: 60,
+ showBackground: true,
+ backgroundStyle: {
+ color: '#00227d',
+ },
+ data: [75],
+ coordinateSystem: 'polar',
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+ offset: 0,
+ color: '#4bf3f9'
+ }, {
+ offset: 1,
+ color: '#4bf3f9'
+ }]),
+ }
+ }
+ },
+ {
+ type: 'pie',
+ radius: ['60%', '63%'],
+ center: ['50%', '50%'],
+ data: [{
+ hoverOffset: 1,
+ value: 100,
+ name: '',
+ itemStyle: {
+ color: '#91a9ff',
+ },
+ label: {
+ show: false
+ },
+ labelLine: {
+ normal: {
+ smooth: true,
+ lineStyle: {
+ width: 0
+ }
+ }
+ },
+ hoverAnimation: false,
+ }
+ ]
+ },
+ ]
+ };
+ myEchart.setOption(option,false)
+ },
+
+ shangjiPieEcharts() {
+ //https://www.makeapie.com/editor.html?c=xN_ckhLnbC
+ let myEchart = this.$echarts.init(document.getElementById('shangjiPieEcharts'))
+ let option = {
+ title: [{
+ text: '75%',
+ left: '50%',
+ top: '42%',
+ textAlign: 'center',
+ textStyle: {
+ fontSize: '30',
+ fontWeight: '100',
+ color: '#ffffff',
+ textAlign: 'center',
+ },
+ }],
+ polar: {
+ radius: ['74%', '86%'],
+ center: ['50%', '50%'],
+ },
+ angleAxis: {
+ max: 100,
+ show: false,
+ startAngle: 0,
+ },
+ radiusAxis: {
+ type: 'category',
+ show: true,
+ axisLabel: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+
+ },
+ axisTick: {
+ show: false
+ },
+ },
+ series: [{
+ name: '',
+ type: 'bar',
+ roundCap: true,
+ barWidth: 60,
+ showBackground: true,
+ backgroundStyle: {
+ color: '#00227d',
+ },
+ data: [75],
+ coordinateSystem: 'polar',
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+ offset: 0,
+ color: '#4bf3f9'
+ }, {
+ offset: 1,
+ color: '#4bf3f9'
+ }]),
+ }
+ }
+ },
+ {
+ type: 'pie',
+ radius: ['60%', '63%'],
+ center: ['50%', '50%'],
+ data: [{
+ hoverOffset: 1,
+ value: 100,
+ name: '',
+ itemStyle: {
+ color: '#91a9ff',
+ },
+ label: {
+ show: false
+ },
+ labelLine: {
+ normal: {
+ smooth: true,
+ lineStyle: {
+ width: 0
+ }
+ }
+ },
+ hoverAnimation: false,
+ }
+ ]
+ }
+ ]
+ };
+ myEchart.setOption(option,false)
+ },
+
+ dayXjZhuEcharts() {
+ //https://www.makeapie.com/editor.html?c=xtb1sE6zH
+ let myEchart = this.$echarts.init(document.getElementById('dayXjZhuEcharts'))
+
+ var category= [{
+ name: "鏃ュ父宸¤",
+ value: 2500,
+ date:'鏉ユ簮鏃ユ湡 2021-06-01'
+ },
+ {
+ name: "涓婄骇鎸囨淳",
+ value: 8000,
+ date:'鏉ユ簮鏃ユ湡 2021-06-01'
+ }
+ ]; // 绫诲埆
+ var total = 10000; // 鏁版嵁鎬绘暟
+ var datas = [];
+ var dates = [];
+ category.forEach(value => {
+ datas.push(value.value);
+ dates.push(value.date);
+ });
+
+ let option = {
+ xAxis: {
+ max: total,
+ splitLine: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ }
+ },
+ grid: {
+ left: 80,
+ top: 20, // 璁剧疆鏉″舰鍥剧殑杈硅窛
+ right: 80,
+ bottom: 20
+ },
+ yAxis: [{
+ type: "category",
+ inverse: false,
+ data: dates,
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ interval: 0,
+ margin: 0,
+ align: 'left',
+ padding: [50, 0, 0, 0],
+ textStyle: {
+ color: '#ffffff',
+ fontSize: 16
+ }
+ }
+ }],
+ series: [{
+ // 鍐�
+ type: "bar",
+ barWidth: 18,
+
+ legendHoverLink: false,
+ silent: true,
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ var color;
+ if(params.dataIndex==19){
+ color = {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [{
+ offset: 0,
+ color: "#44e2f1" // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: "#011753" // 100% 澶勭殑棰滆壊
+ }
+ ]
+ }
+ }else if(params.dataIndex==18){
+ color = {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [{
+ offset: 0,
+ color: "#FFA048" // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: "#B25E14" // 100% 澶勭殑棰滆壊
+ }
+ ]
+ }
+ }else if(params.dataIndex==17){
+ color = {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [{
+ offset: 0,
+ color: "#F8E972" // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: "#E5C206" // 100% 澶勭殑棰滆壊
+ }
+ ]
+ }
+ }else{
+ color = {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [{
+ offset: 0,
+ color: "#1588D1" // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: "#0F4071" // 100% 澶勭殑棰滆壊
+ }
+ ]
+ }
+ }
+ return color;
+ },
+ }
+ },
+ label: {
+ normal: {
+ show: true,
+ position: "left",
+ formatter: "{b}",
+ textStyle: {
+ color: "#fff",
+ fontSize: 14
+ }
+ }
+ },
+ data: category,
+ z: 1,
+ animationEasing: "elasticOut"
+ },
+ {
+ // 鍒嗛殧
+ type: "pictorialBar",
+ itemStyle: {
+ normal:{
+ color:"#061348"
+ }
+ },
+ symbolRepeat: "fixed",
+ symbolMargin: 16,
+ symbol: "rect",
+ symbolClip: true,
+ symbolSize: [1, 21],
+ symbolPosition: "start",
+ symbolOffset: [1, -1],
+ symbolBoundingData: this.total,
+ data: category,
+ z: 2,
+ animationEasing: "elasticOut"
+ },
+ {
+ // 澶栬竟妗�
+ type: "pictorialBar",
+ symbol: "rect",
+ symbolBoundingData: total,
+ itemStyle: {
+ normal: {
+ color: "none"
+ }
+ },
+ label: {
+ normal: {
+ formatter: (params) => {
+ var text;
+ if(params.dataIndex==1){
+ text = '{a| 100%}{f| '+params.data+'}';
+ }else if(params.dataIndex==2){
+ text = '{b| 100%}{f| '+params.data+'}';
+ }else if(params.dataIndex==3){
+ text = '{c| 100%}{f| '+params.data+'}';
+ }else{
+ text = '{d| 100%}{f| '+params.data+'}';
+ }
+ return text;
+ },
+ rich:{
+ a: {
+ color: 'red'
+ },
+ b: {
+ color: 'blue'
+ },
+ c:{
+ color: 'yellow'
+ },
+ d:{
+ color:"green"
+ },
+ f:{
+ color:"#ffffff"
+ }
+ },
+ position: 'right',
+ distance: 0, // 鍚戝彸鍋忕Щ浣嶇疆
+ show: true
+ }
+ },
+ data: datas,
+ z: 0,
+ animationEasing: "elasticOut"
+ },
+ {
+ name: "澶栨",
+ type: "bar",
+ barGap: "-120%", // 璁剧疆澶栨绮楃粏
+ data: [total, total, total,total,total,total,total,total,total,total,total,total,total,total,total,total,total,total,total,total],
+ barWidth: 25,
+ itemStyle: {
+ normal: {
+ color: "transparent", // 濉厖鑹�
+ barBorderColor: "#91a9ff", // 杈规鑹�
+ barBorderWidth: 1, // 杈规瀹藉害
+ // barBorderRadius: 0, //鍦嗚鍗婂緞
+ label: {
+ // 鏍囩鏄剧ず浣嶇疆
+ show: false,
+ position: "top" // insideTop 鎴栬�呮í鍚戠殑 insideLeft
+ }
+ }
+ },
+ z: 0
+ }
+ ]
+ };
+
+ myEchart.setOption(option,false)
+ },
+
+ mapMain() {
+ //https://www.makeapie.com/editor.html?c=xlm3WHfbw2
+ let that = this
+ let myChart = this.$echarts.init(document.getElementById('mapMain'))
+ let JJJ = "json/fengfeng.json";
+ let iconWZ = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAYAAAA4E5OyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCMzBDNUMxRUNBN0IxMUVCQjZEOTg4RDlCOUE0RTg1RSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCMzBDNUMxRkNBN0IxMUVCQjZEOTg4RDlCOUE0RTg1RSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkIzMEM1QzFDQ0E3QjExRUJCNkQ5ODhEOUI5QTRFODVFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkIzMEM1QzFEQ0E3QjExRUJCNkQ5ODhEOUI5QTRFODVFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+0R7NnQAADDZJREFUeNrcWwlsHOUV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'
+ // const JJJ = "/asset/get/s/data-1568010881871-0of0Mrx7V.json";
+
+ $.getJSON(JJJ, mapData => {
+ echarts.registerMap('JJJ', mapData);
+ // myChart.hideLoading();
+
+ const geoCoordMap = {
+ '鍘﹂棬甯�':[114.177462, 36.35074, 20],
+ '绂忓窞甯�': [114.283143, 36.551067, 60],
+ '娉夊窞甯�': [114.283994, 36.550934, 35],
+ '婕冲窞甯�': [114.237671, 36.417724, 53],
+ '榫欏博甯�':[114.284436, 36.545072, 50],
+ '鑾嗙敯甯�':[114.310323, 36.464424, 88],
+ };
+ // [{
+ // "name": "鍘﹂棬甯�",
+ // "value":
+ // }, {
+ // "name": "绂忓窞甯�",
+ // "value":
+ // }, {
+ // "name": "娉夊窞甯�",
+ // "value": [118.589421, 24.908853, 5]
+ // }, {
+ // "name": "婕冲窞甯�",
+ // "value": [117.661801, 24.510897, 1]
+ // }, {
+ // "name": "榫欏博甯�",
+ // "value": [117.02978, 25.091603, 1]
+ // }, {
+ // "name": "鑾嗙敯甯�",
+ // "value": [119.007558, 25.431011, 1]
+ // }]
+ let seriesData = [{
+ "dsid": 592,
+ "name": "鍘﹂棬甯�",
+ "value": [114.283143, 36.551067, 60]
+ }, {
+ "dsid": 591,
+ "name": "绂忓窞甯�",
+ "value": [114.310323, 36.464424, 18]
+ }, {
+ "dsid": 595,
+ "name": "娉夊窞甯�",
+ "value": [114.283994, 36.550934, 5]
+ }, {
+ "dsid": 596,
+ "name": "婕冲窞甯�",
+ "value": [114.284436, 36.545072, 20]
+ }, {
+ "dsid": 597,
+ "name": "榫欏博甯�",
+ "value": [
+ 114.152929,
+ 36.362106
+ ]
+ }, {
+ "dsid": 594,
+ "name": "鑾嗙敯甯�",
+ "value": [
+ 114.114453,
+ 36.375544
+ ]
+ }];
+ let convertData = function(data) {
+ let scatterData = [];
+ for (var i = 0; i < data.length; i++) {
+ var geoCoord = geoCoordMap[data[i].name];
+ if (geoCoord) {
+ scatterData.push({
+ name: data[i].name,
+ value: geoCoord.concat(data[i].value)
+ });
+ }
+ }
+ return scatterData;
+ };
+ let option = {
+ // backgroundColor: 'transparent',
+ title: {
+ text: '',
+ subtext: '',
+ x: 'center'
+ },
+ tooltip: { //鎻愮ず妗嗙粍浠躲��
+ trigger: 'item', //鏁版嵁椤瑰浘褰㈣Е鍙戯紝涓昏鍦ㄦ暎鐐瑰浘锛岄ゼ鍥剧瓑鏃犵被鐩酱鐨勫浘琛ㄤ腑浣跨敤銆�
+ formatter: '{a} <br/> {b}: {c}',
+ textStyle: {
+ fontSize: '24px'
+ }
+ },
+ legend: {
+ show: false,
+ orient: 'horizontal', //鍥句緥鐨勬帓鍒楁柟鍚�
+ x: 'left', //鍥句緥鐨勪綅缃�
+ data: ['']
+ },
+ geo: {
+ map: 'JJJ',
+ left: 'center',
+ zoom:1.2,
+ itemStyle: { //鍦板浘鍖哄煙鐨勫杈瑰舰 鍥惧舰鏍峰紡
+ // color: 'rgba(209,250,12,0.5)',
+ normal: { //鏄浘褰㈠湪榛樿鐘舵�佷笅鐨勬牱寮�
+ color: 'rgba(37,124,169)',
+ label: {
+ show: true, //鏄惁鏄剧ず鏍囩
+ textStyle: {
+ color: 'rgb(249, 249, 249)'
+ },
+ },
+
+ borderWidth: 3,
+ borderColor: 'rgba(37,124,169)',
+ // areaColor: 'rgba(37,124,169)',
+ shadowColor: 'rgba(37,124,169)',
+ shadowOffsetY: 15,
+ shadowOffsetX: 8,
+ // shadowBlur: 3,
+
+ },
+
+ },
+
+ // layoutCenter: ['50%', '30%'],
+ //濡傛灉瀹介珮姣斿ぇ浜� 1 鍒欏搴︿负 100锛屽鏋滃皬浜� 1 鍒欓珮搴︿负 100锛屼繚璇佷簡涓嶈秴杩� 100x100 鐨勫尯鍩�
+ // layoutSize: 100,
+ },
+ visualMap: { //棰滆壊鐨勮缃� dataRange
+ show: false,
+ x: 'left',
+ y: 'center',
+ seriesIndex: [0],
+
+ min: 5000,
+ max: 3000,
+ // splitList: [
+
+
+ // ],
+ // min: 0,
+ // max: 2500,
+ // calculable : true,//棰滆壊鍛堟潯鐘�
+ text: ['楂�', '浣�'], // 鏂囨湰锛岄粯璁や负鏁板�兼枃鏈�
+ color: ['rgb(11,85,142)', 'rgb(13,106,177)'],
+ textStyle: {
+ color: '#fff'
+ },
+
+ },
+ roamController: { //鎺у埗鍦板浘鐨勪笂涓嬪乏鍙虫斁澶х缉灏� 鍥句笂娌℃湁鏄剧ず
+ show: false,
+ x: 'right',
+ mapTypeControl: {
+ 'china': false
+ }
+ },
+ series: [{
+ name: `琛屼笟锛�'鍏ㄩ儴'`,
+ type: 'map',
+ mapType: 'JJJ',
+ // map: 'JJJ',
+ // top: '90%',//缁勪欢璺濈瀹瑰櫒鐨勮窛绂�
+ left: 'center',
+ zoom: 1.2,
+ roam: false, //鏄惁寮�鍚紶鏍囩缉鏀惧拰骞崇Щ婕父
+ itemStyle: { //鍦板浘鍖哄煙鐨勫杈瑰舰 鍥惧舰鏍峰紡
+ color: ['rgb(11,85,142)', 'rgb(13,106,177)'],
+ normal: { //鏄浘褰㈠湪榛樿鐘舵�佷笅鐨勬牱寮�
+ label: {
+ show: true, //鏄惁鏄剧ず鏍囩
+ textStyle: {
+ color: 'rgb(249, 249, 249)'
+ },
+ // shadowColor:'rgba(17,84,148,0.8)',
+ },
+
+ borderWidth: 3,
+ borderColor: 'rgba(37,124,169)',
+ areaColor: 'rgba(20,78,139,1)',
+ // shadowColor: 'rgba(20,78,139,1)',
+ // shadowOffsetY: 15,
+ // shadowOffsetX: 15,
+ // // shadowBlur: 100,
+ },
+ emphasis: { //鏄浘褰㈠湪楂樹寒鐘舵�佷笅鐨勬牱寮�,姣斿鍦ㄩ紶鏍囨偓娴垨鑰呭浘渚嬭仈鍔ㄩ珮浜椂
+ label: {
+ show: true
+ },
+ borderColor: '#3baced',
+ areaColor: '#0b558e',
+ }
+ },
+
+ data: seriesData
+ },
+ /*{
+ name: '', // hover鏍囬
+ type: 'custom',
+ coordinateSystem: 'geo',
+ renderItem(params, api) {
+ console.log('params=======',params)
+ console.log('api=======',api)
+ console.log('that.avater=======',that.avater)
+ // 鍏蜂綋瀹炵幇鑷畾涔夊浘鏍囩殑鏂规硶
+ return {
+ type: 'image',
+ style: {
+ image: that.avater,
+ x: api.coord([
+ seriesData.value,
+ ])[0],
+ y: api.coord([
+ seriesData.value,
+ ])[1],
+ width: '1000',
+ height: '200'
+ }
+ }
+ },
+ data: convertData(seriesData),
+ },*/
+ {
+ name: '鐗╄祫',
+ type: 'scatter',
+ coordinateSystem: 'geo',
+ data: seriesData,
+ symbol: iconWZ,
+ symbolSize: 60,
+ label: {
+ normal: {
+ show: true,
+ formatter: function(params) {
+ console.log(params)
+ return params.name
+ },
+ position: 'bottom',
+ color: '#fff',
+ fontSize: '11'
+ },
+ emphasis: {
+ show: false,
+ color: '#00d5e9',
+ }
+ },
+ },
+ {
+ name: '',
+ type: 'effectScatter',
+ coordinateSystem: 'geo',
+ color: 'rgba(209,250,12,0.5)',
+ // symbolSize:50, //function (val) {
+ // var a = (maxSize4Pin - minSize4Pin) / (max - min);
+ // var b = minSize4Pin - a*min;
+ // b = maxSize4Pin - a*max;
+ // return a*val[2]+b;
+ // },
+ symbolSize: function(value) {
+ return value[2] / 1;
+ },
+ tooltip: {
+ show: false
+ },
+ label: {
+ normal: {
+ show: false,
+ textStyle: {
+ color: '#fff',
+ fontSize: 9,
+ }
+ }
+ },
+
+ itemStyle: {
+ normal: {
+ color: 'rgba(209,250,12,0.5)', //鏍囧織棰滆壊
+ }
+ },
+ zlevel: 1,
+ data: convertData(seriesData),
+ },
+
+ ]
+ };
+ myChart.setOption(option);
+ });
+ },
+
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ h1,h2,h3,h4,h5,h6{
+ font-weight: normal;
+ }
+ .show-index{
+ width: 7680px;
+ height: 2160px;
+ background:url("../../../assets/images/daping-bj.jpg") no-repeat center;
+ background-size: 100% 100%;
+ }
+ .show-index-title{
+ width: 7680px;
+ height: 264px;
+ background:url("../../../assets/images/daping-title.png") no-repeat center;
+ background-size: 100% 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ h1{
+ font-size: 60px;
+ color: #fff;
+ font-family: '鑻规柟 甯歌';
+ font-weight: normal;
+ margin-bottom: 22px;
+ }
+ }
+ .show-index-main{
+ width: 7680px;
+ height: calc(2160 - 264px);
+ padding:30px;
+ box-sizing: border-box;
+ display: flex;
+ }
+ .show-index-main-left-line{
+ display: flex;
+ margin-top: 40px;
+ }
+ .show-index-main-left-block{
+ width: 1043px;
+ height: 485px;
+ background:url("../../../assets/images/daping-kuang1.png") no-repeat center;
+ background-size: 100% 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding:20px;
+ box-sizing: border-box;
+ margin:0 30px;
+ }
+ .show-block-title,.show-block-title2{
+ width: 802px;
+ height: 43px;
+ background:url("../../../assets/images/block-title.png") no-repeat center;
+ background-size: 100% 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ h1{
+ font-size: 28px;
+ color: #1af1e9;
+ }
+ }
+ .show-block-title2{
+ background:url("../../../assets/images/block-title2.png") no-repeat center;
+ }
+ .main-inside-line1{
+ display: flex;
+ align-items: baseline;
+ h1{
+ color:#34fff8;
+ font-size: 40px;
+ }
+ h2{
+ color:#f3ffff;
+ font-size: 20px;
+ }
+ }
+ .main-inside-line2{
+ display: flex;
+ img{
+ width: 32px;
+ height: 32px;
+ }
+ h1{
+ font-size: 22px;
+ color:#f3ffff;
+ margin-left:20px;
+ }
+ }
+ .show-block-main,.show-block-main3,.show-block-main4{
+ width: 100%;
+ height: calc(100% - 50px);
+ padding:40px;
+ box-sizing: border-box;
+ display: flex;
+ flex-wrap: wrap;
+ .main-inside-block{
+ width: calc(33.3% - 40px);
+ margin:20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ }
+ .show-block-main4{
+ padding:0;
+ }
+ .tclyvEcharts{
+ width: 320px;
+ height: 100%;
+ }
+ .tcpmEcharts{
+ width: calc(100% - 320px);
+ height: 100%;
+ }
+ .main-inside-line3{
+ width: 100%;
+ display: flex;
+ justify-content: space-around;
+ }
+ .dingdan-block{
+ width: 330px;
+ height: 116px;
+ position: relative;
+ .dingdan-num-title{
+ position: absolute;
+ right: 20px;
+ h1{
+ font-size: 23px;
+ color:#fff;
+ }
+ }
+ .dingdan-num{
+ position: absolute;
+ right: 40px;
+ top:35px;
+ display: flex;
+ align-items: baseline;
+ h1{
+ font-size: 50px;
+ color:#fff;
+ }
+ h2{
+ font-size: 18px;
+ color:#fff;
+ }
+ }
+ }
+ .show-month1{
+ background:url("../../../assets/images/show-month-icon1.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ .show-month2{
+ background:url("../../../assets/images/show-month-icon2.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ .show-month3{
+ background:url("../../../assets/images/show-month-icon3.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ .show-month4{
+ background:url("../../../assets/images/show-month-icon4.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ .show-month5{
+ background:url("../../../assets/images/show-month-icon5.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ .dingdan-num-block{
+ background:url("../../../assets/images/daping-kuang2.png") no-repeat center;
+ background-size: 100% 100%;
+ height: 678px;
+ }
+ .dingdan-num-box{
+ flex-direction: column;
+ }
+ .dingdan-num-block2{
+ background:url("../../../assets/images/daping-kuang5.png") no-repeat center;
+ background-size: 100% 100%;
+ height: 678px;
+ flex-direction: column;
+ }
+ .dingdan-tongji-block{
+ background:url("../../../assets/images/daping-kuang3.png") no-repeat center;
+ background-size: 100% 100%;
+ height: 678px;
+ }
+ .dingdanNumEcharts,.chuchangEcharts{
+ width: 100%;
+ height: calc(100% - 120px);
+ }
+ .fadan-tongji-box{
+ width: 2150px;
+ background:url("../../../assets/images/daping-kuang4.png") no-repeat center;
+ background-size: 100% 100%;
+ height: 484px;
+ }
+ .show-index-main-middle{
+ width: 3026px;
+ height: 1694px;
+ background:url("../../../assets/images/daping-middle-kuang.png") no-repeat center;
+ background-size: 100% 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+ .show-index-main-middle{
+ position: relative;
+
+ }
+ .show-main-middle-inside{
+ width: 2300px;
+ height: 1310px;
+ border-radius: 50% / 50%;
+ border:20px solid rgba(0,123,255,0.3);
+ position: relative;
+ }
+ .menu-box{
+ width: 403px;
+ height: 208px;
+ .menu-box-inside{
+ position: relative;
+ }
+ .menu-box-rel{
+ display: flex;
+ align-items: baseline;
+ position: absolute;
+ top:-20px;
+ left:140px;
+ h1{
+ color: #fff;
+ font-size: 48px;
+ }
+ h2{
+ color: #fff;
+ font-size: 20px;
+ }
+ }
+ }
+ .menu-box-position1{
+ position: absolute;
+ left: 420px;
+ top: 26px;
+ background:url("../../../assets/images/midlle-icon1.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ .menu-box-position2{
+ position: absolute;
+ left: 75px;
+ top: 400px;
+ background:url("../../../assets/images/midlle-icon2.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ .menu-box-position3{
+ position: absolute;
+ left: 88px;
+ bottom: 473px;
+ background:url("../../../assets/images/midlle-icon3.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ .menu-box-position4{
+ position: absolute;
+ right: 420px;
+ top: 26px;
+ background:url("../../../assets/images/midlle-icon4.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ .menu-box-position5{
+ position: absolute;
+ right: 75px;
+ top: 400px;
+ background:url("../../../assets/images/midlle-icon5.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ .menu-box-position6{
+ position: absolute;
+ right: 88px;
+ bottom: 473px;
+ background:url("../../../assets/images/midlle-icon6.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ .menu-box-position7{
+ position: absolute;
+ width: 410px;
+ height: 154px;
+ background:url("../../../assets/images/midlle-icon7.png") no-repeat center;
+ background-size: 100% 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ .money-line{
+ display: flex;
+ align-items: baseline;
+ justify-content: center;
+ h1{
+ font-size: 48px;
+ color: #fff;
+ }
+ h2{
+ font-size: 22px;
+ color: #fff;
+ }
+
+ }
+ h3{
+ font-family: '寰蒋闆呴粦';
+ color: #fff;
+ font-size: 22px;
+ text-align: center;
+ }
+ }
+ .dingdanMoney1{
+ left: 384px;
+ bottom: 110px;
+ }
+ .dingdanMoney2{
+ right: 384px;
+ bottom: 110px;
+ }
+ .show-main-middle-title{
+ width: 878px;
+ height: 90px;
+ background:url("../../../assets/images/midlle-title-bj.png") no-repeat center;
+ background-size: 100% 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 40px;
+ h1{
+ color:#20fbf4;
+ font-size: 40px;
+ }
+ }
+ .main-inside-line4{
+ display: flex;
+ justify-content: center;
+ img{
+ width: 88px;
+ height: 88px;
+ }
+ .black-box{
+ display: flex;
+ flex-direction: column;
+ margin-left: 20px;
+ .black-num-box{
+ display: flex;
+ align-items: baseline;
+ h1{
+ color: #00feff;
+ font-size: 46px;
+ }
+ h2{
+ color: #fff;
+ font-size: 20px;
+ }
+ }
+ h3{
+ color: #fff;
+ font-size: 20px;
+ }
+ }
+ }
+ .black-important-card{
+
+ }
+ .black-important-title{
+ background:rgba(28,255,252,0.1);
+ height: 40px;
+ width: 100%;
+ display: flex;
+ }
+ .black-important-card{
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ }
+ .xuhao{
+ width: 88px;
+ text-align: center;
+ h1{
+ color: #fff;
+ font-size: 18px;
+ line-height: 40px;
+ }
+ }
+ .xuhao2{
+ width: 88px;
+ text-align: center;
+ h1{
+ color: #1af1e9;
+ font-size: 18px;
+ line-height: 40px;
+ }
+ }
+ .black-name2{
+ flex: 1;
+ text-align: center;
+ h1{
+ color: #1af1e9;
+ font-size: 18px;
+ line-height: 40px;
+ }
+ }
+ .black-name{
+ flex: 1;
+ text-align: center;
+ h1{
+ color: #fff;
+ font-size: 18px;
+ line-height: 40px;
+ }
+ }
+ .show-block-main2{
+ width: 100%;
+ padding:40px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ }
+ .black-important-card-inside{
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+ .black-important-card-line{
+ display: flex;
+ width: 100%;
+ padding:4px 0;
+ }
+ .fadantongjiEcharts{
+ width: 100%;
+ height: 100%;
+ }
+ .from-box-line{
+ width: 40%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ margin-top: 20px;
+ }
+ .from-box-line2{
+ width: 60%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ margin-top: 20px;
+ }
+ .dayXjPieEcharts{
+ width: 100%;
+ height: 50%;
+
+ }
+ .dayXjZhuEcharts{
+ width: 100%;
+ height: 100%;
+ }
+ .table-conten{
+ height: 570px;
+ overflow: hidden;
+ }
+</style>
--
Gitblit v1.9.1