|
|
@@ -1,15 +1,644 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- dfdsf
|
|
|
+ <div class="view-container">
|
|
|
+ <div class="top">
|
|
|
+ <div class="top-left">
|
|
|
+ <div class="top-left-top">
|
|
|
+ <div class="title">年入库备件价值占比</div>
|
|
|
+ <div style="display:flex; justify-content:space-between;padding-right: 40px; position:relative">
|
|
|
+ <div id="chart1"></div>
|
|
|
+ <div style="position:absolute;top:0;left:60px;color: #C3CAD9;">备件价值：<span style="color:white;font-size:24px;">432,452￥</span></div>
|
|
|
+ <div style="width: 474px;height: 196px;">
|
|
|
+ <table>
|
|
|
+ <thead>
|
|
|
+ <tr style="display: flex;justify-content: space-between; background:RGBA(22, 38, 81, 1);">
|
|
|
+ <th class="list-header " style="width:232px">备件名称</th>
|
|
|
+ <th class="list-header">备件价值</th>
|
|
|
+ <th class="list-header">价值占比</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(list,i) in list1" :key="i" style="display: flex;justify-content: space-between;">
|
|
|
+ <td class="list-header" style="width:232px;">{{ list.year }}</td>
|
|
|
+ <td class="list-header" :style="color[i]">{{ list.sales }}</td>
|
|
|
+ <td class="list-header" style="">{{ list.date }}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top-left-bottom">
|
|
|
+ <div class="title">出入库类型数量占比</div>
|
|
|
+ <div style="display:flex; justify-content: space-between; padding: 0 30px; align-items: center; position: relative;">
|
|
|
+ <div>
|
|
|
+ <div id="chart2"></div>
|
|
|
+ <div style="position: absolute;left:100px;bottom:0px;">入库类型占比</div>
|
|
|
+ </div>
|
|
|
+ <a-divider style="height: 200px;background-color: rgba(153, 204, 255, 0.1);" type="vertical" />
|
|
|
+ <div>
|
|
|
+ <div id="chart22"></div>
|
|
|
+ <div style="position: absolute;right:200px;bottom:0px;">出库类型占比</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top-right">
|
|
|
+ <div class="top-right-top">
|
|
|
+ <div class="title">年出入库备件价值统计</div>
|
|
|
+ <div style="display:flex; justify-content: space-around; color:#8A92A2;padding-bottom:30px;">
|
|
|
+ <div style="display:flex; align-items: center; width: 250px;height: 75px; background:#1C3058;border: 1px solid rgba(153, 204, 255, 0.2);">
|
|
|
+ <my-icon style="font-size:42px;padding: 0 24px;" type="icon-rukuguanli" />
|
|
|
+ <div style="text-align:center; ">
|
|
|
+ <div style="font-size:14px;">入库备件价值</div>
|
|
|
+ <div style="font-size:24px; color:#fff;">444444</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items: center; width: 250px;height: 75px; background:#1C3058;border: 1px solid rgba(153, 204, 255, 0.2);">
|
|
|
+ <my-icon style="font-size:42px;padding: 0 24px;" type="icon-zhibiao" />
|
|
|
+ <div style="text-align:center; ">
|
|
|
+ <div style="font-size:14px;">仓库总备件价值</div>
|
|
|
+ <div style="font-size:24px; color:#fff;">444444</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items: center; width: 250px;height: 75px; background:#1C3058;border: 1px solid rgba(153, 204, 255, 0.2);">
|
|
|
+ <my-icon style="font-size:42px;padding: 0 24px;" type="icon-chukuguanli" />
|
|
|
+ <div style="text-align:center; ">
|
|
|
+ <div style="font-size:14px;">出库备件价值</div>
|
|
|
+ <div style="font-size:24px; color:#fff;">444444</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="chart4"></div>
|
|
|
+ </div>
|
|
|
+ <div class="top-right-bottom">
|
|
|
+ <div
|
|
|
+ style="width: 24px;height: 52px;font-size: 24px;padding:24px">通知</div>
|
|
|
+ <div style="width:730px;height:113px;padding: 25px 0">
|
|
|
+ <a-list :split="false" size="small" :data-source="information">
|
|
|
+ <a-list-item style="color:#B9BFD6;padding:0 30px; " slot="renderItem" slot-scope="item">
|
|
|
+ <a-list-item-meta>
|
|
|
+ <div slot="title" style="color:red" :href="item.href">
|
|
|
+ <my-icon style="color: #fff; font-size: 16px;" type="icon-laba" />
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </a-list-item-meta>
|
|
|
+ <div style="color:red">
|
|
|
+ {{ item.time }}
|
|
|
+ </div>
|
|
|
+ </a-list-item>
|
|
|
+ </a-list>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="bottom-left">
|
|
|
+ <div class="title">出入库备件数量统计</div>
|
|
|
+ <div style="display:flex;justify-content: space-between;">
|
|
|
+ <div style="width: 33%;height:220px;">
|
|
|
+ <div style="padding:0 50px 20px 50px;display: flex; justify-content: space-between;font-size: 16px;">
|
|
|
+ <div>入库备件数量统计</div>
|
|
|
+ <div>入库总数：<span style="color:#228FFE; font-weight: bold;">33333</span></div>
|
|
|
+ </div>
|
|
|
+ <div id="chart3"></div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 33%;height:220px;">
|
|
|
+ <div style="padding:0 50px 20px 50px;display: flex; justify-content: space-between;font-size: 16px;">
|
|
|
+ <div>入库备件数量统计</div>
|
|
|
+ <div>入库总数：<span style="color:#00D98B; font-weight: bold;">33333</span></div>
|
|
|
+ </div>
|
|
|
+ <div id="chart33"></div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 33%;height:220px;">
|
|
|
+ <div style="padding:0 50px 20px 50px;display: flex; justify-content: space-between;font-size: 16px;">
|
|
|
+ <div>入库备件数量统计</div>
|
|
|
+ <div>入库总数：<span style="color:#F45E23; font-weight: bold;">33333</span></div>
|
|
|
+ </div>
|
|
|
+ <div id="chart333"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-right">
|
|
|
+ <div class="title">仓库核心数据</div>
|
|
|
+ <div style="padding: 10px 30px;">
|
|
|
+ <div style="padding:16px 0;">备件预警数据</div>
|
|
|
+ <div>
|
|
|
+ <table>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(list,i) in list2" :key="i" style="display: flex;justify-content: space-between;">
|
|
|
+ <td class="list-header" style="width:145px;">{{ list.year }}</td>
|
|
|
+ <td class="list-header" style="width:145px;">{{ list.sales }}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:0 30px;">
|
|
|
+ <div style="padding:16px 0;">备件关键数据</div>
|
|
|
+ <div>
|
|
|
+ <table>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(list,i) in list3" :key="i" style="display: flex;justify-content: space-between;">
|
|
|
+ <td class="list-header" style="width:145px;">{{ list.year }}</td>
|
|
|
+ <td class="list-header" style="width:145px;">{{ list.sales }}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { Chart, registerShape, registerTheme } from '@antv/g2'
|
|
|
export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ information: [
|
|
|
+ {
|
|
|
+ name: '项目管理通知',
|
|
|
+ time: '2022-4-7'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '项目管理通知',
|
|
|
+ time: '2022-4-7'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '项目管理通知',
|
|
|
+ time: '2022-4-7'
|
|
|
+ }
|
|
|
|
|
|
+ ],
|
|
|
+ list1: [
|
|
|
+ { year: '人工费用', sales: 382, date: '16%' },
|
|
|
+ { year: '备件费用', sales: 522, date: '16%' },
|
|
|
+ { year: '材料费用', sales: 612, date: '16%' },
|
|
|
+ { year: '备件费用', sales: 522, date: '16%' }
|
|
|
+ ],
|
|
|
+ list2: [
|
|
|
+ { year: '备件预警类别', sales: 382 },
|
|
|
+ { year: '备件预警数量', sales: 522 },
|
|
|
+ { year: '备件预警价值', sales: 612 }
|
|
|
+ ],
|
|
|
+ list3: [
|
|
|
+ { year: '备件领用总价值', sales: 382 },
|
|
|
+ { year: '采购入库总价值', sales: 522 }
|
|
|
+ ],
|
|
|
+ color: [
|
|
|
+ { color: '#E93C49' },
|
|
|
+ { color: '#FF6123' },
|
|
|
+ { color: '#E9AF00' },
|
|
|
+ { color: '#02B47B' }
|
|
|
+ ],
|
|
|
+ chart1: [{ value: 77.5 }],
|
|
|
+ chart2: [
|
|
|
+ { day: '采购入库', percent: 30, value: 300 },
|
|
|
+ { day: '闲置入库', percent: 20, value: 200 },
|
|
|
+ { day: '调拨入库', percent: 20, value: 200 },
|
|
|
+ { day: '其他入库', percent: 50, value: 500 }
|
|
|
+ ],
|
|
|
+ chart22: [
|
|
|
+ { day: '领用出库', percent: 30, value: 300 },
|
|
|
+ { day: '调拨出库', percent: 20, value: 200 },
|
|
|
+ { day: '报废出库', percent: 20, value: 200 },
|
|
|
+ { day: '其他出库', percent: 50, value: 500 }
|
|
|
+ ],
|
|
|
+ chart3: [
|
|
|
+ { day: '1月', percent: 6000 },
|
|
|
+ { day: '2月', percent: 4000 },
|
|
|
+ { day: '3月', percent: 5000 },
|
|
|
+ { day: '4月', percent: 6000 },
|
|
|
+ { day: '5月', percent: 7000 },
|
|
|
+ { day: '6月', percent: 6000 }
|
|
|
+ ],
|
|
|
+ chart4: [
|
|
|
+ { month: 'Jan', city: '出库备件价值', temperature: 70500 },
|
|
|
+ { month: 'Jan', city: '仓库总备件价值', temperature: 39050 },
|
|
|
+ { month: 'Jan', city: '入库备件价值', temperature: 40509 },
|
|
|
+ { month: 'Feb', city: '出库备件价值', temperature: 69500 },
|
|
|
+ { month: 'Feb', city: '仓库总备件价值', temperature: 42500 },
|
|
|
+ { month: 'Feb', city: '入库备件价值', temperature: 42500 },
|
|
|
+
|
|
|
+ { month: 'Mar', city: '出库备件价值', temperature: 90550 },
|
|
|
+ { month: 'Mar', city: '仓库总备件价值', temperature: 57500 },
|
|
|
+ { month: 'Mar', city: '入库备件价值', temperature: 70507 },
|
|
|
+
|
|
|
+ { month: 'Apr', city: '出库备件价值', temperature: 34550 },
|
|
|
+ { month: 'Apr', city: '仓库总备件价值', temperature: 89550 },
|
|
|
+ { month: 'Apr', city: '入库备件价值', temperature: 30550 },
|
|
|
+
|
|
|
+ { month: 'May', city: '出库备件价值', temperature: 68054 },
|
|
|
+ { month: 'May', city: '仓库总备件价值', temperature: 110590 },
|
|
|
+ { month: 'May', city: '入库备件价值', temperature: 40509 },
|
|
|
+
|
|
|
+ { month: 'Jun', city: '出库备件价值', temperature: 21505 },
|
|
|
+ { month: 'Jun', city: '仓库总备件价值', temperature: 65502 },
|
|
|
+ { month: 'Jun', city: '入库备件价值', temperature: 105002 },
|
|
|
+
|
|
|
+ { month: 'Jul', city: '出库备件价值', temperature: 25052 },
|
|
|
+ { month: 'Jul', city: '仓库总备件价值', temperature: 47050 },
|
|
|
+ { month: 'Jul', city: '入库备件价值', temperature: 47005 },
|
|
|
+
|
|
|
+ { month: 'Aug', city: '出库备件价值', temperature: 26055 },
|
|
|
+ { month: 'Aug', city: '仓库总备件价值', temperature: 86065 },
|
|
|
+ { month: 'Aug', city: '入库备件价值', temperature: 45656 },
|
|
|
+
|
|
|
+ { month: 'Sep', city: '出库备件价值', temperature: 23453 },
|
|
|
+ { month: 'Sep', city: '仓库总备件价值', temperature: 144542 },
|
|
|
+ { month: 'Sep', city: '入库备件价值', temperature: 144532 },
|
|
|
+
|
|
|
+ { month: 'Oct', city: '出库备件价值', temperature: 55183 },
|
|
|
+ { month: 'Oct', city: '仓库总备件价值', temperature: 54103 },
|
|
|
+ { month: 'Oct', city: '入库备件价值', temperature: 87103 },
|
|
|
+
|
|
|
+ { month: 'Nov', city: '出库备件价值', temperature: 76619 },
|
|
|
+ { month: 'Nov', city: '仓库总备件价值', temperature: 67676 },
|
|
|
+ { month: 'Nov', city: '入库备件价值', temperature: 74126 },
|
|
|
+
|
|
|
+ { month: 'Dec', city: '出库备件价值', temperature: 95666 },
|
|
|
+ { month: 'Dec', city: '仓库总备件价值', temperature: 46668 },
|
|
|
+ { month: 'Dec', city: '入库备件价值', temperature: 66788 }
|
|
|
+
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.getChart()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getChart () {
|
|
|
+ this.getChart1('chart1', this.chart1)
|
|
|
+ this.getChart2('chart2', this.chart2)
|
|
|
+ this.getChart2('chart22', this.chart22)
|
|
|
+ this.getChart3('chart3', this.chart3, '#228FFE')
|
|
|
+ this.getChart3('chart33', this.chart3, '#00D98B')
|
|
|
+ this.getChart3('chart333', this.chart3, '#F45E23')
|
|
|
+ this.getChart4('chart4', this.chart4)
|
|
|
+ },
|
|
|
+ getChart1 (id, data) {
|
|
|
+ registerShape('point', 'pointer', {
|
|
|
+ draw (cfg, container) {
|
|
|
+ const group = container.addGroup()
|
|
|
+ const center = this.parsePoint({ x: 0, y: 0 }) // 获取极坐标系下画布中心点
|
|
|
+ // 绘制指针
|
|
|
+ group.addShape('line', {
|
|
|
+ attrs: {
|
|
|
+ x1: center.x,
|
|
|
+ y1: center.y,
|
|
|
+ x2: cfg.x,
|
|
|
+ y2: cfg.y,
|
|
|
+ stroke: cfg.color,
|
|
|
+ lineWidth: 5,
|
|
|
+ lineCap: 'round'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ group.addShape('circle', {
|
|
|
+ attrs: {
|
|
|
+ x: center.x,
|
|
|
+ y: center.y,
|
|
|
+ r: 9.75,
|
|
|
+ stroke: cfg.color,
|
|
|
+ lineWidth: 4.5,
|
|
|
+ fill: '#fff'
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ return group
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const chart = new Chart({
|
|
|
+ container: id,
|
|
|
+ autoFit: true,
|
|
|
+ height: 300,
|
|
|
+ width: 300,
|
|
|
+ padding: [40, 0, 0, 0]
|
|
|
+ })
|
|
|
+ chart.data(data)
|
|
|
+ chart.scale('value', {
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ tickInterval: 100
|
|
|
+ })
|
|
|
+ chart.coordinate('polar', {
|
|
|
+ startAngle: (-10 / 8) * Math.PI,
|
|
|
+ endAngle: (2 / 8) * Math.PI,
|
|
|
+ radius: 0.9
|
|
|
+ })
|
|
|
+
|
|
|
+ chart.axis('100', false)
|
|
|
+ chart.axis('value', {
|
|
|
+ line: null,
|
|
|
+ label: {
|
|
|
+ formatter: (val) => {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ subTickLine: {
|
|
|
+ count: 4,
|
|
|
+ length: -15
|
|
|
+ },
|
|
|
+ tickLine: {
|
|
|
+ length: -15
|
|
|
+ },
|
|
|
+ grid: null
|
|
|
+ })
|
|
|
+ chart.legend(false)
|
|
|
+ chart
|
|
|
+ .line()
|
|
|
+ .position('value*1')
|
|
|
+ .color('#0B1A48')
|
|
|
+
|
|
|
+ // 绘制仪表盘背景
|
|
|
+ chart.annotation().arc({
|
|
|
+ top: false,
|
|
|
+ start: [0, 1],
|
|
|
+ end: [100, 1],
|
|
|
+ style: {
|
|
|
+ // 底灰色
|
|
|
+ stroke: '#CBCBCB',
|
|
|
+ lineWidth: 7,
|
|
|
+ lineDash: null
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 绘制指标
|
|
|
+ chart.annotation().arc({
|
|
|
+ start: [0, 1],
|
|
|
+ end: [data[0].value, 1],
|
|
|
+ style: {
|
|
|
+ stroke: '#00D98B',
|
|
|
+ lineWidth: 7,
|
|
|
+ lineDash: null
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 绘制指标数字
|
|
|
+ chart.annotation().text({
|
|
|
+ position: ['50%', '85%'],
|
|
|
+ content: '价值占比',
|
|
|
+ style: {
|
|
|
+ fontSize: 14,
|
|
|
+ fill: '#545454',
|
|
|
+ textAlign: 'center'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ chart.annotation().text({
|
|
|
+ position: ['50%', '50%'],
|
|
|
+ content: `${data[0].value} %`,
|
|
|
+ style: {
|
|
|
+ fontSize: 36,
|
|
|
+ fill: '#00D98B',
|
|
|
+ textAlign: 'center'
|
|
|
+ },
|
|
|
+ offsetY: 15
|
|
|
+ })
|
|
|
+
|
|
|
+ chart.render()
|
|
|
+ },
|
|
|
+ getChart2 (id, data) {
|
|
|
+ registerTheme('myTheme', {
|
|
|
+ columnWidthRatio: 0.1,
|
|
|
+ colors10: ['#0091F1', '#FDB628', '#00E4EC', '#EB6F49', '#9C24F0 ', '#00FF00', '#9661BC', '#F6903D', '#008685', '#F08BB4']
|
|
|
+ })
|
|
|
+ const chart = new Chart({
|
|
|
+ container: id,
|
|
|
+ autoFit: true,
|
|
|
+ height: 300,
|
|
|
+ width: 330
|
|
|
+ })
|
|
|
+ chart.data(data)
|
|
|
+ chart.scale('percent', {
|
|
|
+ formatter: (val) => {
|
|
|
+ val = val * 100 + '%'
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ })
|
|
|
+ chart.legend('day', {
|
|
|
+ position: 'right',
|
|
|
+ offsetY: -50,
|
|
|
+ itemName: {
|
|
|
+ style: {
|
|
|
+ fill: '#C3CAD9',
|
|
|
+ fontSize: 14
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ chart.coordinate('theta', {
|
|
|
+ radius: 0.75,
|
|
|
+ innerRadius: 0.8
|
|
|
+ })
|
|
|
+ chart.tooltip({
|
|
|
+ showTitle: false,
|
|
|
+ showMarkers: false,
|
|
|
+ itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
|
|
|
+ })
|
|
|
+ // 辅助文本
|
|
|
+
|
|
|
+ chart
|
|
|
+ .interval()
|
|
|
+ .adjust('stack')
|
|
|
+ .position('percent')
|
|
|
+ .color('day')
|
|
|
+ .label('percent', (percent) => {
|
|
|
+ return {
|
|
|
+ style: {
|
|
|
+ fill: '#fff'
|
|
|
+ },
|
|
|
+ content: (data) => {
|
|
|
+ return percent + '%'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .tooltip('day*percent', (item, percent) => {
|
|
|
+ percent = percent + '%'
|
|
|
+ return {
|
|
|
+ name: item,
|
|
|
+ value: percent
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ chart.interaction('element-active')
|
|
|
+ chart.theme('myTheme')
|
|
|
+ chart.render()
|
|
|
+ },
|
|
|
+ getChart3 (id, data, color) {
|
|
|
+ const chart = new Chart({
|
|
|
+ container: id,
|
|
|
+ width: 450,
|
|
|
+ height: 160,
|
|
|
+ appendPadding: [0, 0, 0, 50]
|
|
|
+ })
|
|
|
+ chart.data(data)
|
|
|
+ chart.scale({
|
|
|
+
|
|
|
+ percent: {
|
|
|
+ min: 0,
|
|
|
+ max: 10000,
|
|
|
+ range: [0, 1]
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ chart.tooltip({
|
|
|
+ showCrosshairs: true,
|
|
|
+ shared: true
|
|
|
+ })
|
|
|
+
|
|
|
+ chart.line().position('day*percent').shape('smooth')
|
|
|
+ chart.point().position('day*percent')
|
|
|
+ chart.theme({ 'styleSheet': { 'brandColor': color } })
|
|
|
+ chart.render()
|
|
|
+ },
|
|
|
+ getChart4 (id, data) {
|
|
|
+ registerTheme('myTheme', {
|
|
|
+ columnWidthRatio: 1,
|
|
|
+ colors10: ['#228FFE', '#00D98B', '#F45E23', '#EB6F49', '#9C24F0 ', '#00FF00', '#9661BC', '#F6903D', '#008685', '#F08BB4']
|
|
|
+ })
|
|
|
+ const chart = new Chart({
|
|
|
+ container: id,
|
|
|
+ autoFit: true,
|
|
|
+ height: 400
|
|
|
+ })
|
|
|
+
|
|
|
+ chart.data(data)
|
|
|
+ chart.scale({
|
|
|
+ month: {
|
|
|
+ range: [0, 1]
|
|
|
+ },
|
|
|
+ temperature: {
|
|
|
+ nice: true
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ chart.tooltip({
|
|
|
+ showCrosshairs: true,
|
|
|
+ shared: true
|
|
|
+ })
|
|
|
+
|
|
|
+ chart.axis('temperature', {
|
|
|
+ label: {
|
|
|
+ formatter: (val) => {
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ chart
|
|
|
+ .line()
|
|
|
+ .position('month*temperature')
|
|
|
+ .color('city')
|
|
|
+ .shape('smooth')
|
|
|
+ chart.theme('myTheme')
|
|
|
+
|
|
|
+ chart.render()
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="less" scoped>
|
|
|
+.view-container {
|
|
|
+width:1920px;
|
|
|
+height:1080px;
|
|
|
+color:white;
|
|
|
+font-family: Microsoft YaHei;
|
|
|
+background-color: RGBA(0, 7, 73, 0.8);
|
|
|
+padding:15px;
|
|
|
+}
|
|
|
+.view-container::after {
|
|
|
+ content: "";
|
|
|
+ width:1920px;
|
|
|
+ height:1080px;
|
|
|
+ background: url(../../assets/bgView.png);
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ position: absolute;
|
|
|
+ z-index: -1;
|
|
|
+}
|
|
|
+.top{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content:space-between;
|
|
|
+ .top-left{
|
|
|
+ .top-left-top{
|
|
|
+ width: 810px;
|
|
|
+height: 316px;
|
|
|
+background: #0B1A48;
|
|
|
+border-radius: 5px;
|
|
|
+margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ .top-left-bottom{
|
|
|
+ width: 810px;
|
|
|
+height: 394px;
|
|
|
+background: #0B1A48;
|
|
|
+border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .top-right{
|
|
|
+ .top-right-top{
|
|
|
+ padding:0 50px;
|
|
|
+ width: 1065px;
|
|
|
+height: 597px;
|
|
|
+background: #0B1A48;
|
|
|
+border-radius: 5px;
|
|
|
+margin-bottom: 15px;
|
|
|
|
|
|
+ }
|
|
|
+ .top-right-bottom{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 699px;
|
|
|
+height: 113px;
|
|
|
+background: #0B1A48;
|
|
|
+border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.bottom{
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 15px;
|
|
|
+ justify-content:space-between;
|
|
|
+ .bottom-left{
|
|
|
+ width: 1524px;
|
|
|
+height: 310px;
|
|
|
+background: #0B1A48;
|
|
|
+border-radius: 5px;
|
|
|
+ }
|
|
|
+ .bottom-right{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 351px;
|
|
|
+height: 438px;
|
|
|
+background: #0B1A48;
|
|
|
+border-radius: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.title{
|
|
|
+ width: 100%;
|
|
|
+ font-size: 24px;
|
|
|
+ padding: 15px;
|
|
|
+ text-align: center;
|
|
|
+ color: #D9EFFF;
|
|
|
+}
|
|
|
+.list-header{
|
|
|
+ margin:0;
|
|
|
+ padding: 0 10px;
|
|
|
+ width: 120px;
|
|
|
+height: 41px;
|
|
|
+font-size: 14px;
|
|
|
+color: #C3CAD9;
|
|
|
+font-weight: 400;
|
|
|
+font-family: Microsoft YaHei;
|
|
|
+display: flex;
|
|
|
+justify-content: center;
|
|
|
+align-items: center;
|
|
|
+ }
|
|
|
+ table,table tr th, table tr td { border:1px solid rgba(197, 196, 202, 0.1); }
|
|
|
+ table { border-collapse: collapse;}
|
|
|
</style>
|
