Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
d2b61fdc by 任超
Options

style:大屏样式

1 parent 37dda275
Inline Side-by-side
Showing 2 changed files with 14 additions and 23 deletions
1 <template> 1 <template>
2 <!-- 折线图 --> 2 <!-- 折线图 -->
3 <Echart 3 <Echart :options="options" id="bottomLeftChart" height="100%" width="100%"></Echart>
4 :options="options"
5 id="bottomLeftChart"
6 height="100%"
7 width="100%"
8 ></Echart>
9 </template> 4 </template>
10 5
11 <script> 6 <script>
12 import Echart from "@/common/echart"; 7 import Echart from "@/common/echart";
13 export default { 8 export default {
14 data() { 9 data () {
15 return { 10 return {
16 xAxisData: {}, 11 xAxisData: {},
17 yAxisData1: {}, 12 yAxisData1: {},
...@@ -30,7 +25,7 @@ export default { ...@@ -30,7 +25,7 @@ export default {
30 }, 25 },
31 }, 26 },
32 methods: { 27 methods: {
33 hexToRgba(hex, opacity) { 28 hexToRgba (hex, opacity) {
34 let rgbaColor = ""; 29 let rgbaColor = "";
35 let reg = /^#[\da-f]{6}$/i; 30 let reg = /^#[\da-f]{6}$/i;
36 if (reg.test(hex)) { 31 if (reg.test(hex)) {
...@@ -43,7 +38,7 @@ export default { ...@@ -43,7 +38,7 @@ export default {
43 }, 38 },
44 watch: { 39 watch: {
45 cdata: { 40 cdata: {
46 handler(newData) { 41 handler (newData) {
47 this.xAxisData = newData.echartData.map((v) => v.name); 42 this.xAxisData = newData.echartData.map((v) => v.name);
48 this.yAxisData1 = newData.echartData.map((v) => v.value1); 43 this.yAxisData1 = newData.echartData.map((v) => v.value1);
49 this.yAxisData2 = newData.echartData.map((v) => v.value2); 44 this.yAxisData2 = newData.echartData.map((v) => v.value2);
...@@ -65,13 +60,11 @@ export default { ...@@ -65,13 +60,11 @@ export default {
65 let html = ""; 60 let html = "";
66 params.forEach((v) => { 61 params.forEach((v) => {
67 html += `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000"> 62 html += `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000">
68 <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${ 63 <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${newData.color[v.componentIndex]
69 newData.color[v.componentIndex] 64 };"></span>
70 };"></span>
71 ${v.seriesName}.${v.name} 65 ${v.seriesName}.${v.name}
72 <span style="color:${ 66 <span style="color:${newData.color[v.componentIndex]
73 newData.color[v.componentIndex] 67 };font-weight:700;font-size: 18px">${v.value}</span>
74 };font-weight:700;font-size: 18px">${v.value}</span>
75 个`; 68 个`;
76 }); 69 });
77 return html; 70 return html;
...@@ -140,8 +133,8 @@ export default { ...@@ -140,8 +133,8 @@ export default {
140 { 133 {
141 name: newData.legendItem[0], 134 name: newData.legendItem[0],
142 type: "line", 135 type: "line",
143 smooth: true, //是否平滑 136 smooth: false, //是否平滑
144 showSymbol: false, 137 showSymbol: true,
145 symbol: "circle", 138 symbol: "circle",
146 symbolSize: 6, 139 symbolSize: 6,
147 zlevel: 3, 140 zlevel: 3,
...@@ -158,8 +151,8 @@ export default { ...@@ -158,8 +151,8 @@ export default {
158 { 151 {
159 name: newData.legendItem[1], 152 name: newData.legendItem[1],
160 type: "line", 153 type: "line",
161 smooth: true, 154 smooth: false,
162 showSymbol: false, 155 showSymbol: true,
163 symbol: "circle", 156 symbol: "circle",
164 symbolSize: 8, 157 symbolSize: 8,
165 zlevel: 3, 158 zlevel: 3,
...@@ -176,8 +169,8 @@ export default { ...@@ -176,8 +169,8 @@ export default {
176 { 169 {
177 name: newData.legendItem[2], 170 name: newData.legendItem[2],
178 type: "line", 171 type: "line",
179 smooth: true, 172 smooth: false,
180 showSymbol: false, 173 showSymbol: true,
181 symbol: "circle", 174 symbol: "circle",
182 symbolSize: 8, 175 symbolSize: 8,
183 zlevel: 3, 176 zlevel: 3,
......
...@@ -76,7 +76,6 @@ export default { ...@@ -76,7 +76,6 @@ export default {
76 itemStyle: { 76 itemStyle: {
77 normal: { 77 normal: {
78 // 这里设置圆角 78 // 这里设置圆角
79 barBorderRadius: [0, 10, 10, 0],
80 color: "#16F4D2", 79 color: "#16F4D2",
81 } 80 }
82 }, 81 },
...@@ -89,7 +88,6 @@ export default { ...@@ -89,7 +88,6 @@ export default {
89 itemStyle: { 88 itemStyle: {
90 normal: { 89 normal: {
91 // 这里设置圆角 90 // 这里设置圆角
92 barBorderRadius: [0, 10, 10, 0],
93 color: "#C99E68" 91 color: "#C99E68"
94 }, 92 },
95 }, 93 },
......