|
@@ -30,17 +30,20 @@
|
|
|
<h3 class="title">采购合同完成进度</h3>
|
|
|
<el-col :span="12" class="chart-card">
|
|
|
<div style="font-weight: bold;" class="">
|
|
|
- <div ref="myEchart1" style="height: 288px;"></div>
|
|
|
+ <div ref="myEchart1" style="height: 288px;" class="roseChart"></div>
|
|
|
+ <div class="bottom-tip">统计单位:吨</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="12" class="chart-card">
|
|
|
<div style="font-weight: bold;">
|
|
|
- <div ref="myEchart2" style="height: 288px;"></div>
|
|
|
+ <div ref="myEchart2" style="height: 288px;" class="roseChart"></div>
|
|
|
+ <div class="bottom-tip">统计单位:元</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="12" class="chart-card">
|
|
|
<div style="font-weight: bold;">
|
|
|
- <div ref="myEchart3" style="height: 288px;"></div>
|
|
|
+ <div ref="myEchart3" style="height: 288px;" class="roseChart"></div>
|
|
|
+ <div class="bottom-tip">统计单位:元</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
@@ -53,13 +56,13 @@
|
|
|
<p>在途车辆</p>
|
|
|
<p><span class="number">76</span><span class="number-text">台</span></p>
|
|
|
</div>
|
|
|
- <div class="item">
|
|
|
+ <div class="item">
|
|
|
<p>装货车辆</p>
|
|
|
<p><span class="number" style="color:#ffa523;">86</span><span class="number-text">台</span></p>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<p>卸货车辆</p>
|
|
|
- <p><span class="number" style="color: #2483ff;">16</span><span class="number-text">台</span></p>
|
|
|
+ <p><span class="number" style="color: #2483ff;">16</span><span class="number-text">台</span></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -71,7 +74,7 @@
|
|
|
<el-row>
|
|
|
<h3 class="content2-map">库点流向分布</h3>
|
|
|
<div class="center-map">
|
|
|
- <map-drag></map-drag>
|
|
|
+ <map-drag></map-drag>
|
|
|
</div>
|
|
|
</el-row>
|
|
|
<el-row>
|
|
@@ -96,17 +99,20 @@
|
|
|
<h3 class="left-title">采购合同完成进度</h3>
|
|
|
<el-col :span="12" class="chart-card">
|
|
|
<div style="font-weight: bold;">
|
|
|
- <div ref="myEchart4" style="height: 288px;"></div>
|
|
|
+ <div ref="myEchart4" style="height: 288px;" class="roseChart"></div>
|
|
|
+ <div class="bottom-tip">统计单位:吨</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="12" class="chart-card">
|
|
|
<div style="font-weight: bold;">
|
|
|
- <div ref="myEchart5" style="height: 288px;"></div>
|
|
|
+ <div ref="myEchart5" style="height: 288px;" class="roseChart"></div>
|
|
|
+ <div class="bottom-tip">统计单位:元</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="12" class="chart-card">
|
|
|
<div style="font-weight: bold;">
|
|
|
- <div ref="myEchart6" style="height: 288px;"></div>
|
|
|
+ <div ref="myEchart6" style="height: 288px;" class="roseChart"></div>
|
|
|
+ <div class="bottom-tip">统计单位:元</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
@@ -153,7 +159,8 @@
|
|
|
import {
|
|
|
noticeNumber,
|
|
|
queryCircularManagementReceiveList,
|
|
|
- getStaffHomeShowList
|
|
|
+ getStaffHomeShowList,
|
|
|
+ getChartsData
|
|
|
} from '@/model/home/index'
|
|
|
import {
|
|
|
getUserVesselList,
|
|
@@ -204,10 +211,11 @@
|
|
|
|
|
|
data() {
|
|
|
return {
|
|
|
- nowDate: null, //存放年月日变量
|
|
|
- nowTime: null, //存放时分秒变量
|
|
|
- timer: "", //定义一个定时器的变量
|
|
|
- currentTime: new Date(), // 获取当前时间
|
|
|
+ chartsData: [],
|
|
|
+ nowDate: null, //存放年月日变量
|
|
|
+ nowTime: null, //存放时分秒变量
|
|
|
+ timer: "", //定义一个定时器的变量
|
|
|
+ currentTime: new Date(), // 获取当前时间
|
|
|
timer: '',
|
|
|
dialogVisible: false,
|
|
|
showEchart: false,
|
|
@@ -315,17 +323,18 @@
|
|
|
this.getRouteList()
|
|
|
// this.checkUserInfoDialog()
|
|
|
{
|
|
|
- this.timer = setInterval(this.getTime, 1000);
|
|
|
+ this.timer = setInterval(this.getTime, 1000);
|
|
|
}
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
clearInterval(this.timer);
|
|
|
- if (this.timer) {
|
|
|
- clearInterval(this.timer); // 在Vue实例销毁前,清除定时器
|
|
|
- }
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer); // 在Vue实例销毁前,清除定时器
|
|
|
+ }
|
|
|
},
|
|
|
async mounted() {
|
|
|
let that = this
|
|
|
+ this.getChartsData()
|
|
|
// this.timer = setInterval(function(){
|
|
|
// // that.getRouteList()
|
|
|
// axios.get('https://live.eliangeyun.com/api/v1/device/channellist')
|
|
@@ -340,17 +349,12 @@
|
|
|
// console.log(err);
|
|
|
// });
|
|
|
// }, 2000);
|
|
|
- this.initCharts()
|
|
|
//获取新闻列表
|
|
|
// this.getNewList()
|
|
|
- noticeNumber().toPromise().then(res => {
|
|
|
- const {
|
|
|
- task = 0, remind = 0, overdue = 0, news = 0
|
|
|
- } = res
|
|
|
- this.number.task = task
|
|
|
- this.number.remind = remind
|
|
|
- this.number.overdue = overdue
|
|
|
- this.number.news = news
|
|
|
+ getChartsData().toPromise().then(res => {
|
|
|
+ console.log(res)
|
|
|
+ this.chartsData = res
|
|
|
+ this.initCharts()
|
|
|
})
|
|
|
// if (this.vesselBankFlag !== 'V') {
|
|
|
// EventBus.$emit('addShipScript', () => {
|
|
@@ -383,148 +387,220 @@
|
|
|
},
|
|
|
methods: {
|
|
|
...mapActions('user', ['toSetShow', 'changeVesslBank']),
|
|
|
- getTime(){
|
|
|
- const date = new Date();
|
|
|
- const year = date.getFullYear();
|
|
|
- const month = date.getMonth() + 1;
|
|
|
- const day = date.getDate();
|
|
|
- const hour= date.getHours();
|
|
|
- const minute = date.getMinutes();
|
|
|
- const second = date.getSeconds();
|
|
|
- this.month=check(month);
|
|
|
- this.day=check(day);
|
|
|
- this.hour=check(hour);
|
|
|
- this.minute=check(minute);
|
|
|
- this.second=check(second);
|
|
|
- function check(i){
|
|
|
- const num = (i<10)?("0"+i) : i;
|
|
|
- return num;
|
|
|
- }
|
|
|
- this.nowDate = year + "-" + this.month + "-" + this.day;
|
|
|
- this.nowTime = this.hour + ":" + this.minute + ":" + this.second ;
|
|
|
- },
|
|
|
+ getChartsData() {
|
|
|
+ noticeNumber().toPromise().then(res => {
|
|
|
+ const {
|
|
|
+ task = 0, remind = 0, overdue = 0, news = 0
|
|
|
+ } = res
|
|
|
+ this.number.task = task
|
|
|
+ this.number.remind = remind
|
|
|
+ this.number.overdue = overdue
|
|
|
+ this.number.news = news
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getTime() {
|
|
|
+ const date = new Date();
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = date.getMonth() + 1;
|
|
|
+ const day = date.getDate();
|
|
|
+ const hour = date.getHours();
|
|
|
+ const minute = date.getMinutes();
|
|
|
+ const second = date.getSeconds();
|
|
|
+ this.month = check(month);
|
|
|
+ this.day = check(day);
|
|
|
+ this.hour = check(hour);
|
|
|
+ this.minute = check(minute);
|
|
|
+ this.second = check(second);
|
|
|
+
|
|
|
+ function check(i) {
|
|
|
+ const num = (i < 10) ? ("0" + i) : i;
|
|
|
+ return num;
|
|
|
+ }
|
|
|
+ this.nowDate = year + "-" + this.month + "-" + this.day;
|
|
|
+ this.nowTime = this.hour + ":" + this.minute + ":" + this.second;
|
|
|
+ },
|
|
|
initCharts() {
|
|
|
let app = this;
|
|
|
- let myChart = app.$echarts.init(this.$refs.myEchart1);
|
|
|
- let myChart2 = app.$echarts.init(this.$refs.myEchart2);
|
|
|
- let myChart3 = app.$echarts.init(this.$refs.myEchart3);
|
|
|
- let myChart4 = app.$echarts.init(this.$refs.myEchart4);
|
|
|
- let myChart5 = app.$echarts.init(this.$refs.myEchart5);
|
|
|
- let myChart6 = app.$echarts.init(this.$refs.myEchart6);
|
|
|
- let myChart7 = app.$echarts.init(this.$refs.myEchart7);
|
|
|
-
|
|
|
- // 圆环图各环节的颜色
|
|
|
- var color = ['#75d1f4', '#ffa523'];
|
|
|
-
|
|
|
- // 圆环图各环节的名称和值(系列中各数据项的名称和值)
|
|
|
- var data = [{
|
|
|
- name: '已完成量',
|
|
|
- value: 320
|
|
|
- }, {
|
|
|
- name: '待完成量',
|
|
|
- value: 586
|
|
|
- }];
|
|
|
- // 指定图表的配置项和数据
|
|
|
- var option = {
|
|
|
-
|
|
|
- //背景色
|
|
|
- // backgroundColor: { // 背景颜色
|
|
|
- // type: 'linear',
|
|
|
- // x: 0,
|
|
|
- // y: 0,
|
|
|
- // x2: 0,
|
|
|
- // y2: 1,
|
|
|
- // colorStops: [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(0,0,0,0.4)' // 0% 处的颜色
|
|
|
- // }, {
|
|
|
- // offset: 0.5,
|
|
|
- // color: 'rgba(0,0,0,0.4)' // 50% 处的颜色
|
|
|
- // }, {
|
|
|
- // offset: 1,
|
|
|
- // color: 'rgba(0,0,0,0.4)' // 100% 处的颜色
|
|
|
- // }],
|
|
|
- // globalCoord: false // 缺省为 false
|
|
|
- // },
|
|
|
+ var roseCharts = document.getElementsByClassName("roseChart");
|
|
|
+ for (let i = 0; i < roseCharts.length; i++) {
|
|
|
+ let myChart = app.$echarts.init(roseCharts[i]);
|
|
|
+ let color = []
|
|
|
+ let data = []
|
|
|
+ let text = ""
|
|
|
+ let formatter = ""
|
|
|
+ let graphicText = '\n\n总计\n\n' + this.chartsData[i].total
|
|
|
+ switch (i) {
|
|
|
+ case 0:
|
|
|
+ // 圆环图各环节的颜色
|
|
|
+ color = ['#75d1f4', '#3a3b40'];
|
|
|
+ // 圆环图各环节的名称和值(系列中各数据项的名称和值)
|
|
|
+ data = [{
|
|
|
+ name: '已完成量',
|
|
|
+ value: this.chartsData[i].biViewInfoList[0].count
|
|
|
+ }, {
|
|
|
+ name: '待完成量',
|
|
|
+ value: this.chartsData[i].biViewInfoList[1].count
|
|
|
+ }]
|
|
|
+ text = '合同总量'
|
|
|
+ formatter = '{b}{c}吨 </br> 占比{d}%'
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ // 圆环图各环节的颜色
|
|
|
+ color = ['#247ef4', '#3a3b40'];
|
|
|
+ // 圆环图各环节的名称和值(系列中各数据项的名称和值)
|
|
|
+ data = [{
|
|
|
+ name: '已开票',
|
|
|
+ value: this.chartsData[i].biViewInfoList[0].count
|
|
|
+ }, {
|
|
|
+ name: '待开票',
|
|
|
+ value: this.chartsData[i].biViewInfoList[1].count
|
|
|
+ }]
|
|
|
+ text = '合同总额'
|
|
|
+ formatter = '{b}{c}元 </br> 占比{d}%'
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ // 圆环图各环节的颜色
|
|
|
+ color = ['#f49f23', '#3a3b40'];
|
|
|
+ // 圆环图各环节的名称和值(系列中各数据项的名称和值)
|
|
|
+ data = [{
|
|
|
+ name: '已付款',
|
|
|
+ value: this.chartsData[i].biViewInfoList[0].count
|
|
|
+ }, {
|
|
|
+ name: '待付款',
|
|
|
+ value: this.chartsData[i].biViewInfoList[1].count
|
|
|
+ }]
|
|
|
+ text = '合同总额'
|
|
|
+ formatter = '{b}{c}元 </br> 占比{d}%'
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ // 圆环图各环节的颜色
|
|
|
+ color = ['#75d1f4', '#3a3b40'];
|
|
|
+ // 圆环图各环节的名称和值(系列中各数据项的名称和值)
|
|
|
+ data = [{
|
|
|
+ name: '已完成量',
|
|
|
+ value: this.chartsData[i].biViewInfoList[0].count
|
|
|
+ }, {
|
|
|
+ name: '待完成量',
|
|
|
+ value: this.chartsData[i].biViewInfoList[1].count
|
|
|
+ }]
|
|
|
+ text = '合同总量'
|
|
|
+ formatter = '{b}{c}吨 </br> 占比{d}%'
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ // 圆环图各环节的颜色
|
|
|
+ color = ['#247ef4', '#3a3b40'];
|
|
|
+ // 圆环图各环节的名称和值(系列中各数据项的名称和值)
|
|
|
+ data = [{
|
|
|
+ name: '已开票',
|
|
|
+ value: this.chartsData[i].biViewInfoList[0].count
|
|
|
+ }, {
|
|
|
+ name: '待开票',
|
|
|
+ value: this.chartsData[i].biViewInfoList[1].count
|
|
|
+ }]
|
|
|
+ text = '合同总额'
|
|
|
+ formatter = '{b}{c}元 </br> 占比{d}%'
|
|
|
+ break;
|
|
|
+ case 5:
|
|
|
+ // 圆环图各环节的颜色
|
|
|
+ color = ['#f49f23', '#3a3b40'];
|
|
|
+ // 圆环图各环节的名称和值(系列中各数据项的名称和值)
|
|
|
+ data = [{
|
|
|
+ name: '已付款',
|
|
|
+ value: this.chartsData[i].biViewInfoList[0].count
|
|
|
+ }, {
|
|
|
+ name: '待付款',
|
|
|
+ value: this.chartsData[i].biViewInfoList[1].count
|
|
|
+ }]
|
|
|
+ text = '合同总额'
|
|
|
+ formatter = '{b}{c}元 </br> 占比{d}%'
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ myChart.setOption({
|
|
|
+ title: [{
|
|
|
+ text: text,
|
|
|
+ top: '2%',
|
|
|
+ left: '3%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#f4f4f4',
|
|
|
+ fontSize: 18,
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ // 图例
|
|
|
+ legend: [{
|
|
|
+ selectedMode: true, // 图例选择的模式,控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择,可以设成 false 关闭。
|
|
|
+ top: '10%',
|
|
|
+ left: 'center',
|
|
|
+ con: "circle",
|
|
|
+ itemWidth: 10, // 设置宽度
|
|
|
+ itemHeight: 10, // 设置高度
|
|
|
+ itemGap: 40, // 设置间距
|
|
|
+ textStyle: { // 图例的公用文本样式。
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ data: data
|
|
|
+ }],
|
|
|
|
|
|
- // 标题
|
|
|
- title: [{
|
|
|
- text: '合同总量',
|
|
|
- top: '2%',
|
|
|
- left: '3%',
|
|
|
- textStyle: {
|
|
|
- color: '#f4f4f4',
|
|
|
- fontSize: 18,
|
|
|
- }
|
|
|
- }],
|
|
|
-
|
|
|
- // 图例
|
|
|
- legend: [{
|
|
|
- selectedMode: true, // 图例选择的模式,控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择,可以设成 false 关闭。
|
|
|
- top: '10%',
|
|
|
- left: 'center',
|
|
|
- con: "circle",
|
|
|
- itemWidth: 10, // 设置宽度
|
|
|
- itemHeight: 10, // 设置高度
|
|
|
- itemGap: 40, // 设置间距
|
|
|
- textStyle: { // 图例的公用文本样式。
|
|
|
- fontSize: 14,
|
|
|
- color: '#fff'
|
|
|
+ // 提示框
|
|
|
+ tooltip: {
|
|
|
+ show: true, // 是否显示提示框
|
|
|
+ formatter: formatter // 提示框显示内容,此处{b}表示各数据项名称,此项配置为默认显示项,{c}表示数据项的值,默认不显示,({d}%)表示数据项项占比,默认不显示。
|
|
|
},
|
|
|
- data: ['已完成量', '待完成量']
|
|
|
- }],
|
|
|
|
|
|
- // 提示框
|
|
|
- tooltip: {
|
|
|
- show: true, // 是否显示提示框
|
|
|
- formatter: '{b} </br> 销量{c}件 </br> 占比{d}%' // 提示框显示内容,此处{b}表示各数据项名称,此项配置为默认显示项,{c}表示数据项的值,默认不显示,({d}%)表示数据项项占比,默认不显示。
|
|
|
- },
|
|
|
-
|
|
|
- // graphic 是原生图形元素组件。可以支持的图形元素包括:image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
|
|
|
- graphic: {
|
|
|
- type: 'text', // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
|
|
|
- top: 'center', // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom,则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 group 的子元素,父元素就是 group 元素。
|
|
|
- left: 'center', // 同上
|
|
|
- style: {
|
|
|
- text: '合计\n\n123', // 文本块文字。可以使用 \n 来换行。[ default: '' ]
|
|
|
- fill: '#fff', // 填充色。
|
|
|
- fontSize: 16, // 字体大小
|
|
|
- fontWeight: 'bold' // 文字字体的粗细,可选'normal','bold','bolder','lighter'
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 系列列表
|
|
|
- series: [{
|
|
|
- name: '', // 系列名称
|
|
|
- type: 'pie', // 系列类型
|
|
|
- center: ['50%', '50%'], // 饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。[ default: ['50%', '50%'] ]
|
|
|
- radius: ['35%', '45%'], // 饼图的半径,数组的第一项是内半径,第二项是外半径。[ default: [0, '75%'] ]
|
|
|
- hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
|
|
|
- color: color, // 圆环图的颜色
|
|
|
- label: { // 饼图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等.
|
|
|
- normal: {
|
|
|
- show: true, // 是否显示标签[ default: false ]
|
|
|
- position: 'outside', // 标签的位置。'outside'饼图扇区外侧,通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
|
|
|
- formatter: '{b} : {c}件' // 标签内容
|
|
|
+ // graphic 是原生图形元素组件。可以支持的图形元素包括:image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
|
|
|
+ graphic: {
|
|
|
+ type: 'text', // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
|
|
|
+ top: 'center', // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom,则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 group 的子元素,父元素就是 group 元素。
|
|
|
+ left: 'center', // 同上
|
|
|
+ style: {
|
|
|
+ text: graphicText, // 文本块文字。可以使用 \n 来换行。[ default: '' ]
|
|
|
+ fill: '#fff', // 填充色。
|
|
|
+ fontSize: 16, // 字体大小
|
|
|
+ fontWeight: 'bold' // 文字字体的粗细,可选'normal','bold','bolder','lighter'
|
|
|
}
|
|
|
},
|
|
|
- labelLine: { // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
|
|
|
- normal: {
|
|
|
- show: true, // 是否显示视觉引导线。
|
|
|
- length: 15, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
|
|
|
- length2: 10, // 视觉引导项第二段的长度。
|
|
|
- lineStyle: { // 视觉引导线的样式
|
|
|
- //color: '#000',
|
|
|
- //width: 1
|
|
|
+
|
|
|
+ // 系列列表
|
|
|
+ series: [{
|
|
|
+ name: '', // 系列名称
|
|
|
+ type: 'pie', // 系列类型
|
|
|
+ center: ['50%', '55%'], // 饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。[ default: ['50%', '50%'] ]
|
|
|
+ radius: ['45%', '55%'], // 饼图的半径,数组的第一项是内半径,第二项是外半径。[ default: [0, '75%'] ]
|
|
|
+ hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
|
|
|
+ color: color, // 圆环图的颜色
|
|
|
+ label: { // 饼图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等.
|
|
|
+ normal: {
|
|
|
+ show: true, // 是否显示标签[ default: false ]
|
|
|
+ position: 'outside', // 标签的位置。'outside'饼图扇区外侧,通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
|
|
|
+ formatter: '{c}', // 标签内容
|
|
|
+ color: '#d5d5d6',
|
|
|
+ fontSize: 16,
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- data: data // 系列中的数据内容数组。
|
|
|
- }]
|
|
|
- };
|
|
|
+ },
|
|
|
+ labelLine: { // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
|
|
|
+ normal: {
|
|
|
+ show: true, // 是否显示视觉引导线。
|
|
|
+ length: 15, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
|
|
|
+ length2: 10, // 视觉引导项第二段的长度。
|
|
|
+ lineStyle: { // 视觉引导线的样式
|
|
|
+ //color: '#000',
|
|
|
+ //width: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: data // 系列中的数据内容数组。
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ myChart.off("click");
|
|
|
+ myChart.on("click", function(params) {
|
|
|
+ // var a = params.dataIndex
|
|
|
+ console.log(params, "我被点击了");
|
|
|
+ app.dialogVisible = true
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
// 柱状图
|
|
|
- // 指定图表的配置项和数据
|
|
|
+ let myChart7 = app.$echarts.init(this.$refs.myEchart7);
|
|
|
var zoption = {
|
|
|
// ---- 标题 -----
|
|
|
// title: {
|
|
@@ -740,20 +816,9 @@
|
|
|
data: [3000, 4000, 4200, 4500, 6000, 5600, 4500, 5020, 4500, 5400, 4300]
|
|
|
}]
|
|
|
};
|
|
|
- // 使用刚指定的配置项和数据显示图表
|
|
|
- myChart.setOption(option)
|
|
|
- myChart2.setOption(option)
|
|
|
- myChart3.setOption(option)
|
|
|
- myChart4.setOption(option)
|
|
|
- myChart5.setOption(option)
|
|
|
- myChart6.setOption(option)
|
|
|
+
|
|
|
myChart7.setOption(zoption)
|
|
|
- myChart.off("click");
|
|
|
- myChart.on("click", function(params) {
|
|
|
- // var a = params.dataIndex
|
|
|
- console.log(params, "我被点击了");
|
|
|
- app.dialogVisible = true
|
|
|
- })
|
|
|
+
|
|
|
},
|
|
|
handleClose(done) {
|
|
|
this.$confirm('确认关闭?')
|
|
@@ -1727,50 +1792,57 @@
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
}
|
|
|
-.header{
|
|
|
- // background: rgb(36, 38, 45);
|
|
|
+
|
|
|
+ .header {
|
|
|
+ // background: rgb(36, 38, 45);
|
|
|
background: #2a2a2a;
|
|
|
- padding: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .right{
|
|
|
- color: white;
|
|
|
- font-weight: 700;
|
|
|
- text-align: center;
|
|
|
- .top{
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- .bottom{
|
|
|
- font-size: 26px;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .right {
|
|
|
+ color: white;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ font-size: 26px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
+
|
|
|
.chart-card {
|
|
|
- // background: rgb(36, 38, 45);
|
|
|
+ // background: rgb(36, 38, 45);
|
|
|
+ position: relative;
|
|
|
background: #2a2a2a;
|
|
|
width: 350px;
|
|
|
margin-top: 10px;
|
|
|
height: 288px;
|
|
|
// height: 288px;
|
|
|
}
|
|
|
- .title2{
|
|
|
- pointer-events: auto;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- color: rgb(255, 255, 255);
|
|
|
- font-weight: bold;
|
|
|
- font-family: "Microsoft Yahei", Arial, "sans-serif";
|
|
|
- font-size: 15px;
|
|
|
- writing-mode: horizontal-tb;
|
|
|
- letter-spacing: 0px;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
+
|
|
|
+ .title2 {
|
|
|
+ pointer-events: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ color: rgb(255, 255, 255);
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: "Microsoft Yahei", Arial, "sans-serif";
|
|
|
+ font-size: 15px;
|
|
|
+ writing-mode: horizontal-tb;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
}
|
|
|
|
|
@@ -1808,7 +1880,7 @@
|
|
|
|
|
|
.content2-middle {
|
|
|
width: calc(100% - 720px);
|
|
|
- margin:0 20px 0 15px;
|
|
|
+ margin: 0 20px 0 15px;
|
|
|
|
|
|
.left-card {
|
|
|
display: flex;
|
|
@@ -1838,7 +1910,8 @@
|
|
|
font-size: 53px;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
- .number-text{
|
|
|
+
|
|
|
+ .number-text {
|
|
|
color: #d5d5d5;
|
|
|
}
|
|
|
}
|
|
@@ -1850,43 +1923,59 @@
|
|
|
|
|
|
.home {
|
|
|
background: rgb(27, 28, 30);
|
|
|
- padding-bottom:20px
|
|
|
+ padding-bottom: 20px
|
|
|
}
|
|
|
- .home .body-middle-height{
|
|
|
+
|
|
|
+ .home .body-middle-height {
|
|
|
height: auto;
|
|
|
}
|
|
|
-.content2-map{
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
-.content3{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- background: #2a2a2a;
|
|
|
- padding: 10px 60px;
|
|
|
- .content3-number{
|
|
|
- margin-left: 40px;
|
|
|
- }
|
|
|
- .blue{
|
|
|
- font-size: 30px;
|
|
|
- color: #50cad4;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- .yellow{
|
|
|
- font-size: 30px;
|
|
|
- color: #ffa523;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- .left,.right{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: #d5d5d5;
|
|
|
- }
|
|
|
- img{
|
|
|
- display: inline-block;
|
|
|
- width:35px;
|
|
|
- height:35px;
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
+
|
|
|
+ .content2-map {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content3 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background: #2a2a2a;
|
|
|
+ padding: 10px 60px;
|
|
|
+
|
|
|
+ .content3-number {
|
|
|
+ margin-left: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .blue {
|
|
|
+ font-size: 30px;
|
|
|
+ color: #50cad4;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yellow {
|
|
|
+ font-size: 30px;
|
|
|
+ color: #ffa523;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left,
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #d5d5d5;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: inline-block;
|
|
|
+ width: 35px;
|
|
|
+ height: 35px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .bottom-tip{
|
|
|
+ position: absolute;
|
|
|
+ z-index: 11;
|
|
|
+ color: #8c8c8d;
|
|
|
+ right: 10px;
|
|
|
+ bottom: 10px;
|
|
|
+ }
|
|
|
</style>
|