+
@@ -79,13 +82,13 @@ export default {
.left1 {
position: absolute;
- top: 20px;
+ top: 3px;
left: 24px;
}
.left2 {
position: absolute;
- top: 245px;
- left: 24px;
+ top: 3.151042rem /* 605/192 */;
+ left: .125rem /* 24/192 */;
}
.center1 {
position: absolute;
diff --git a/src/views/bigScreen/drivingCabin/left2.vue b/src/views/bigScreen/drivingCabin/left2.vue
index f133b49..470323f 100644
--- a/src/views/bigScreen/drivingCabin/left2.vue
+++ b/src/views/bigScreen/drivingCabin/left2.vue
@@ -1,12 +1,11 @@
-
@@ -15,7 +14,7 @@
import scalseBox from '../components/scaleBox.vue'
import bigScreenHead from "../components/bigScreenHead/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
-import container2 from "../components/container2/index.vue";
+import container3 from './components/container3/index.vue'
import echarts from 'echarts'
@@ -28,92 +27,13 @@ export default {
scalseBox,
bigScreenHead,
rocketTit,
- container2,
+ container3,
},
data () {
return {
dateRange: [],
- chart: null,
- option: {
- backgroundColor: '',
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- right: '10',
- data: ['品类1', '品类2', '品类3'],
- textStyle: {
- color: '#fff'
- },
- },
- grid: {
- left: '3%',
- right: '6%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['03-21', '03-22', '03-23', '03-24', '03-25', '03-26', '03-27'],
- splitLine: {
- show: false//不显示网格线
- },
- axisLine: {
- lineStyle: {
- color: 'rgb(255, 255, 255)'
- },
- },
- axisLabel: {
- interval: 0,
- rotate: 320
- }
- },
- yAxis: {
- type: 'value',
- splitLine: {
- show: false//不显示网格线
- },
- splitArea: {
- show: false//不显示网格区域
- },
- axisLine: {
- lineStyle: {
- color: 'rgb(255, 255, 255)'
- },
- }
- },
- series: [
- {
- name: '品类1',
- type: 'line',
- data: [120, 132, 101, 134, 90, 230, 210],
- smooth: false,
- lineStyle: {
- color: 'rgba(203, 97, 79, 1)'
- },
- },
- {
- name: '品类2',
- type: 'line',
- data: [220, 182, 191, 234, 290, 330, 310],
- smooth: false,
- lineStyle: {
- color: 'rgba(215, 170, 34, 1)'
- },
- },
- {
- name: '品类3',
- type: 'line',
- data: [150, 232, 201, 154, 190, 330, 410],
- smooth: false,
- lineStyle: {
- color: 'rgba(121, 139, 219, 1)'
- },
- },
- ]
- },
+
}
},
mounted () {
@@ -130,8 +50,134 @@ export default {
},
methods: {
initChart () {
- this.chart = echarts.init(this.$refs.chart, 'macarons');
- this.chart.setOption(this.option);
+ const { DualAxes } = G2Plot
+
+ const uvBillData = [
+ { time: '2019-03', value: 350, type: '利润预测' },
+ { time: '2019-04', value: 900, type: '利润预测' },
+ { time: '2019-05', value: 300, type: '利润预测' },
+ { time: '2019-06', value: 450, type: '利润预测' },
+ { time: '2019-07', value: 470, type: '利润预测' },
+ { time: '2019-03', value: 220, type: '利润' },
+ { time: '2019-04', value: 300, type: '利润' },
+ { time: '2019-05', value: 250, type: '利润' },
+ { time: '2019-06', value: 220, type: '利润' },
+ { time: '2019-07', value: 362, type: '利润' },
+ ];
+
+ const transformData = [
+ { time: '2019-03', count: 800 },
+ { time: '2019-04', count: 600 },
+ { time: '2019-05', count: 400 },
+ { time: '2019-06', count: 380 },
+ { time: '2019-07', count: 220 },
+ ];
+
+ const dualAxes = new DualAxes(this.$refs.chart, {
+ data: [uvBillData, transformData],
+ xField: 'time',
+ yField: ['value', 'count'],
+ xAxis: {
+ grid: {
+ line: {
+ style: {
+ stroke: 'black',
+ lineWidth: 2,
+ lineDash: [4, 5],
+ strokeOpacity: 0,
+ cursor: 'pointer'
+ }
+ }
+ }
+ },
+ yAxis: [
+ {
+ grid: {
+ line: {
+ style: {
+ stroke: 'rgba(255, 255, 255, 0.5)',
+ lineWidth: 1,
+ }
+ }
+ },
+ min: 0,
+ minLimit: 0,
+ },
+ {
+
+ line: {
+ style: {
+ stroke: 'rgba(255, 255, 255, 0.5)',
+ lineWidth: 1,
+ }
+ },
+ label: {
+ style: {
+ fill: '#ffffff',
+ strokeOpacity: .5,
+ }
+ },
+ min: 0,
+minLimit: 0,
+ },
+ ],
+ // yAxis: {
+ // pv: {
+ // tickCount: 5
+ // },
+ // uv: {
+ // tickCount: 5
+ // }
+ // },
+legend: {
+ itemName: {
+ style: {
+ fill: '#fff',
+ },
+ },
+},
+slider:{
+ start: 0.1,
+ end: 0.5,
+ textStyle: {
+ fill: '#ffffff'
+ }
+},
+ geometryOptions: [
+ {
+ geometry: 'column',
+ seriesField: 'type',
+ columnStyle: ({ type }) => {
+ if (type === '利润') {
+ return {
+ lineWidth: 10
+ };
+ }
+ return {
+ lineWidth: 0
+ };;
+ },
+ color: ({ type }) => {
+ if (type === '利润') {
+ return 'l(0) 0:#B5D3FE 1:#7EA7FC';
+ }
+ return 'rgba(145, 213, 254, .3)';
+ },
+ },
+ {
+ geometry: 'line',
+ lineStyle: {
+ lineWidth: 2,
+ stroke: '#55C5A2',
+ },
+
+ },
+
+ ],
+ });
+
+ dualAxes.render();
+
}
}
}
@@ -153,4 +199,11 @@ export default {
color: rgba(16, 152, 255, 1);
line-height: 35px;
}
+
+.chart {
+ padding: .052083rem /* 10/192 */ .15625rem /* 30/192 */;
+ box-sizing: border-box;
+ height: 100%;
+ width: 100%;
+}
\ No newline at end of file