From 500832387dd658dcfa5ca2ccca602208c16f6802 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期五, 30 五月 2025 17:15:49 +0800
Subject: [PATCH] 提交一把订单
---
company/src/views/business/dataBoard.vue | 718 ++++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 561 insertions(+), 157 deletions(-)
diff --git a/company/src/views/business/dataBoard.vue b/company/src/views/business/dataBoard.vue
index 352342f..25f6b46 100644
--- a/company/src/views/business/dataBoard.vue
+++ b/company/src/views/business/dataBoard.vue
@@ -46,7 +46,7 @@
<i class="el-icon-info"></i>
</div>
<div class="box_chart_item_price">楼2,345,654.00</div>
- <div class="box_chart_item_tu" id="tu1"></div>
+ <div class="box_chart_item_tu" style="height: 132px" id="tu1"></div>
</div>
<div class="box_chart_item">
<div class="box_chart_item_info">
@@ -54,7 +54,7 @@
<i class="el-icon-info"></i>
</div>
<div class="box_chart_item_price">1,234</div>
- <div class="box_chart_item_tu" id="tu2"></div>
+ <div class="box_chart_item_tu" style="height: 132px" id="tu2"></div>
</div>
<div class="box_chart_item">
<div class="box_chart_item_info">
@@ -62,7 +62,7 @@
<i class="el-icon-info"></i>
</div>
<div class="box_chart_item_price">10.5澶�</div>
- <div class="box_chart_item_tu" id="tu3"></div>
+ <div class="box_chart_item_tu" style="height: 132px" id="tu3"></div>
</div>
</div>
<div class="box_shuju">
@@ -92,12 +92,12 @@
<div class="box_content_left">
<div class="box_content_left_title">椋庨櫓妗堜欢鐩戞帶</div>
<div class="box_content_left_list">
- <div class="box_content_left_list_item" :style="{ backgroundColor: item.backgroundColor }" v-for="(item, index) in list" :key="index">
- <div class="box_content_left_list_item_top">
+ <div class="box_content_left_list_item" :style="{ backgroundColor: item.title!= ''? item.backgroundColor :'#fff'}" v-for="(item, index) in list" :key="index">
+ <div class="box_content_left_list_item_top" v-if="item.title != ''" >
<span>{{item.title}}</span>
<span :style="{ color: item.color }">{{item.num}}</span>
</div>
- <div class="box_content_left_list_item_bottom">
+ <div class="box_content_left_list_item_bottom" v-if="item.title!= ''">
<span>杈冧笂鏈�</span>
<div class="box_content_left_list_item_bottom_lv">
8.3%
@@ -107,170 +107,548 @@
</div>
</div>
<div class="box_content_right">
- <div class="box_content_right_title">椋庨櫓妗堜欢鐩戞帶</div>
+ <div class="box_content_right_title">椋庨櫓妗堜欢鏁忔劅璇�</div>
+ <div class="box_chart_item_tu" id="wordchart"></div>
</div>
</div>
+ <div class="box_chart" style="height: 500px">
+ <div class="box_chart_item" style=" width:59%;height: 100%">
+ <div class="box_content_right_title" style="width: 100%;display: flex">
+ <div style="flex: 1">鐞嗚禂閲戦瓒嬪娍</div>
+ <div style="flex: 1; text-align: right">
+ <span :class="dateType == 0?'seldatetype':'datetype'" @click="changeDataType(0)">杩戜竴鏈�</span>
+ <span :class="dateType == 1?'seldatetype':'datetype'" @click="changeDataType(1)">杩戜竴骞�</span>
+ </div>
+ </div>
+ <div class="box_chart_item_tu" id="tuLipeijine" style="width: 100%;height: 90%" ></div>
+ </div>
+ <div class="box_chart_item" style=" width: 40%;height: 100%" >
+ <div class="box_content_right_title" >
+ <span>鍦板尯鍒嗗竷</span>
+ </div>
+ <div class="box_chart_item_tu" style="width: 100%;height: 100%" id="tuDiqu"></div>
+ </div>
+ </div>
+ <div class="box_chart" >
+ <div class="box_chart_item" style="height: 400px">
+ <div class="box_content_right_title">
+ <span>鍚勭被鍨嬫浠跺垎甯�</span>
+ </div>
+ <div class="box_chart_item_tu" id="tuAnjianleixing"></div>
+ </div>
+ <div class="box_chart_item" style="height: 400px">
+ <div class="box_content_right_title">
+ <span>浜嬫晠绫诲瀷鍒嗗竷</span>
+ </div>
+ <div class="box_chart_item_tu" id="tuShiguleixing"></div>
+ </div>
+ <div class="box_chart_item" style="height: 400px">
+ <div class="box_content_right_title">
+ <span>缁撴鐜囧垎鏋�</span>
+ </div>
+ <div class="box_chart_item_tu" id="tuJieanlv"></div>
+ </div>
+ </div>
+ <div class="box_chart">
+ <div class="box_chart_item" style=" width: 49.5%;height: 400px;">
+ <div class="box_content_right_title" >
+ <span>宸ョ鍑洪櫓TOP10</span>
+ </div>
+ <div class="box_chart_item_tu" id="tuGongzhong"></div>
+ </div>
+ <div class="box_chart_item" style=" width: 49.5%;height: 400px;">
+ <div class="box_content_right_title">
+ <span>鍑洪櫓浜哄勾榫勫垎甯�</span>
+ </div>
+ <div class="box_chart_item_tu" id="tuNianlin"></div>
+ </div>
+ </div>
</div>
</template>
<script>
- import * as echarts from 'echarts'
- export default {
- name: "dataBoard",
- data() {
- return {
- list: [
- {
- title: '澶氭鍑洪櫓',
- num: 0,
- color: '#EF4444',
- backgroundColor: '#FEF2F2'
- },
- {
- title: '閲嶅鎶ユ',
- num: 0,
- color: '#EA580C',
- backgroundColor: '#FFF7ED'
- },
- {
- title: '绱㈣禂杩囧',
- num: 0,
- color: '#CA8A04',
- backgroundColor: '#FEFCE8'
- },
- {
- title: '澶氭鍑洪櫓',
- num: 0,
- color: '#2563EB',
- backgroundColor: '#EFF6FF'
- },
- {
- title: '鏂板憳宸ュ嚭闄�',
- num: 0,
- color: '#9333EA',
- backgroundColor: '#FAF5FF'
- },
- {
- title: '寤惰繜鎶ユ',
- num: 0,
- color: '#4F46E5',
- backgroundColor: '#EEF2FF'
- }
- ]
- }
+import * as echarts from 'echarts'
+import 'echarts-wordcloud'
+import chinaJSON from '@/assets/china.json'
+export default {
+ name: 'dataBoard',
+ data () {
+ return {
+ dateType:0,
+ list: [
+ {
+ title: '澶氭鍑洪櫓',
+ num: 0,
+ color: '#EF4444',
+ backgroundColor: '#FEF2F2'
},
- created() {
- this.$nextTick(() => {
- this.setChart1()
- this.setChart2()
- this.setChart3()
- })
+ {
+ title: '閲嶅鎶ユ',
+ num: 0,
+ color: '#d6f7e5',
+ backgroundColor: '#FFF7ED'
},
- methods: {
- setChart1() {
- const chartDom = document.getElementById('tu1')
- const myChart = echarts.init(chartDom)
- let option
- option = {
- grid: {
- left: '3%',
- right: '3%',
- top: '10%',
- bottom: '0%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- data: [2, 7, 3, 12, 16, 9, 6],
- type: 'line',
- areaStyle: {},
- smooth: true
- }
- ]
- }
-
- option && myChart.setOption(option)
- },
- setChart2() {
- const chartDom = document.getElementById('tu2')
- const myChart = echarts.init(chartDom)
- let option
- option = {
- grid: {
- left: '3%',
- right: '3%',
- top: '10%',
- bottom: '0%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- data: [2, 7, 3, 12, 16, 9, 6],
- type: 'line',
- areaStyle: {},
- smooth: true
- }
- ]
- }
-
- option && myChart.setOption(option)
- },
- setChart3() {
- const chartDom = document.getElementById('tu3')
- const myChart = echarts.init(chartDom)
- let option
- option = {
- grid: {
- left: '3%',
- right: '3%',
- top: '10%',
- bottom: '0%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- data: [2, 7, 3, 12, 16, 9, 6],
- type: 'line',
- areaStyle: {},
- smooth: true
- }
- ]
- }
-
- option && myChart.setOption(option)
- }
+ {
+ title: '绱㈣禂杩囧',
+ num: 0,
+ color: '#CA8A04',
+ backgroundColor: '#FEFCE8'
+ },
+ {
+ title: '鏂板憳宸ュ嚭闄�',
+ num: 0,
+ color: '#3ea570',
+ backgroundColor: '#d6f7e5'
+ },
+ {
+ title: '鏁忔劅璇�',
+ num: 0,
+ color: '#2563EB',
+ backgroundColor: '#EFF6FF'
+ },
+ {
+ title: '寤惰繜鎶ユ',
+ num: 0,
+ color: '#4F46E5',
+ backgroundColor: '#EEF2FF'
+ },
+ {
+ title: '鏂板憳宸ヤ繚闅滄潯娆�',
+ num: 0,
+ color: '#9333EA',
+ backgroundColor: '#FAF5FF'
+ },
+ {
+ title: '',
+ num: 0,
+ color: '#9333EA',
+ backgroundColor: '#FAF5FF'
}
+ ]
}
+ },
+ created () {
+ this.$nextTick(() => {
+ this.setChart1()
+ this.setChart2()
+ this.setChart3()
+ this.setChartLipeijine()
+ this.setChartDiqu()
+ this.setChartAnjianleixing()
+ this.setChartShiguleixing()
+ this.setChartJieanlv()
+ this.setChartGonghzong()
+ this.setChartNianlin()
+ this.setChartWord()
+ })
+ },
+ methods: {
+ changeDataType(type){
+ this.dateType = type
+ },
+ setChartLipeijine () {
+ const chartDom = document.getElementById('tuLipeijine')
+ const myChart = echarts.init(chartDom)
+ const option = this.getBarOption(['2024-05', '2024-06', '2024-07', '2024-08', '2024-09', '2024-10', '2024-11', '2024-12', '2025-01', '2025-02', '2025-03', '2025-04'],
+ [1320, 1322, 1031, 1344, 950, 2360, 210,1320, 1322, 1031, 1344, 950],'#5470c5')
+ option && myChart.setOption(option)
+ },
+ setChartDiqu () {
+ const chartDom = document.getElementById('tuDiqu')
+ const myChart = echarts.init(chartDom)
+ echarts.registerMap('china', chinaJSON)
+ const mapData = [
+ { name: '鍖椾含甯�', code: '110000', value: 100 },
+ { name: '澶╂触甯�', code: '120000', value: 200 },
+ { name: '涓婃捣甯�', code: '310000', value: 300 },
+ { name: '閲嶅簡甯�', code: '500000', value: 400 },
+ { name: '娌冲寳鐪�', code: '130000', value: 500 },
+ { name: '娌冲崡鐪�', code: '410000', value: 600 },
+ { name: '浜戝崡鐪�', code: '530000', value: 10 },
+ { name: '杈藉畞鐪�', code: '210000', value: 20 },
+ { name: '榛戦緳姹熺渷', code: '230000', value: 30 },
+ { name: '婀栧崡鐪�', code: '430000', value: 40 },
+ { name: '瀹夊窘鐪�', code: '340000', value: 60 },
+ { name: '灞变笢鐪�', code: '370000', value: 50 },
+ { name: '鏂扮枂缁村惥灏旇嚜娌诲尯', code: '650000', value: 70 },
+ { name: '姹熻嫃鐪�', code: '320000', value: 10 },
+ { name: '娴欐睙鐪�', code: '330000', value: 20 },
+ { name: '姹熻タ鐪�', code: '360000', value: 30 },
+ { name: '婀栧寳鐪�', code: '420000', value: 40 },
+ { name: '骞胯タ澹棌鑷不鍖�', code: '450000', value: 0 },
+ { name: '鐢樿們鐪�', code: '620000', value: 0 },
+ { name: '灞辫タ鐪�', code: '140000', value: 0 },
+ { name: '鍐呰挋鍙よ嚜娌诲尯', code: '150000', value: 0 },
+ { name: '闄曡タ鐪�', code: '610000', value: 0 },
+ { name: '鍚夋灄鐪�', code: '220000', value: 0 },
+ { name: '绂忓缓鐪�', code: '350000', value: 0 },
+ { name: '璐靛窞鐪�', code: '520000', value: 0 },
+ { name: '骞夸笢鐪�', code: '440000', value: 0 },
+ { name: '闈掓捣鐪�', code: '630000', value: 0 },
+ { name: '瑗胯棌鑷不鍖�', code: '540000', value: 0 },
+ { name: '瀹佸鍥炴棌鑷不鍖�', code: '640000', value: 0 },
+ { name: '鍥涘窛鐪�', code: '510000', value: 0 },
+ { name: '瀹佸鐪�', code: '640000', value: 0 },
+ { name: '娴峰崡鐪�', code: '460000', value: 0 },
+ { name: '鍙版咕鐪�', code: '710000', value: 0 },
+ { name: '棣欐腐鐗瑰埆琛屾斂鍖�', code: '810000', value: 0 },
+ { name: '婢抽棬鐗瑰埆琛屾斂鍖�', code: '820003', value: 0 },
+ { name: '鍗楁捣璇稿矝', code: '', value: 0 }
+ ]
+ const option = {
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}<br/>{c}'
+ },
+ // toolbox: {
+ // show: true,
+ // orient: 'vertical',
+ // left: 'right',
+ // top: 'center',
+ // feature: {
+ // dataView: { readOnly: false },
+ // restore: {},
+ // saveAsImage: {}
+ // }
+ // },
+ visualMap: {
+ top: 100,
+ left: 'right',
+ // min: 0,
+ // max: 50000,
+ // text: ['High', 'Low'],
+ // realtime: false,
+ calculable: true,
+ show: false,
+ inRange: {
+ color: ['lightskyblue', 'yellow', 'orangered']
+ }
+ },
+ series: [
+ {
+ name: '鍦板尯鍒嗗竷',
+ type: 'map',
+ map: 'china',
+ label: {
+ show: true
+ },
+ data: mapData
+ }
+ ]
+ }
+ myChart.setOption(option)
+ },
+ setChartAnjianleixing () {
+ const chartDom = document.getElementById('tuAnjianleixing')
+ const myChart = echarts.init(chartDom)
+ const option = {
+ grid: {
+ left: '3%',
+ right: '3%',
+ top: '10%',
+ bottom: '0%',
+ containLabel: true
+ },
+ label: {
+ alignTo: 'edge',
+ formatter: '{name|{b}}\n{time|{c} }',
+ minMargin: 5,
+ edgeDistance: 10,
+ lineHeight: 15,
+ rich: {
+ time: {
+ fontSize: 10,
+ color: '#999'
+ }
+ }
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'right'
+ },
+ series: [
+ {
+ data: [{ value: 1048, name: 'Search Engine' },
+ { value: 735, name: 'Direct' },
+ { value: 580, name: 'Email' },
+ { value: 484, name: 'Union Ads' },
+ { value: 300, name: 'Video Ads' }],
+ type: 'pie',
+ areaStyle: {},
+ smooth: true
+ }
+ ]
+ }
+
+ option && myChart.setOption(option)
+ },
+ setChartShiguleixing () {
+ var chartDom = document.getElementById('tuShiguleixing');
+ var myChart = echarts.init(chartDom);
+ var option = {
+ // legend: {
+ // data: ['Allocated Budget', 'Actual Spending']
+ // },
+ radar: {
+ // shape: 'circle',
+ indicator: [
+ {name: '浜ら�氫簨鏁�', max: 16500},
+ {name: '宸ュ湴鍙椾激', max: 16000},
+ {name: '鎰忓鍙椾激', max: 30000},
+ {name: '鍏朵粬浜嬫晠', max: 38000},
+ {name: '鍖荤枟浜嬫晠', max: 52000},
+ {name: '鑷劧鐏惧', max: 25000}
+ ]
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ series: [
+ {
+ name: '浜嬫晠绫诲瀷鍒嗗竷',
+ type: 'radar',
+ data: [
+ {
+ value: [4200, 3000, 20000, 35000, 50000, 18000],
+ name: ''
+ }
+ ]
+ }
+ ]
+ }
+ option && myChart.setOption(option);
+ },
+ setChartJieanlv () {
+ const chartDom = document.getElementById('tuJieanlv')
+ const myChart = echarts.init(chartDom)
+ const option = this.getLineOption(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [120, 132, 101, 134, 90, 230, 210],'rgba(207,58,24,0.83)')
+ option && myChart.setOption(option)
+ },
+ setChartGonghzong () {
+ var chartDom = document.getElementById('tuGongzhong');
+ var myChart = echarts.init(chartDom);
+ var option = {
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'value'
+ // boundaryGap: [0, 0.01]
+ },
+ yAxis: {
+ type: 'category',
+ data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
+ },
+ series: [
+ {
+ name: '2025',
+ type: 'bar',
+ itemStyle: {
+ color: '#f6d68d'
+ },
+ data: [18203, 23489, 29034, 104970, 131744, 630230]
+ }
+ ]
+ }
+ option && myChart.setOption(option);
+ },
+ setChartNianlin () {
+ const chartDom = document.getElementById('tuNianlin')
+ const myChart = echarts.init(chartDom)
+ const option = this.getBarOption(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [120, 132, 101, 134, 90, 230, 210],'#80d3ff')
+ option && myChart.setOption(option)
+ },
+ setChartWord () {
+ // const color = ['#1890FF', '#13C2C2', '#2FC25B', '#009DFF', '#8496FA']
+ const myChart = echarts.init(document.getElementById('wordchart'))
+ var option = {
+ backgroundColor: '#fff',
+ series: [
+ {
+ type: 'wordCloud',
+ sizeRange: [15, 70], // 鐢ㄦ潵璋冩暣瀛楃殑澶у皬鑼冨洿
+ rotationRange: [0, 0], // 姣忎釜璇嶆棆杞殑瑙掑害鑼冨洿鍜屾棆杞殑姝ヨ繘
+ rotationStep: 45,
+ gridSize: 10, // 鐢ㄦ潵璋冩暣璇嶄箣闂寸殑璺濈
+ shape: 'pentagon', // shape杩欎釜灞炴�ц櫧鐒跺彲閰嶇疆锛屼絾鏄湪璇嶇殑鏁伴噺涓嶅お澶氱殑鏃跺�欙紝鏁堟灉涓嶆槑鏄撅紝瀹冧細瓒嬪悜浜庣敾涓�涓き鍦�
+ // 浣嶇疆鐨勯厤缃�
+ width: '100%',
+ height: '100%',
+ drawOutOfBound: false, // 鍏佽璇嶅お澶х殑鏃跺�欙紝瓒呭嚭鐢诲竷鐨勮寖鍥�
+ layoutAnimation: true, // 甯冨眬鐨勬椂鍊欐槸鍚︽湁鍔ㄧ敾
+ textStyle: {
+ // 棰滆壊鍙互鐢ㄤ竴涓嚱鏁版潵杩斿洖瀛楃涓诧紝杩欓噷鏄殢鏈鸿壊
+ /* color: function (v) {
+ const index = Math.floor(Math.random() * color.length)
+ return color[index]
+ }, */
+ fontFamily: 'sans-serif',
+ fontWeight: 'bold',
+ // Color鍙互鏄竴涓洖璋冨嚱鏁版垨涓�涓鑹插瓧绗︿覆
+ color: function () {
+ // Random color
+ return 'rgb(' + [
+ Math.round(Math.random() * 160),
+ Math.round(Math.random() * 160),
+ Math.round(Math.random() * 160)
+ ].join(',') + ')'
+ }
+ },
+ // 鍒掕繃娣诲姞鐨勯槾褰憋紝鍥犱负鎴戜笉闇�瑕侊紝鍥犳娉ㄩ噴浜�
+ // emphasis: {
+ // focus: 'self',
+ // textStyle: {
+ // textShadowBlur: 10,
+ // textShadowColor: '#333'
+ // }
+ // },
+ // data鏍煎紡鏄竴涓暟缁�
+ data: [{
+ name: '绾㈣壊',
+ value: 200
+ },
+ {
+ name: '钃濊壊',
+ value: 300
+ },
+ {
+ name: '娴嬭瘯',
+ value: 600
+ },
+ {
+ name: '閲嶅ぇ浜嬫晠',
+ value: 500
+ }
+ ]
+ }
+ ]
+
+ }
+ myChart.setOption(option)
+ },
+ setChart1 () {
+ const chartDom = document.getElementById('tu1')
+ const myChart = echarts.init(chartDom)
+ var ydata = [2, 7, 3, 12, 16, 9, 6]
+ var xdata = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ const option = this.getLineOption(xdata,ydata,'#50A850')
+ option && myChart.setOption(option)
+ },
+ setChart2 () {
+ const chartDom = document.getElementById('tu2')
+ const myChart = echarts.init(chartDom)
+ var ydata = [2, 7, 3, 12, 16, 9, 6]
+ var xdata = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ const option = this.getLineOption(xdata,ydata,'#f07e6f')
+ option && myChart.setOption(option)
+ },
+ setChart3 () {
+ const chartDom = document.getElementById('tu3')
+ const myChart = echarts.init(chartDom)
+ var ydata = [2, 7, 3, 12, 16, 9, 6]
+ var xdata = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ const option = this.getLineOption(xdata,ydata,'#8951be')
+ option && myChart.setOption(option)
+ },
+ getBarOption(xd,yd,color){
+ const option = {
+ grid: {
+ left: '3%',
+ right: '3%',
+ top: '10%',
+ bottom: '0%',
+ containLabel: true
+ },
+ legend: {},
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ xAxis: {
+ type: 'category',
+ // boundaryGap: false,
+ data: xd,
+ axisLabel: {
+ interval: 1 //
+ }
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ emphasis: {
+ focus: 'series'
+ },
+ data: yd,
+ type: 'bar',
+ itemStyle: {
+ color: color || '#f07e6f'
+ },
+ smooth: true
+ }
+ ]
+ }
+ return option
+ },
+ getLineOption(xd,yd,color){
+ const option = {
+ grid: {
+ left: '3%',
+ right: '3%',
+ top: '10%',
+ bottom: '0%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {},
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: xd
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: yd,
+ type: 'line',
+ areaStyle: {
+ opacity: 0.5,
+ color: color || '#f07e6f'
+ },
+ lineStyle: {
+ color: color || '#f07e6f'
+ },
+ smooth: true
+ }
+ ]
+ }
+ return option
+ }
+ }
+}
</script>
<style lang="scss" scoped>
.box {
width: 100%;
- padding: 0 10px;
+ padding: 0 10px 30px 10px;
+
box-sizing: border-box;
.box_shua {
width: 100%;
@@ -342,6 +720,22 @@
align-items: center;
justify-content: space-between;
margin-top: 15px;
+ .datetype{
+ cursor: pointer;
+ color: #8c939d;
+ margin-right: 10px;
+ padding: 2px 10px;
+ font-size: 14px;
+ border: solid 1px #8c939d;
+ }
+ .seldatetype{
+ cursor: pointer;
+ color: #3170fe;
+ margin-right: 10px;
+ padding: 2px 10px;
+ font-size: 14px;
+ border: solid 1px #3170fe;
+ }
.box_chart_item {
width: 32.5%;
height: 225px;
@@ -359,6 +753,12 @@
margin-right: 5px;
}
}
+ .box_content_right_title {
+ font-weight: bold;
+ font-size: 16px;
+ color: #101010;
+ margin-bottom: 15px;
+ }
.box_chart_item_price {
color: rgba(16,16,16,1);
font-size: 22px;
@@ -367,7 +767,7 @@
}
.box_chart_item_tu {
width: 100%;
- height: 130px;
+ height: 90%;
}
}
}
@@ -432,7 +832,7 @@
align-items: center;
justify-content: space-between;
.box_content_left_list_item {
- width: 32%;
+ width: 24%;
height: 94px;
padding: 16px 20px;
box-sizing: border-box;
@@ -487,6 +887,10 @@
color: #101010;
margin-bottom: 15px;
}
+ .box_chart_item_tu {
+ width: 100%;
+ height: 130px;
+ }
}
}
}
--
Gitblit v1.9.3