|
|
@@ -3,8 +3,6 @@
|
|
|
<div id="index" ref="appRef">
|
|
|
<!-- <dv-loading v-show="loading">Loading...</dv-loading> -->
|
|
|
<div class='bg'>
|
|
|
-
|
|
|
-
|
|
|
<div class="host-body">
|
|
|
<div>
|
|
|
<!-- 顶部title部分 -->
|
|
|
@@ -15,9 +13,10 @@
|
|
|
:color="['#008CFF', '#00ADDD']"
|
|
|
/></el-col>
|
|
|
<el-col :span="12"
|
|
|
- ><div class="title_text">数 据 可 视 化 系 统</div>
|
|
|
+ ><div class="title_text">易 粮 易 运 大 数 据 平 台</div>
|
|
|
<dv-decoration-5
|
|
|
class="title_center"
|
|
|
+ dur="5"
|
|
|
:color="['#008CFF', '#00ADDD']"
|
|
|
/></el-col>
|
|
|
<el-col :span="6"
|
|
|
@@ -32,12 +31,19 @@
|
|
|
<el-row>
|
|
|
<!-- 第一列 -->
|
|
|
<el-col :span="6">
|
|
|
- <!-- 饼图部分 -->
|
|
|
<div class="left_box1">
|
|
|
- <dv-border-box-12>
|
|
|
+ <dv-border-box-11 title="采 购 合 同">
|
|
|
+ <dv-scroll-ranking-board
|
|
|
+ :config="configLeft1"
|
|
|
+ style="width: 90%; height: 87%; margin-left: 5%; padding-top:10%"
|
|
|
+ />
|
|
|
+ </dv-border-box-11>
|
|
|
+ </div>
|
|
|
+ <div class="left_box2">
|
|
|
+ <dv-border-box-11 title="头 寸">
|
|
|
<div id="Rose_diagram"></div>
|
|
|
<dv-active-ring-chart
|
|
|
- :config="config"
|
|
|
+ :config="configLeft2"
|
|
|
class="left_box1_rose_right"
|
|
|
/>
|
|
|
<div
|
|
|
@@ -46,73 +52,52 @@
|
|
|
:key="index"
|
|
|
>
|
|
|
<p>
|
|
|
- <span class="coin">￥</span>
|
|
|
<span class="rose_text_nmb">{{
|
|
|
item.number.number
|
|
|
}}</span>
|
|
|
</p>
|
|
|
<p>
|
|
|
<span>{{ item.text }}</span>
|
|
|
- <span class="colorYellow">(件)</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
- </dv-border-box-12>
|
|
|
- </div>
|
|
|
- <!-- 柱状图部分 -->
|
|
|
- <div class="left_box2">
|
|
|
- <dv-border-box-12 style="padding-top: 10px">
|
|
|
- <p style="margin-left: 15px">数据统计图</p>
|
|
|
- <div id="columnar"></div>
|
|
|
- </dv-border-box-12>
|
|
|
- </div>
|
|
|
- <!-- 轮播表格部分 -->
|
|
|
- <div class="left_box3">
|
|
|
- <dv-border-box-12 style="padding-top: 10px">
|
|
|
- <dv-scroll-board
|
|
|
- :config="board_info"
|
|
|
- class="carousel_list"
|
|
|
- oddRowBGC="#fff"
|
|
|
- />
|
|
|
- </dv-border-box-12>
|
|
|
+ </dv-border-box-11>
|
|
|
</div>
|
|
|
+ <!-- <div class="left_box3">
|
|
|
+ <dv-border-box-11 style="padding-top: 10px" title="物 流 监 控">
|
|
|
+ </dv-border-box-11>
|
|
|
+ </div> -->
|
|
|
</el-col>
|
|
|
<!-- 第二列 -->
|
|
|
<el-col :span="12">
|
|
|
<!-- 中国地图 -->
|
|
|
<div id="china-map"></div>
|
|
|
- <!-- 折线图 -->
|
|
|
<div class="line_center">
|
|
|
- <dv-border-box-8>
|
|
|
- <div id="line_center_diagram"></div>
|
|
|
- </dv-border-box-8>
|
|
|
+ <dv-scroll-board
|
|
|
+ :config="board_info"
|
|
|
+ class="carousel_list"
|
|
|
+ oddRowBGC="#fff"
|
|
|
+ />
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<!-- 第三列 -->
|
|
|
<el-col :span="6">
|
|
|
- <!-- 轮播排行榜部分 -->
|
|
|
<div class="right_box1">
|
|
|
- <dv-border-box-12>
|
|
|
- <dv-decoration-7 style="width: 100%; height: 30px"
|
|
|
- >销 售 排 行 榜</dv-decoration-7
|
|
|
- >
|
|
|
+ <dv-border-box-11 title="销 售 合 同">
|
|
|
<dv-scroll-ranking-board
|
|
|
:config="config"
|
|
|
- style="width: 95%; height: 87%; margin-left: 2%"
|
|
|
+ style="width: 90%; height: 87%; margin-left: 5%; padding-top:10%"
|
|
|
/>
|
|
|
- </dv-border-box-12>
|
|
|
+ </dv-border-box-11>
|
|
|
</div>
|
|
|
- <!-- 虚线柱状图部分 -->
|
|
|
<div class="right_box2">
|
|
|
- <dv-border-box-12 :reverse="true">
|
|
|
- <div id="dotter_bar"></div>
|
|
|
- </dv-border-box-12>
|
|
|
+ <dv-border-box-11 style="padding-top: 10px" title="物 流 监 控">
|
|
|
+ </dv-border-box-11>
|
|
|
</div>
|
|
|
<!-- 部分 -->
|
|
|
- <div class="right_box3">
|
|
|
- <dv-border-box-12 :reverse="true">
|
|
|
- <dv-conical-column-chart :config="cone" class="cone_box" />
|
|
|
- </dv-border-box-12>
|
|
|
- </div>
|
|
|
+ <!-- <div class="right_box3">
|
|
|
+ <dv-border-box-11 style="padding-top: 10px" title="物 流 监 控">
|
|
|
+ </dv-border-box-11>
|
|
|
+ </div> -->
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
@@ -125,7 +110,6 @@
|
|
|
|
|
|
import drawMixin from './drawMixin'; //自适应缩放
|
|
|
import { formatTime } from './format.js'; //日期格式转换
|
|
|
-import * as echarts from 'echarts';
|
|
|
export default {
|
|
|
mixins: [drawMixin],
|
|
|
components: {
|
|
|
@@ -149,33 +133,73 @@ import * as echarts from 'echarts';
|
|
|
config: {
|
|
|
data: [
|
|
|
{
|
|
|
- name: '周口',
|
|
|
+ name: '玉米',
|
|
|
value: 55,
|
|
|
},
|
|
|
{
|
|
|
- name: '南阳',
|
|
|
+ name: '白小麦',
|
|
|
value: 120,
|
|
|
},
|
|
|
{
|
|
|
- name: '西峡',
|
|
|
+ name: '混合麦',
|
|
|
value: 78,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ configLeft1: {
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: '玉米',
|
|
|
+ value: 55,
|
|
|
},
|
|
|
{
|
|
|
- name: '驻马店',
|
|
|
- value: 66,
|
|
|
+ name: '白小麦',
|
|
|
+ value: 120,
|
|
|
},
|
|
|
{
|
|
|
- name: '新乡',
|
|
|
- value: 80,
|
|
|
+ name: '混合麦',
|
|
|
+ value: 78,
|
|
|
},
|
|
|
{
|
|
|
- name: '信阳',
|
|
|
- value: 45,
|
|
|
+ name: '玉米',
|
|
|
+ value: 55,
|
|
|
},
|
|
|
{
|
|
|
- name: '漯河',
|
|
|
- value: 29,
|
|
|
+ name: '白小麦',
|
|
|
+ value: 120,
|
|
|
},
|
|
|
+ {
|
|
|
+ name: '混合麦',
|
|
|
+ value: 78,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '玉米',
|
|
|
+ value: 55,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '白小麦',
|
|
|
+ value: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '混合麦',
|
|
|
+ value: 78,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ configLeft2: {
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: '库存',
|
|
|
+ value: 55,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '采购',
|
|
|
+ value: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '销售',
|
|
|
+ value: 78,
|
|
|
+ }
|
|
|
],
|
|
|
},
|
|
|
//左侧饼图文字
|
|
|
@@ -184,144 +208,39 @@ import * as echarts from 'echarts';
|
|
|
number: {
|
|
|
number: 15,
|
|
|
},
|
|
|
- text: '今日构建总量',
|
|
|
+ text: '实际库存',
|
|
|
},
|
|
|
{
|
|
|
number: {
|
|
|
number: 1144,
|
|
|
},
|
|
|
- text: '总共完成数量',
|
|
|
+ text: '采购合同',
|
|
|
},
|
|
|
{
|
|
|
number: {
|
|
|
number: 361,
|
|
|
},
|
|
|
- text: '正在编译数量',
|
|
|
+ text: '销售合同',
|
|
|
},
|
|
|
],
|
|
|
//左侧轮播表格配置项
|
|
|
board_info: {
|
|
|
- header: ['人员', '月产量', '月合格率'],
|
|
|
+ header: ['车牌号', '始发地', '目的地','装车时间','净重（吨）'],
|
|
|
data: [
|
|
|
- ['张三', '10830', '90%'],
|
|
|
- ['张四', '13500', '92%'],
|
|
|
- ['张五', '10350', '97%'],
|
|
|
- ['张六', '13300', '94%'],
|
|
|
- ['张七', '12500', '95%'],
|
|
|
- ['张八', '11500', '96%'],
|
|
|
- ['张九', '12500', '89%'],
|
|
|
- ['王六', '10360', '95%'],
|
|
|
- ['王二', '10567', '91%'],
|
|
|
- ['李四', '15721', '99%'],
|
|
|
+ ['辽HVX951', '鲅鱼圈祥腾库', '山东诸城迈饶库','2022-09-07 15:23','54.5'],
|
|
|
+ ['辽HVX952', '山东诸城迈饶库', '白城内陆港','2022-09-07 15:23','54.5'],
|
|
|
+ ['辽HVX953', '白城内陆港', '甘南宏旗库','2022-09-07 15:23','54.5'],
|
|
|
+ ['辽HVX954', '甘南宏旗库', '克东千丰库','2022-09-07 15:23','54.5'],
|
|
|
+ ['辽HVX955', '克东千丰库', '克东千丰库','2022-09-07 15:23','54.5'],
|
|
|
+ ['辽HVX956', '肇东金信库', '肇东金信库','2022-09-07 15:23','54.5'],
|
|
|
+ ['辽HVX957', '山东园丰库', '鲅鱼圈金信库','2022-09-07 15:23','54.5'],
|
|
|
+ ['辽HVX958', '鲅鱼圈金信库', '龙江金信库','2022-09-07 15:23','54.5'],
|
|
|
+ ['辽HVX959', '龙江金信库', '鲅鱼圈祥腾库','2022-09-07 15:23','54.5'],
|
|
|
],
|
|
|
- evenRowBGC: '#020308',
|
|
|
- oddRowBGC: '#382B47',
|
|
|
- headerBGC: '#020308',
|
|
|
- },
|
|
|
- // 定义颜色
|
|
|
- colorList: {
|
|
|
- linearYtoG: {
|
|
|
- type: 'linear',
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 1,
|
|
|
- y2: 1,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: '#f5b44d',
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: '#28f8de',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- linearGtoB: {
|
|
|
- type: 'linear',
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 1,
|
|
|
- y2: 0,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: '#43dfa2',
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: '#28f8de',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- linearBtoG: {
|
|
|
- type: 'linear',
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 1,
|
|
|
- y2: 0,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: '#1c98e8',
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: '#28f8de',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- areaBtoG: {
|
|
|
- type: 'linear',
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(35,184,210,.2)',
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(35,184,210,0)',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- },
|
|
|
- //锥形柱状图
|
|
|
- cone: {
|
|
|
- data: [
|
|
|
- {
|
|
|
- name: '周口',
|
|
|
- value: 55,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '南阳',
|
|
|
- value: 120,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '西峡',
|
|
|
- value: 71,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '驻马店',
|
|
|
- value: 66,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '新乡',
|
|
|
- value: 80,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '信阳',
|
|
|
- value: 35,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '漯河',
|
|
|
- value: 15,
|
|
|
- },
|
|
|
- ],
|
|
|
- showValue: true,
|
|
|
+ index:true,
|
|
|
+ evenRowBGC: 'rgb(19 28 70)',
|
|
|
+ oddRowBGC: 'rgb(13 22 62)',
|
|
|
+ headerBGC: 'rgb(22 36 104)',
|
|
|
},
|
|
|
}
|
|
|
},
|
|
|
@@ -329,18 +248,8 @@ import * as echarts from 'echarts';
|
|
|
mounted() {
|
|
|
//获取实时时间
|
|
|
this.timeFn();
|
|
|
- //加载loading图
|
|
|
- this.cancelLoading();
|
|
|
//中国地图
|
|
|
this.china_map();
|
|
|
- //左侧玫瑰饼图
|
|
|
- this.Rose_diagram();
|
|
|
- //左侧柱状图
|
|
|
- this.columnar();
|
|
|
- //中间折线图
|
|
|
- this.line_center_diagram();
|
|
|
- //虚线柱状图
|
|
|
- this.dotter_bar();
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
//离开时删除计时器
|
|
|
@@ -724,389 +633,6 @@ import * as echarts from 'echarts';
|
|
|
};
|
|
|
mapChart.setOption(option); //生成图表
|
|
|
},
|
|
|
- //玫瑰饼图
|
|
|
- Rose_diagram() {
|
|
|
- let mapChart = this.$echarts.init(
|
|
|
- document.getElementById('Rose_diagram')
|
|
|
- ); //图表初始化，china-map是绑定的元素
|
|
|
- window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
|
|
|
- let option = {
|
|
|
- color: [
|
|
|
- '#37a2da',
|
|
|
- '#32c5e9',
|
|
|
- '#9fe6b8',
|
|
|
- '#ffdb5c',
|
|
|
- '#ff9f7f',
|
|
|
- '#fb7293',
|
|
|
- '#e7bcf3',
|
|
|
- '#8378ea',
|
|
|
- ],
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- formatter: '{a} <br/>{b} : {c} ({d}%)',
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- show: true,
|
|
|
- },
|
|
|
- calculable: true,
|
|
|
- legend: {
|
|
|
- orient: 'horizontal',
|
|
|
- icon: 'circle',
|
|
|
- bottom: 0,
|
|
|
- x: 'center',
|
|
|
- data: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6'],
|
|
|
- textStyle: {
|
|
|
- color: '#fff',
|
|
|
- },
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '通过率统计',
|
|
|
- type: 'pie',
|
|
|
- radius: [10, 50],
|
|
|
- roseType: 'area',
|
|
|
- center: ['50%', '40%'],
|
|
|
- data: [
|
|
|
- { value: 10, name: 'data1' },
|
|
|
- { value: 5, name: 'data2' },
|
|
|
- { value: 15, name: 'data3' },
|
|
|
- { value: 25, name: 'data4' },
|
|
|
- { value: 20, name: 'data5' },
|
|
|
- { value: 35, name: 'data6' },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- mapChart.setOption(option); //生成图表
|
|
|
- },
|
|
|
- //柱状图
|
|
|
- columnar() {
|
|
|
- let mapChart = this.$echarts.init(document.getElementById('columnar')); //图表初始化，china-map是绑定的元素
|
|
|
- window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
|
|
|
- let option = {
|
|
|
- title: {
|
|
|
- text: '',
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- backgroundColor: 'rgba(255,255,255,0.1)',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow',
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- backgroundColor: '#7B7DDC',
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: ['已贯通', '计划贯通', '贯通率'],
|
|
|
- textStyle: {
|
|
|
- color: '#B4B4B4',
|
|
|
- },
|
|
|
- top: '0%',
|
|
|
- },
|
|
|
- grid: {
|
|
|
- x: '8%',
|
|
|
- width: '95%',
|
|
|
- y: '4%',
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- data: [
|
|
|
- '市区',
|
|
|
- '万州',
|
|
|
- '江北',
|
|
|
- '南岸',
|
|
|
- '北碚',
|
|
|
- '綦南',
|
|
|
- '长寿',
|
|
|
- '永川',
|
|
|
- '璧山',
|
|
|
- '江津',
|
|
|
- '城口',
|
|
|
- '大足',
|
|
|
- '垫江',
|
|
|
- '丰都',
|
|
|
- '奉节',
|
|
|
- '合川',
|
|
|
- '江津区',
|
|
|
- '开州',
|
|
|
- '南川',
|
|
|
- '彭水',
|
|
|
- '黔江',
|
|
|
- '石柱',
|
|
|
- '铜梁',
|
|
|
- '潼南',
|
|
|
- '巫山',
|
|
|
- '巫溪',
|
|
|
- '武隆',
|
|
|
- '秀山',
|
|
|
- '酉阳',
|
|
|
- '云阳',
|
|
|
- '忠县',
|
|
|
- '川东',
|
|
|
- '检修',
|
|
|
- ],
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#B4B4B4',
|
|
|
- },
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- },
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- splitLine: { show: false },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#B4B4B4',
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- axisLabel: {
|
|
|
- formatter: '{value} ',
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '已贯通',
|
|
|
- type: 'bar',
|
|
|
- barWidth: 10,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- barBorderRadius: 5,
|
|
|
- color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#956FD4' },
|
|
|
- { offset: 1, color: '#3EACE5' },
|
|
|
- ]),
|
|
|
- },
|
|
|
- },
|
|
|
- data: [
|
|
|
- 46, 50, 55, 650, 75, 85, 99, 125, 140, 215, 232, 244, 252, 333,
|
|
|
- 46, 50, 55, 65, 75, 85, 99, 225, 140, 215, 85, 99, 125, 140, 215,
|
|
|
- 232, 244, 252, 75,
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- name: '计划贯通',
|
|
|
- type: 'bar',
|
|
|
- barGap: '-100%',
|
|
|
- barWidth: 10,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- barBorderRadius: 5,
|
|
|
- color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: 'rgba(156,107,211,0.8)' },
|
|
|
- { offset: 0.2, color: 'rgba(156,107,211,0.5)' },
|
|
|
- { offset: 1, color: 'rgba(156,107,211,0.2)' },
|
|
|
- ]),
|
|
|
- },
|
|
|
- },
|
|
|
- z: -12,
|
|
|
- data: [
|
|
|
- 180, 207, 240, 283, 328, 360, 398, 447, 484, 504, 560, 626, 595,
|
|
|
- 675, 180, 207, 240, 283, 328, 360, 398, 447, 484, 504, 360, 398,
|
|
|
- 447, 484, 504, 500, 326, 495, 328,
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- mapChart.setOption(option); //生成图表
|
|
|
- },
|
|
|
- //折线图
|
|
|
- line_center_diagram() {
|
|
|
- let mapChart = this.$echarts.init(
|
|
|
- document.getElementById('line_center_diagram')
|
|
|
- ); //图表初始化，china-map是绑定的元素
|
|
|
- window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
|
|
|
- let option = {
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
- position: 'bottom',
|
|
|
- axisLine: true,
|
|
|
- axisLabel: {
|
|
|
- color: 'rgba(255,255,255,.8)',
|
|
|
- fontSize: 12,
|
|
|
- },
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- name: '年度生产量',
|
|
|
- nameLocation: 'end',
|
|
|
- nameGap: 24,
|
|
|
- nameTextStyle: {
|
|
|
- color: 'rgba(255,255,255,.5)',
|
|
|
- fontSize: 14,
|
|
|
- },
|
|
|
- splitNumber: 4,
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- opacity: 0,
|
|
|
- },
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: '#fff',
|
|
|
- opacity: 0.1,
|
|
|
- },
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: 'rgba(255,255,255,.8)',
|
|
|
- fontSize: 12,
|
|
|
- },
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: 50,
|
|
|
- right: 10,
|
|
|
- bottom: 25,
|
|
|
- top: '18%',
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'emptyCircle',
|
|
|
- symbolSize: 8,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: '#fff',
|
|
|
- },
|
|
|
- },
|
|
|
- //线的颜色样式
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- color: this.colorList.linearBtoG,
|
|
|
- width: 3,
|
|
|
- },
|
|
|
- },
|
|
|
- //填充颜色样式
|
|
|
- areaStyle: {
|
|
|
- normal: {
|
|
|
- color: this.colorList.areaBtoG,
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- mapChart.setOption(option); //生成图表
|
|
|
- },
|
|
|
- //右侧虚线柱状图图
|
|
|
- dotter_bar() {
|
|
|
- let mapChart = this.$echarts.init(document.getElementById('dotter_bar')); //图表初始化，china-map是绑定的元素
|
|
|
- window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
|
|
|
- // Generate data
|
|
|
- let category = [];
|
|
|
- let dottedBase = +new Date();
|
|
|
- let lineData = [];
|
|
|
- let barData = [];
|
|
|
- for (let i = 0; i < 20; i++) {
|
|
|
- let date = new Date((dottedBase += 3600 * 24 * 1000));
|
|
|
- category.push(
|
|
|
- [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
|
|
|
- );
|
|
|
- let b = Math.random() * 200;
|
|
|
- let d = Math.random() * 200;
|
|
|
- barData.push(b);
|
|
|
- lineData.push(d + b);
|
|
|
- }
|
|
|
- // option
|
|
|
- let option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow',
|
|
|
- },
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: 50,
|
|
|
- right: 10,
|
|
|
- bottom: 25,
|
|
|
- top: '18%',
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: ['line', 'bar'],
|
|
|
- textStyle: {
|
|
|
- color: '#ccc',
|
|
|
- },
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- data: category,
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#ccc',
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- splitLine: { show: false },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#ccc',
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: 'line',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- showAllSymbol: true,
|
|
|
- symbol: 'emptyCircle',
|
|
|
- symbolSize: 15,
|
|
|
- data: lineData,
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'bar',
|
|
|
- type: 'bar',
|
|
|
- barWidth: 10,
|
|
|
- itemStyle: {
|
|
|
- borderRadius: 5,
|
|
|
- // color: "#14c8d4",
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#14c8d4' },
|
|
|
- { offset: 1, color: '#43eec6' },
|
|
|
- ]),
|
|
|
- },
|
|
|
- data: barData,
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'line',
|
|
|
- type: 'bar',
|
|
|
- barGap: '-100%',
|
|
|
- barWidth: 10,
|
|
|
- itemStyle: {
|
|
|
- // color: "rgba(20,200,212,0.5)",
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: 'rgba(20,200,212,0.5)' },
|
|
|
- { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
|
|
|
- { offset: 1, color: 'rgba(20,200,212,0)' },
|
|
|
- ]),
|
|
|
- },
|
|
|
- z: -12,
|
|
|
- data: lineData,
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'dotted',
|
|
|
- type: 'pictorialBar',
|
|
|
- symbol: 'rect',
|
|
|
- itemStyle: {
|
|
|
- color: '#0f375f',
|
|
|
- },
|
|
|
- symbolRepeat: true,
|
|
|
- symbolSize: [12, 4],
|
|
|
- symbolMargin: 1,
|
|
|
- z: -10,
|
|
|
- data: lineData,
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- mapChart.setOption(option); //生成图表
|
|
|
- },
|
|
|
},
|
|
|
|
|
|
}
|
|
|
@@ -1165,18 +691,19 @@ a {
|
|
|
//顶部右边装饰效果
|
|
|
.title_left {
|
|
|
width: 100%;
|
|
|
- height: 12px;
|
|
|
+ height: 82px;
|
|
|
+ margin-top: 28px;
|
|
|
}
|
|
|
//顶部左边装饰效果
|
|
|
.title_right {
|
|
|
width: 100%;
|
|
|
- height: 12px;
|
|
|
- margin-top: 12px;
|
|
|
+ height: 82px;
|
|
|
+ margin-top: 47px;
|
|
|
}
|
|
|
//顶部中间装饰效果
|
|
|
.title_center {
|
|
|
width: 100%;
|
|
|
- height: 12px;
|
|
|
+ height: 22px;
|
|
|
}
|
|
|
//顶部中间文字数据可视化系统
|
|
|
.title_text {
|
|
|
@@ -1192,8 +719,9 @@ a {
|
|
|
}
|
|
|
//中国地图
|
|
|
#china-map {
|
|
|
- height: 642px;
|
|
|
+ height: 582px;
|
|
|
width: 100%;
|
|
|
+ top: -60px;
|
|
|
}
|
|
|
//中间折线图
|
|
|
.line_center {
|
|
|
@@ -1205,6 +733,7 @@ a {
|
|
|
height: 302px;
|
|
|
width: 100%;
|
|
|
margin-bottom: 10px;
|
|
|
+ margin-top: 80px;
|
|
|
position: relative;
|
|
|
}
|
|
|
//左2模块
|
|
|
@@ -1212,47 +741,63 @@ a {
|
|
|
height: 302px;
|
|
|
width: 100%;
|
|
|
margin-bottom: 10px;
|
|
|
+ margin-top: 80px;
|
|
|
}
|
|
|
//左3模块
|
|
|
.left_box3 {
|
|
|
height: 302px;
|
|
|
width: 100%;
|
|
|
}
|
|
|
+ .left_box3_dv{
|
|
|
+ width: 50%;
|
|
|
+ height: 50%;
|
|
|
+ margin-left: 10%;
|
|
|
+ margin-top: 10%;
|
|
|
+ }
|
|
|
//右1模块
|
|
|
.right_box1 {
|
|
|
height: 302px;
|
|
|
width: 100%;
|
|
|
margin-bottom: 10px;
|
|
|
+ margin-top: 80px;
|
|
|
}
|
|
|
//右2模块
|
|
|
.right_box2 {
|
|
|
height: 302px;
|
|
|
width: 100%;
|
|
|
margin-bottom: 10px;
|
|
|
+ margin-top: 80px;
|
|
|
}
|
|
|
//右3模块
|
|
|
.right_box3 {
|
|
|
height: 302px;
|
|
|
width: 100%;
|
|
|
}
|
|
|
+ .right_box3_dv{
|
|
|
+ width: 80%;
|
|
|
+ height: 80%;
|
|
|
+ margin-left: 10%;
|
|
|
+ margin-top: 10%;
|
|
|
+ }
|
|
|
//左1模块-玫瑰饼图
|
|
|
#Rose_diagram {
|
|
|
height: 70%;
|
|
|
- width: 55%;
|
|
|
+ width: 15%;
|
|
|
+ padding-top: 40px;
|
|
|
}
|
|
|
//左1模块-圆环图
|
|
|
.left_box1_rose_right {
|
|
|
- height: 85%;
|
|
|
+ height: 90%;
|
|
|
width: 55%;
|
|
|
position: absolute;
|
|
|
- right: 0;
|
|
|
+ right: 25%;
|
|
|
top: 0;
|
|
|
}
|
|
|
//左1模块-文字部分
|
|
|
.rose_text {
|
|
|
display: inline-block;
|
|
|
- margin-top: 4%;
|
|
|
- margin-left: 4%;
|
|
|
+ margin-top: 1%;
|
|
|
+ margin-left: 15%;
|
|
|
}
|
|
|
// 左1模块-￥符号样式
|
|
|
.coin {
|
|
|
@@ -1265,37 +810,15 @@ a {
|
|
|
}
|
|
|
//左1模块-数字样式
|
|
|
.rose_text_nmb {
|
|
|
- font-size: 20px;
|
|
|
+ font-size: 30px;
|
|
|
color: #00b891;
|
|
|
}
|
|
|
- //左2模块 柱状图
|
|
|
- #columnar {
|
|
|
- height: 100%;
|
|
|
- width: 95%;
|
|
|
- margin-left: 3%;
|
|
|
- margin-top: 5px;
|
|
|
- }
|
|
|
- //折线图
|
|
|
- #line_center_diagram {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
//轮播表格
|
|
|
.carousel_list {
|
|
|
width: 96%;
|
|
|
height: 98%;
|
|
|
margin-left: 10px;
|
|
|
- }
|
|
|
- //虚线柱状图
|
|
|
- #dotter_bar {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- //锥形图
|
|
|
- .cone_box {
|
|
|
- width: 95%;
|
|
|
- height: 97%;
|
|
|
- margin-left: 3%;
|
|
|
+ top: -60px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
