-
+
-
+
@@ -81,11 +81,13 @@
import Chart from "@/components/board/Chart";
import chinaMap from "@/views/model/china2.json";
import * as echarts from "echarts";
+import {mixData} from "@/api/board/mixData";
let getDateIntervalFun = null
let time1 = () => {
}
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+let intervalFun = null
export default {
name: "Liner",
components: {
@@ -165,1348 +167,1653 @@ export default {
},
],
time: '',
- date: ''
- }
- },
- created() {
- const getDate = () => {
- let date = new Date()
- let YYYY = date.getFullYear()
- let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
- let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
- let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
- let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
- let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
- this.date = `${YYYY} - ${MM} - ${dd}`
- this.time = `${HH} : ${mm} : ${ss}`
- }
- getDate()
- getDateIntervalFun = setInterval(getDate, 1000)
- },
- mounted() {
- let points = [
- {value: [118.8062, 31.9208], itemStyle: {color: "#4ab2e5"}},
- {value: [127.9688, 45.368], itemStyle: {color: "#4fb6d2"}},
- {value: [110.3467, 41.4899], itemStyle: {color: "#52b9c7"}},
- {value: [125.8154, 44.2584], itemStyle: {color: "#5abead"}},
- {value: [116.4551, 40.2539], itemStyle: {color: "#f34e2b"}},
- {value: [123.1238, 42.1216], itemStyle: {color: "#f56321"}},
- {value: [114.4995, 38.1006], itemStyle: {color: "#f56f1c"}},
- {value: [117.4219, 39.4189], itemStyle: {color: "#f58414"}},
- {value: [112.3352, 37.9413], itemStyle: {color: "#f58f0e"}},
- {value: [109.1162, 34.2004], itemStyle: {color: "#f5a305"}},
- {value: [103.5901, 36.3043], itemStyle: {color: "#e7ab0b"}},
- {value: [106.3586, 38.1775], itemStyle: {color: "#dfae10"}},
- {value: [101.4038, 36.8207], itemStyle: {color: "#d5b314"}},
- {value: [103.9526, 30.7617], itemStyle: {color: "#c1bb1f"}},
- {value: [108.384366, 30.439702], itemStyle: {color: "#b9be23"}},
- {value: [113.0823, 28.2568], itemStyle: {color: "#a6c62c"}},
- {value: [102.9199, 25.46639], itemStyle: {color: "#96cc34"}},
- {value: [115.179594, 34.647758]},
- ];
+ date: '',
- let plantCap = [
- {
- name: "外观时尚",
- value: "24231",
- },
- {
- name: "低碳环保",
- value: "36232",
- },
- {
- name: "高端智能",
- value: "45423",
- },
- {
- name: "老品牌",
- value: "24542",
- },
- ];
- let datalist = [
- {
- offset: [56, 48],
- symbolSize: 120,
- opacity: 0.95,
- color: "#f467ce",
- },
- {
- offset: [35, 80],
- symbolSize: 95,
- opacity: 0.88,
- color: "#7aabe2",
- },
- {
- offset: [20, 43],
- symbolSize: 90,
- opacity: 0.84,
- color: "#ff7123",
- },
- {
- offset: [83, 30],
- symbolSize: 90,
- opacity: 0.8,
- color: "#ffc400",
- },
- {
- offset: [36, 20],
- symbolSize: 65,
- opacity: 0.75,
- color: "#5e333f",
- },
- {
- offset: [64, 10],
- symbolSize: 70,
- opacity: 0.7,
- color: "#6b3442",
- },
- {
- offset: [75, 75],
- symbolSize: 60,
- opacity: 0.68,
- color: "#8a3647",
- },
- {
- offset: [88, 62],
- symbolSize: 50,
- opacity: 0.6,
- color: "#68333f",
- },
- ];
- let datas = [];
- for (var i = 0; i < plantCap.length; i++) {
- var item = plantCap[i];
- var itemToStyle = datalist[i];
- datas.push({
- name: item.value + "\n" + item.name,
- value: itemToStyle.offset,
- symbolSize: itemToStyle.symbolSize,
- label: {
- normal: {
- textStyle: {
- fontSize: 11,
- },
- },
- },
- itemStyle: {
- normal: {
- color: itemToStyle.color,
- opacity: itemToStyle.opacity,
- },
- },
- });
- }
-
- echarts.registerMap('china', chinaMap);
- this.$refs.chart1 && this.$refs.chart1.setData(this.chart1Option());
- this.$refs.chart4.setData({
- tooltip: {},
- grid: {
- top: "25%",
- left: "5%",
- right: "5%",
- bottom: "8%",
- containLabel: true,
- },
- legend: {
- itemGap: 50,
- top: "2%",
- textStyle: {
- color: "#f9f9f9",
- borderColor: "#fff",
- },
- },
- xAxis: [
- {
- type: "category",
- boundaryGap: true,
- axisLine: {
- //坐标轴轴线相关设置。数学上的x轴
- show: true,
- lineStyle: {
- color: "#f9f9f9",
- },
- },
- axisLabel: {
- interval: 0,
- //坐标轴刻度标签的相关设置
- textStyle: {
- color: "#d1e6eb",
- margin: 15,
- },
- },
- axisTick: {
- show: false,
- },
- data: ["预装检漏", "发泡质检", "电检", "低压捡漏", "高压捡漏", "制冷性能"],
- },
- ],
- yAxis: [
- {
- type: "value",
- min: 0,
- // max: 140,
- splitNumber: 7,
- splitLine: {
- show: true,
- lineStyle: {
- color: "#0a3256",
- },
- },
- axisLine: {
- show: false,
- },
- axisLabel: {
- margin: 5,
- textStyle: {
- fontSize: 0.5 * vw,
- color: "#d1e6eb",
- },
- },
- axisTick: {
- show: false,
- },
- },
- {
- type: "value",
- min: 90,
- max: 100,
- splitLine: {
- show: true,
- lineStyle: {
- color: "#0a3256",
- },
- },
- axisLine: {
- show: false,
- },
- axisLabel: {
- margin: 5,
- textStyle: {
- fontSize: 0.5 * vw,
- color: "#d1e6eb",
- },
- formatter: '{value}%'
- },
- axisTick: {
- show: false,
- },
- },
- ],
- series: [
+ RequestDataSet: [
{
- name: "质检数量",
- type: "bar",
- barWidth: 20,
- tooltip: {
- show: false,
- },
- label: {
- show: true,
- position: "top",
- textStyle: {
- fontSize: 0.5 * vw,
- color: "#fff",
- },
- },
- itemStyle: {
- normal: {
- color: '#72b3fe'
- },
- },
- data: [315, 309, 311, 311, 311, 313],
- },
- {
- name: "合格率",
- type: "line",
- yAxisIndex: 1,
- // smooth: true, //是否平滑曲线显示
- // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
- showAllSymbol: true,
- symbol: "emptyCircle",
- symbolSize: 6,
- lineStyle: {
- normal: {
- color: "#ecf3ff", // 线条颜色
- },
- borderColor: "#6d88bf",
- },
- label: {
- show: true,
- position: "top",
- textStyle: {
- fontSize: 0.5 * vw,
- color: "#fff",
- },
- formatter: '{c}%'
- },
- itemStyle: {
- normal: {
- color: "#28ffb3",
- },
- },
- tooltip: {
- show: false,
- },
- data: [99.74, 99.68, 99.76, 99.75, 99.58, 99.57, 99.43],
- },
- ],
- })
- this.$refs.chart5.setData({
- tooltip: {},
- grid: {
- top: "25%",
- left: "5%",
- right: "5%",
- bottom: "8%",
- containLabel: true,
- },
- legend: {
- itemGap: 50,
- top: "2%",
- textStyle: {
- color: "#f9f9f9",
- borderColor: "#fff",
- },
- },
- xAxis: [
- {
- type: "category",
- boundaryGap: true,
- axisLine: {
- //坐标轴轴线相关设置。数学上的x轴
- show: true,
- lineStyle: {
- color: "#f9f9f9",
- },
- },
- axisLabel: {
- //坐标轴刻度标签的相关设置
- textStyle: {
- color: "#d1e6eb",
- margin: 15,
- },
- },
- axisTick: {
- show: false,
- },
- data: ["1-10", "1-11", "1-12", "1-13", "1-14", "1-15", "1-16"],
- },
- ],
- yAxis: [
- {
- type: "value",
- // min: 0,
- // max: 140,
- splitNumber: 7,
- splitLine: {
- show: true,
- lineStyle: {
- color: "#0a3256",
- },
- },
- axisLine: {
- show: false,
- },
- axisLabel: {
- margin: 5,
- textStyle: {
- fontSize: 0.5 * vw,
- color: "#d1e6eb",
- },
- },
- axisTick: {
- show: false,
- },
+ e: 'data-01',
+ t: 4,
+ f: (e) => {
+ let data = {
+ yNameOne: [],
+ yData: []
+ }
+ e.forEach((i, k) => {
+ data.yNameOne.push(i.COLUMN_A)
+ data.yData.push(i.COLUMN_B)
+ })
+ const chart1Option = (data, id) => {
+ clearInterval(time1)
+ let bgBar = []
+ data.yData.forEach(() => {
+ bgBar.push(100)
+ })
+ let option = {
+ grid: {
+ left: "0%",
+ right: "15%",
+ bottom: "0%",
+ top: "0%",
+ containLabel: true,
+ },
+ dataZoom: [],
+ xAxis: {
+ show: false,
+ },
+ yAxis: [
+ {
+ show: true,
+ data: data.yNameOne,
+ inverse: true,
+ axisLine: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ color: "#fff",
+ // margin:150,
+ fontSize: 0.75 * vw,
+ textStyle: {
+ textAlign: 'center'
+ },
+ },
+ },
+ ],
+ series: [
+ {
+ name: "条",
+ type: "bar",
+ yAxisIndex: 0,
+ data: data.yData,
+ barWidth: '80%',
+ itemStyle: {
+ normal: {
+ barBorderRadius: 30,
+ color: function (params) {
+ return 'green'
+ },
+ },
+ },
+ },
+ {
+ name: "框",
+ type: "bar",
+ yAxisIndex: 0,
+ barGap: "-100%",
+ data: bgBar,
+ barWidth: '80%',
+ label: {
+ show: true,
+ position: "right",
+ textStyle: {
+ color: "#fff",
+ fontSize: 0.75 * vw
+ },
+ formatter: function (val, index, e) {
+ return data.yData[val.dataIndex] + '%'
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: "none",
+ borderColor: "#00c1de",
+ borderWidth: 1,
+ barBorderRadius: 15,
+ },
+ },
+ },
+ ],
+ };
+
+ if (data.yNameOne.length > 8) {
+ option.dataZoom.push({
+ show: false,
+ type: 'slider',
+ bottom: '0%',
+ yAxisIndex: 0,
+ height: 12,
+ start: 0,
+ end: 1 / (data.yNameOne.length / 9) * 100,
+ textStyle: {
+ fontSize: 0,
+ color: 'rgba(0,0,0,0)'
+ }
+ })
+
+ let step = 1 / (data.yNameOne.length / 9) * 100
+ time1 = setInterval(() => {
+ option.dataZoom[0].end += step
+ option.dataZoom[0].start += step
+ if (option.dataZoom[0].start >= 100) {
+ option.dataZoom[0].start = 0
+ option.dataZoom[0].end = step
+ }
+ if (option.dataZoom[0].end >= 100) {
+ option.dataZoom[0].end = 100
+ option.dataZoom[0].start = option.dataZoom[0].end - step
+ }
+ this.$refs.chart1 && this.$refs.chart1.setData(option);
+ }, 6000)
+ // time()
+ }
+ return option
+ }
+ this.$refs.chart1 && this.$refs.chart1.setData(chart1Option(data));
+ }
},
{
- type: "value",
- // min: 90,
- max: 100,
- splitLine: {
- show: true,
- lineStyle: {
- color: "#0a3256",
- },
- },
- axisLine: {
- show: false,
- },
- axisLabel: {
- margin: 5,
- textStyle: {
- fontSize: 0.5 * vw,
- color: "#d1e6eb",
- },
- formatter: '{value}%'
- },
- axisTick: {
- show: false,
- },
+ e: 'data-02',
+ t: 4,
+ f: (e) => {
+
+ this.$refs.chart4.setData({
+ tooltip: {},
+ grid: {
+ top: "25%",
+ left: "5%",
+ right: "5%",
+ bottom: "8%",
+ containLabel: true,
+ },
+ legend: {
+ itemGap: 50,
+ top: "2%",
+ textStyle: {
+ color: "#f9f9f9",
+ borderColor: "#fff",
+ },
+ },
+ xAxis: [
+ {
+ type: "category",
+ boundaryGap: true,
+ axisLine: {
+ //坐标轴轴线相关设置。数学上的x轴
+ show: true,
+ lineStyle: {
+ color: "#f9f9f9",
+ },
+ },
+ axisLabel: {
+ interval: 0,
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: "#d1e6eb",
+ margin: 15,
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ data: e.map(v => v.COLUMN_A),
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ min: 0,
+ // max: 140,
+ splitNumber: 7,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: "#0a3256",
+ },
+ },
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ margin: 5,
+ textStyle: {
+ fontSize: 0.5 * vw,
+ color: "#d1e6eb",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ {
+ type: "value",
+ min: 90,
+ max: 100,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: "#0a3256",
+ },
+ },
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ margin: 5,
+ textStyle: {
+ fontSize: 0.5 * vw,
+ color: "#d1e6eb",
+ },
+ formatter: '{value}%'
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ ],
+ series: [
+ {
+ name: "质检数量",
+ type: "bar",
+ barWidth: 20,
+ tooltip: {
+ show: false,
+ },
+ label: {
+ show: true,
+ position: "top",
+ textStyle: {
+ fontSize: 0.5 * vw,
+ color: "#fff",
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: '#72b3fe'
+ },
+ },
+ data: e.map(v => v.COLUMN_B),
+ },
+ {
+ name: "合格率",
+ type: "line",
+ yAxisIndex: 1,
+ // smooth: true, //是否平滑曲线显示
+ // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
+ showAllSymbol: true,
+ symbol: "emptyCircle",
+ symbolSize: 6,
+ lineStyle: {
+ normal: {
+ color: "#ecf3ff", // 线条颜色
+ },
+ borderColor: "#6d88bf",
+ },
+ label: {
+ show: true,
+ position: "top",
+ textStyle: {
+ fontSize: 0.5 * vw,
+ color: "#fff",
+ },
+ formatter: '{c}%'
+ },
+ itemStyle: {
+ normal: {
+ color: "#28ffb3",
+ },
+ },
+ tooltip: {
+ show: false,
+ },
+ data: e.map(v => v.COLUMN_C),
+ },
+ ],
+ })
+ }
},
- ],
- series: [
{
- name: "产量",
- type: "bar",
- barWidth: 20,
- tooltip: {
- show: false,
- },
- label: {
- show: true,
- position: "top",
- textStyle: {
- fontSize: 0.5 * vw,
- color: "#fff",
- },
- },
- itemStyle: {
- normal: {
- color: '#9fe080'
- },
- },
- data: [200, 350, 400, 350, 450, 500, 343],
+ e: 'data-03',
+ t: 4,
+ f: (e) => {
+ this.$refs.chart5.setData({
+ tooltip: {},
+ grid: {
+ top: "25%",
+ left: "5%",
+ right: "5%",
+ bottom: "8%",
+ containLabel: true,
+ },
+ legend: {
+ itemGap: 50,
+ top: "2%",
+ textStyle: {
+ color: "#f9f9f9",
+ borderColor: "#fff",
+ },
+ },
+ xAxis: [
+ {
+ type: "category",
+ boundaryGap: true,
+ axisLine: {
+ //坐标轴轴线相关设置。数学上的x轴
+ show: true,
+ lineStyle: {
+ color: "#f9f9f9",
+ },
+ },
+ axisLabel: {
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: "#d1e6eb",
+ margin: 15,
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ data: e.map(v => v.COLUMN_A),
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ // min: 0,
+ // max: 140,
+ splitNumber: 7,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: "#0a3256",
+ },
+ },
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ margin: 5,
+ textStyle: {
+ fontSize: 0.5 * vw,
+ color: "#d1e6eb",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ {
+ type: "value",
+ // min: 90,
+ max: 100,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: "#0a3256",
+ },
+ },
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ margin: 5,
+ textStyle: {
+ fontSize: 0.5 * vw,
+ color: "#d1e6eb",
+ },
+ formatter: '{value}%'
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ ],
+ series: [
+ {
+ name: "产量",
+ type: "bar",
+ barWidth: 20,
+ tooltip: {
+ show: false,
+ },
+ label: {
+ show: true,
+ position: "top",
+ textStyle: {
+ fontSize: 0.5 * vw,
+ color: "#fff",
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: '#9fe080'
+ },
+ },
+ data: e.map(v => v.COLUMN_B),
+ },
+ {
+ name: "订单履约率",
+ type: "line",
+ yAxisIndex: 1,
+ // smooth: true, //是否平滑曲线显示
+ // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
+ showAllSymbol: true,
+ symbol: "emptyCircle",
+ symbolSize: 6,
+ lineStyle: {
+ normal: {
+ color: "#ecf3ff", // 线条颜色
+ },
+ borderColor: "#6d88bf",
+ },
+ label: {
+ show: true,
+ position: "top",
+ textStyle: {
+ fontSize: 0.5 * vw,
+ color: "#fff",
+ },
+ formatter: '{c}%'
+ },
+ itemStyle: {
+ normal: {
+ color: "#28ffb3",
+ },
+ },
+ tooltip: {
+ show: false,
+ },
+ data: e.map(v => v.COLUMN_C),
+ },
+ ],
+ })
+ }
},
{
- name: "订单履约率",
- type: "line",
- yAxisIndex: 1,
- // smooth: true, //是否平滑曲线显示
- // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
- showAllSymbol: true,
- symbol: "emptyCircle",
- symbolSize: 6,
- lineStyle: {
- normal: {
- color: "#ecf3ff", // 线条颜色
- },
- borderColor: "#6d88bf",
- },
- label: {
- show: true,
- position: "top",
- textStyle: {
- fontSize: 0.5 * vw,
- color: "#fff",
- },
- formatter: '{c}%'
- },
- itemStyle: {
- normal: {
- color: "#28ffb3",
- },
- },
- tooltip: {
- show: false,
- },
- data: [100, 100, 100, 100, 100, 100, 46],
- },
- ],
- })
- this.$refs.chart6.setData({
+ e: 'data-04',
+ t: 4,
+ f: (e) => {
+ console.log(e)
+ let points = [
+ {value: [118.8062, 31.9208], itemStyle: {color: "#4ab2e5"}},
+ {value: [127.9688, 45.368], itemStyle: {color: "#4fb6d2"}},
+ {value: [110.3467, 41.4899], itemStyle: {color: "#52b9c7"}},
+ {value: [125.8154, 44.2584], itemStyle: {color: "#5abead"}},
+ {value: [116.4551, 40.2539], itemStyle: {color: "#f34e2b"}},
+ {value: [123.1238, 42.1216], itemStyle: {color: "#f56321"}},
+ {value: [114.4995, 38.1006], itemStyle: {color: "#f56f1c"}},
+ {value: [117.4219, 39.4189], itemStyle: {color: "#f58414"}},
+ {value: [112.3352, 37.9413], itemStyle: {color: "#f58f0e"}},
+ {value: [109.1162, 34.2004], itemStyle: {color: "#f5a305"}},
+ {value: [103.5901, 36.3043], itemStyle: {color: "#e7ab0b"}},
+ {value: [106.3586, 38.1775], itemStyle: {color: "#dfae10"}},
+ {value: [101.4038, 36.8207], itemStyle: {color: "#d5b314"}},
+ {value: [103.9526, 30.7617], itemStyle: {color: "#c1bb1f"}},
+ {value: [108.384366, 30.439702], itemStyle: {color: "#b9be23"}},
+ {value: [113.0823, 28.2568], itemStyle: {color: "#a6c62c"}},
+ {value: [102.9199, 25.46639], itemStyle: {color: "#96cc34"}},
+ {value: [115.179594, 34.647758]},
+ ];
+ this.$refs.chart6.setData({
- geo: {
- map: "china",
- aspectScale: 0.75, //长宽比
- zoom: 1.1,
- roam: false,
- label: {
- normal: {
- show: false,
- },
- },
- itemStyle: {
- normal: {
- areaColor: {
- type: "radial",
- x: 0.5,
- y: 0.5,
- r: 0.8,
- colorStops: [
+ geo: {
+ map: "china",
+ aspectScale: 0.75, //长宽比
+ zoom: 1.1,
+ roam: false,
+ label: {
+ normal: {
+ show: false,
+ },
+ },
+ itemStyle: {
+ normal: {
+ areaColor: {
+ type: "radial",
+ x: 0.5,
+ y: 0.5,
+ r: 0.8,
+ colorStops: [
+ {
+ offset: 0,
+ color: "#09132c", // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: "#274d68", // 100% 处的颜色
+ },
+ ],
+ globalCoord: true, // 缺省为 false
+ },
+ shadowColor: "rgb(58,115,192)",
+ shadowOffsetX: 2,
+ shadowOffsetY: 2.3,
+ },
+ emphasis: {
+ areaColor: "#2AB8FF",
+ borderWidth: 0,
+ color: "green",
+ label: {
+ show: false,
+ },
+ },
+ },
+ regions: [
+ {
+ name: "南海诸岛",
+ itemStyle: {
+ areaColor: "rgba(0, 10, 52, 1)",
+
+ borderColor: "rgba(0, 10, 52, 1)",
+ normal: {
+ opacity: 0,
+ label: {
+ show: false,
+ color: "#009cc9",
+ },
+ },
+ },
+ },
+ ],
+ },
+ series: [
+ {
+ type: "map",
+ roam: false,
+ label: {
+ normal: {
+ show: false,
+ },
+ },
+
+ itemStyle: {
+ normal: {
+ borderColor: "rgb(147, 235, 248)",
+ borderWidth: 1,
+ areaColor: {
+ type: "radial",
+ x: 0.5,
+ y: 0.5,
+ r: 0.8,
+ colorStops: [
+ {
+ offset: 0,
+ color: "#09132c", // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: "#274d68", // 100% 处的颜色
+ },
+ ],
+ globalCoord: true, // 缺省为 false
+ },
+ },
+ emphasis: {
+ areaColor: "rgb(46,229,206)",
+ // shadowColor: 'rgb(12,25,50)',
+ borderWidth: 0.1,
+ },
+ },
+ zoom: 1.1,
+ // roam: false,
+ map: "china", //使用
+ // data: this.difficultData //热力图数据 不同区域 不同的底色
+ },
{
- offset: 0,
- color: "#09132c", // 0% 处的颜色
+ type: "effectScatter",
+ coordinateSystem: "geo",
+ showEffectOn: "render",
+ zlevel: 1,
+ rippleEffect: {
+ period: 15,
+ scale: 4,
+ brushType: "fill",
+ },
+ hoverAnimation: true,
+ label: {
+ normal: {
+ formatter: "{b}",
+ position: "right",
+ offset: [15, 0],
+ color: "#1DE9B6",
+ show: true,
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "#1DE9B6",
+ shadowBlur: 10,
+ shadowColor: "#333",
+ },
+ },
+ symbolSize: 2,
+ data: points,
},
{
- offset: 1,
- color: "#274d68", // 100% 处的颜色
+ type: "lines",
+ zlevel: 2,
+ effect: {
+ show: true,
+ period: 2, //箭头指向速度，值越小速度越快
+ trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
+ symbol: "arrow", //箭头图标
+ symbolSize: 5, //图标大小
+ },
+ lineStyle: {
+ normal: {
+ color: "#1DE9B6",
+ width: 1, //线条宽度
+ opacity: 0.1, //尾迹线条透明度
+ curveness: 0.3, //尾迹线条曲直度
+ },
+ },
+ data: [
+ {
+ coords: [
+ [115.179594, 34.647758],
+ [118.8062, 31.9208],
+ ],
+ lineStyle: {color: "#4ab2e5"},
+ },
+ {
+ coords: [
+ [115.179594, 34.647758],
+ [127.9688, 45.368],
+ ],
+ lineStyle: {color: "#4fb6d2"},
+ },
+ {
+ coords: [
+ [115.179594, 34.647758],
+ [110.3467, 41.4899],
+ ],
+ lineStyle: {color: "#52b9c7"},
+ },
+ {
+ coords: [
+ [115.179594, 34.647758],
+ [125.8154, 44.2584],
+ ],
+ lineStyle: {color: "#5abead"},
+ },
+ {
+ coords: [
+ [115.179594, 34.647758],
+ [116.4551, 40.2539],
+ ],
+ lineStyle: {color: "#f34e2b"},
+ },
+ {
+ coords: [
+ [115.179594, 34.647758],
+ [123.1238, 42.1216],
+ ],
+ lineStyle: {color: "#f56321"},
+ },
+ {
+ coords: [
+ [115.179594, 34.647758],
+ [114.4995, 38.1006],
+ ],
+ lineStyle: {color: "#f56f1c"},
+ },
+ {
+ coords: [
+ [115.179594, 34.647758],
+ [117.4219, 39.4189],
+ ],
+ lineStyle: {color: "#f58414"},
+ },
+ {
+ coords: [
+ [115.179594, 34.647758],
+ [112.3352, 37.9413],
+ ],
+ lineStyle: {color: "#f58f0e"},
+ },
+ {
+ coords: [
+ [115.179594, 34.647758],
+ [109.1162, 34.2004],
+ ],
+ lineStyle: {color: "#f5a305"},
+ },
+ {
+ coords: [
+ [115.179594, 34.647758],
+ [103.5901, 36.3043],
+ ],
+ lineStyle: {color: "#e7ab0b"},
+ },
+ {
+ coords: [
+ [115.179594, 34.647758],
+ [106.3586, 38.1775],
+ ],
+ lineStyle: {color: "#dfae10"},
+ },
+ {
+ coords: [
+ [115.179594, 34.647758],
+ [101.4038, 36.8207],
+ ],
+ lineStyle: {color: "#d5b314"},
+ },
+ {
+ coords: [
+ [115.179594, 34.647758],
+ [103.9526, 30.7617],
+ ],
+ lineStyle: {color: "#c1bb1f"},
+ },
+ {
+ coords: [
+ [115.179594, 34.647758],
+ [108.384366, 30.439702],
+ ],
+ lineStyle: {color: "#b9be23"},
+ },
+ {
+ coords: [
+ [115.179594, 34.647758],
+ [113.0823, 28.2568],
+ ],
+ lineStyle: {color: "#a6c62c"},
+ },
+ {
+ coords: [
+ [115.179594, 34.647758],
+ [102.9199, 25.46639],
+ ],
+ lineStyle: {color: "#96cc34"},
+ },
+ ],
},
],
- globalCoord: true, // 缺省为 false
- },
- shadowColor: "rgb(58,115,192)",
- shadowOffsetX: 2,
- shadowOffsetY: 2.3,
- },
- emphasis: {
- areaColor: "#2AB8FF",
- borderWidth: 0,
- color: "green",
- label: {
- show: false,
- },
- },
+ })
+ }
},
- regions: [
- {
- name: "南海诸岛",
- itemStyle: {
- areaColor: "rgba(0, 10, 52, 1)",
-
- borderColor: "rgba(0, 10, 52, 1)",
- normal: {
- opacity: 0,
- label: {
- show: false,
- color: "#009cc9",
- },
- },
- },
- },
- ],
- },
- series: [
{
- type: "map",
- roam: false,
- label: {
- normal: {
- show: false,
- },
- },
+ e: 'data-05',
+ t: 4,
+ f: (e) => {
+ let plantCap = [
+ {
+ name: "外观时尚",
+ value: "24231",
+ },
+ {
+ name: "低碳环保",
+ value: "36232",
+ },
+ {
+ name: "高端智能",
+ value: "45423",
+ },
+ {
+ name: "老品牌",
+ value: "24542",
+ },
+ ];
- itemStyle: {
- normal: {
- borderColor: "rgb(147, 235, 248)",
- borderWidth: 1,
- areaColor: {
- type: "radial",
- x: 0.5,
- y: 0.5,
- r: 0.8,
- colorStops: [
- {
- offset: 0,
- color: "#09132c", // 0% 处的颜色
+ let datalist = [
+ {
+ offset: [56, 48],
+ symbolSize: 120,
+ opacity: 0.95,
+ color: "#f467ce",
+ },
+ {
+ offset: [35, 80],
+ symbolSize: 95,
+ opacity: 0.88,
+ color: "#7aabe2",
+ },
+ {
+ offset: [20, 43],
+ symbolSize: 90,
+ opacity: 0.84,
+ color: "#ff7123",
+ },
+ {
+ offset: [83, 30],
+ symbolSize: 90,
+ opacity: 0.8,
+ color: "#ffc400",
+ },
+ {
+ offset: [36, 20],
+ symbolSize: 65,
+ opacity: 0.75,
+ color: "#5e333f",
+ },
+ {
+ offset: [64, 10],
+ symbolSize: 70,
+ opacity: 0.7,
+ color: "#6b3442",
+ },
+ {
+ offset: [75, 75],
+ symbolSize: 60,
+ opacity: 0.68,
+ color: "#8a3647",
+ },
+ {
+ offset: [88, 62],
+ symbolSize: 50,
+ opacity: 0.6,
+ color: "#68333f",
+ },
+ ];
+ let datas = [];
+ for (var i = 0; i < plantCap.length; i++) {
+ var item = plantCap[i];
+ var itemToStyle = datalist[i];
+ datas.push({
+ name: item.value + "\n" + item.name,
+ value: itemToStyle.offset,
+ symbolSize: itemToStyle.symbolSize,
+ label: {
+ normal: {
+ textStyle: {
+ fontSize: 11,
+ },
},
- {
- offset: 1,
- color: "#274d68", // 100% 处的颜色
+ },
+ itemStyle: {
+ normal: {
+ color: itemToStyle.color,
+ opacity: itemToStyle.opacity,
},
- ],
- globalCoord: true, // 缺省为 false
+ },
+ });
+ }
+ this.$refs.chart7.setData({
+ grid: {
+ show: false,
+ top: 10,
+ bottom: 10,
},
- },
- emphasis: {
- areaColor: "rgb(46,229,206)",
- // shadowColor: 'rgb(12,25,50)',
- borderWidth: 0.1,
- },
- },
- zoom: 1.1,
- // roam: false,
- map: "china", //使用
- // data: this.difficultData //热力图数据 不同区域 不同的底色
- },
- {
- type: "effectScatter",
- coordinateSystem: "geo",
- showEffectOn: "render",
- zlevel: 1,
- rippleEffect: {
- period: 15,
- scale: 4,
- brushType: "fill",
- },
- hoverAnimation: true,
- label: {
- normal: {
- formatter: "{b}",
- position: "right",
- offset: [15, 0],
- color: "#1DE9B6",
- show: true,
- },
- },
- itemStyle: {
- normal: {
- color: "#1DE9B6",
- shadowBlur: 10,
- shadowColor: "#333",
- },
- },
- symbolSize: 2,
- data: points,
- },
- {
- type: "lines",
- zlevel: 2,
- effect: {
- show: true,
- period: 2, //箭头指向速度，值越小速度越快
- trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
- symbol: "arrow", //箭头图标
- symbolSize: 5, //图标大小
- },
- lineStyle: {
- normal: {
- color: "#1DE9B6",
- width: 1, //线条宽度
- opacity: 0.1, //尾迹线条透明度
- curveness: 0.3, //尾迹线条曲直度
- },
- },
- data: [
- {
- coords: [
- [115.179594, 34.647758],
- [118.8062, 31.9208],
- ],
- lineStyle: {color: "#4ab2e5"},
- },
- {
- coords: [
- [115.179594, 34.647758],
- [127.9688, 45.368],
- ],
- lineStyle: {color: "#4fb6d2"},
- },
- {
- coords: [
- [115.179594, 34.647758],
- [110.3467, 41.4899],
- ],
- lineStyle: {color: "#52b9c7"},
- },
- {
- coords: [
- [115.179594, 34.647758],
- [125.8154, 44.2584],
- ],
- lineStyle: {color: "#5abead"},
- },
- {
- coords: [
- [115.179594, 34.647758],
- [116.4551, 40.2539],
- ],
- lineStyle: {color: "#f34e2b"},
- },
- {
- coords: [
- [115.179594, 34.647758],
- [123.1238, 42.1216],
- ],
- lineStyle: {color: "#f56321"},
- },
- {
- coords: [
- [115.179594, 34.647758],
- [114.4995, 38.1006],
- ],
- lineStyle: {color: "#f56f1c"},
- },
- {
- coords: [
- [115.179594, 34.647758],
- [117.4219, 39.4189],
- ],
- lineStyle: {color: "#f58414"},
- },
- {
- coords: [
- [115.179594, 34.647758],
- [112.3352, 37.9413],
- ],
- lineStyle: {color: "#f58f0e"},
- },
- {
- coords: [
- [115.179594, 34.647758],
- [109.1162, 34.2004],
- ],
- lineStyle: {color: "#f5a305"},
- },
- {
- coords: [
- [115.179594, 34.647758],
- [103.5901, 36.3043],
- ],
- lineStyle: {color: "#e7ab0b"},
- },
- {
- coords: [
- [115.179594, 34.647758],
- [106.3586, 38.1775],
- ],
- lineStyle: {color: "#dfae10"},
- },
- {
- coords: [
- [115.179594, 34.647758],
- [101.4038, 36.8207],
- ],
- lineStyle: {color: "#d5b314"},
- },
- {
- coords: [
- [115.179594, 34.647758],
- [103.9526, 30.7617],
- ],
- lineStyle: {color: "#c1bb1f"},
- },
- {
- coords: [
- [115.179594, 34.647758],
- [108.384366, 30.439702],
+ xAxis: [
+ {
+ gridIndex: 0,
+ type: "value",
+ show: false,
+ min: 0,
+ max: 100,
+ nameLocation: "middle",
+ nameGap: 5,
+ },
],
- lineStyle: {color: "#b9be23"},
- },
- {
- coords: [
- [115.179594, 34.647758],
- [113.0823, 28.2568],
+ yAxis: [
+ {
+ gridIndex: 0,
+ min: 0,
+ show: false,
+ max: 100,
+ nameLocation: "middle",
+ nameGap: 30,
+ },
],
- lineStyle: {color: "#a6c62c"},
- },
- {
- coords: [
- [115.179594, 34.647758],
- [102.9199, 25.46639],
+ series: [
+ {
+ type: "scatter",
+ symbol: "circle",
+ symbolSize: 120,
+ label: {
+ normal: {
+ show: true,
+ formatter: "{b}",
+ color: "#fff",
+ textStyle: {
+ fontSize: "20",
+ },
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "#00acea",
+ },
+ },
+ data: datas,
+ },
],
- lineStyle: {color: "#96cc34"},
- },
- ],
- },
- ],
- })
- this.$refs.chart7.setData({
- grid: {
- show: false,
- top: 10,
- bottom: 10,
- },
- xAxis: [
- {
- gridIndex: 0,
- type: "value",
- show: false,
- min: 0,
- max: 100,
- nameLocation: "middle",
- nameGap: 5,
- },
- ],
- yAxis: [
- {
- gridIndex: 0,
- min: 0,
- show: false,
- max: 100,
- nameLocation: "middle",
- nameGap: 30,
+ })
+ }
},
- ],
- series: [
{
- type: "scatter",
- symbol: "circle",
- symbolSize: 120,
- label: {
- normal: {
- show: true,
- formatter: "{b}",
- color: "#fff",
- textStyle: {
- fontSize: "20",
+ e: 'data-06',
+ t: 4,
+ f: (e) => {
+
+ this.$refs.chart8.setData({
+ tooltip: {
+ trigger: "item",
+ formatter: "{b} : {c} ({d}%)",
},
- },
- },
- itemStyle: {
- normal: {
- color: "#00acea",
- },
- },
- data: datas,
- },
- ],
- })
- this.$refs.chart8.setData({
- tooltip: {
- trigger: "item",
- formatter: "{b} : {c} ({d}%)",
- },
- polar: {},
- angleAxis: {
- interval: 1,
- type: "category",
- data: [],
- z: 10,
- axisLine: {
- show: false,
- lineStyle: {
- color: "#0B4A6B",
- width: 1,
- type: "solid",
- },
- },
- axisLabel: {
- interval: 0,
- show: true,
- color: "#0B4A6B00",
- margin: 8,
- fontSize: 16,
- },
- },
- radiusAxis: {
- min: 40,
- max: 120,
- interval: 20,
- axisLine: {
- show: false,
- lineStyle: {
- color: "#0B3E5E",
- width: 1,
- type: "solid",
- },
- },
- axisLabel: {
- formatter: "{value} %",
- show: false,
- padding: [0, 0, 20, 0],
- color: "#0B3E5E",
- fontSize: 16,
- },
- splitLine: {
- lineStyle: {
- color: "#0B3E5E00",
- width: 2,
- type: "solid",
- },
- },
- },
- calculable: true,
- series: [
- {
- stack: "a",
- type: "pie",
- radius: ["0%", "80%"],
- roseType: "area",
- zlevel: 10,
- label: {
- normal: {
- show: true,
- formatter: "{b}\n{d}%",
- textStyle: {
- fontSize: 12,
- color: '#fff'
+ polar: {},
+ angleAxis: {
+ interval: 1,
+ type: "category",
+ data: [],
+ z: 10,
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: "#0B4A6B",
+ width: 1,
+ type: "solid",
+ },
+ },
+ axisLabel: {
+ interval: 0,
+ show: true,
+ color: "#0B4A6B00",
+ margin: 8,
+ fontSize: 16,
+ },
},
- position: "outside",
- },
- emphasis: {
- show: true,
- },
- },
- labelLine: {
- normal: {
- show: true,
- length: 20,
- length2: 55,
- },
- emphasis: {
- show: false,
- },
- },
- data:[
- {
- name: "干燥过滤器",
- value: 1
- },
- {
- name: "压机室外观",
- value: 1
- },
- {
- name: "箱体外观",
- value: 3
- },
- {
- name: "集液管",
- value: 2
- },
- {
- name: "A内胆外观",
- value: 1
- },
- {
- name: "毛细管",
- value: 1
- },
- {
- name: "封口",
- value: 1
- },
- {
- name: "集液管漏",
- value: 1
- },
- {
- name: "蒸发器缠绕圈数错",
- value: 1
- },
- {
- name: "少全铜管标",
- value: 1
- }
- ]
- },
- ],
- })
- this.$refs.chart9.setData({
- tooltip: {
- textStyle: {
- fontSize: 0.8 * vw
- }
- },
- grid: {
- top: "10%",
- left: "1%",
- right: "1%",
- bottom: "1%",
- containLabel: true,
- },
- xAxis: {
- data: ['2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月'],
- axisLine: {
- lineStyle: {
- color: "#0177d4",
- },
- },
- axisLabel: {
- color: "#fff",
- fontSize: 0.8 * vw,
- interval: 0,
- },
- },
- yAxis: {
- nameTextStyle: {
- color: "#fff",
- fontSize: 0.8 * vw,
- },
- axisLine: {
- lineStyle: {
- color: "#0177d4",
- },
- },
- axisLabel: {
- color: "#fff",
- fontSize: 0.8 * vw,
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: "#0177d4",
- },
- },
- },
- series: [
- {
- type: "bar",
- barWidth: '60%',
- label: {
- show: true,
- position: 'top',
- textStyle: {
- fontSize: 0.6 * vw,
- color: '#fff'
- },
- },
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "#00b0ff",
+ radiusAxis: {
+ min: 40,
+ max: 120,
+ interval: 20,
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: "#0B3E5E",
+ width: 1,
+ type: "solid",
},
- {
- offset: 0.8,
- color: "#7052f4",
+ },
+ axisLabel: {
+ formatter: "{value} %",
+ show: false,
+ padding: [0, 0, 20, 0],
+ color: "#0B3E5E",
+ fontSize: 16,
+ },
+ splitLine: {
+ lineStyle: {
+ color: "#0B3E5E00",
+ width: 2,
+ type: "solid",
},
- ],
- false
- ),
- },
- },
- data: [40631, 71777, 23375, 29402, 32359, 35070, 40360, 52643, 50001, 44100, 54000, 27555,],
- }
- ],
- })
- this.$refs.chart10_1.setData({
- series: [
- {
- type: "pie",
- clockWise: false,
- radius: ['60%', '75%'],
- itemStyle: {
- normal: {
- label: {
- show: false,
- },
- labelLine: {
- show: false,
+ },
},
- shadowBlur: 0,
- shadowColor: "#ff8c37",
- },
- },
- hoverAnimation: false,
- center: ["50%", "50%"],
- data: [
- {
- value: 102,
- label: {
- normal: {
- rich: {
- a: {
- color: "#ff8c37",
- align: "center",
- fontSize: 1.1 * vw,
- fontWeight: "bold",
- },
- b: {
- color: "#fff",
- align: "center",
- fontSize: 0.9 * vw,
+ calculable: true,
+ series: [
+ {
+ stack: "a",
+ type: "pie",
+ radius: ["0%", "80%"],
+ roseType: "area",
+ zlevel: 10,
+ label: {
+ normal: {
+ show: true,
+ formatter: "{b}\n{d}%",
+ textStyle: {
+ fontSize: 12,
+ color: '#fff'
+ },
+ position: "outside",
+ },
+ emphasis: {
+ show: true,
},
},
- formatter: function (params) {
- return (
- "{a|" +
- params.value +
- "}" +
- "\n{b|在网数量}"
- );
- },
- position: "center",
- show: true,
- textStyle: {
- fontSize: "14",
- fontWeight: "normal",
- color: "#fff",
+ labelLine: {
+ normal: {
+ show: true,
+ length: 20,
+ length2: 55,
+ },
+ emphasis: {
+ show: false,
+ },
},
+ data: e
},
+ ],
+ })
+ }
+ },
+ {
+ e: 'data-07',
+ t: 4,
+ f: (e) => {
+
+ this.$refs.chart9.setData({
+ tooltip: {
+ textStyle: {
+ fontSize: 0.8 * vw
+ }
},
- itemStyle: {
- normal: {
- color: "#ff8c37",
- shadowColor: "#ff8c37",
- shadowBlur: 0,
+ grid: {
+ top: "10%",
+ left: "1%",
+ right: "1%",
+ bottom: "1%",
+ containLabel: true,
+ },
+ xAxis: {
+ data: e.map(v=>v.COLUMN_A),
+ axisLine: {
+ lineStyle: {
+ color: "#0177d4",
+ },
+ },
+ axisLabel: {
+ color: "#fff",
+ fontSize: 0.8 * vw,
+ interval: 0,
},
},
- },
- {
- value: 0,
- name: "invisible",
- itemStyle: {
- normal: {
- color: "#412a4e",
+ yAxis: {
+ nameTextStyle: {
+ color: "#fff",
+ fontSize: 0.8 * vw,
},
- emphasis: {
- color: "#412a4e",
+ axisLine: {
+ lineStyle: {
+ color: "#0177d4",
+ },
+ },
+ axisLabel: {
+ color: "#fff",
+ fontSize: 0.8 * vw,
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "#0177d4",
+ },
},
},
- },
- ],
+ series: [
+ {
+ type: "bar",
+ barWidth: '60%',
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ fontSize: 0.6 * vw,
+ color: '#fff'
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: "#00b0ff",
+ },
+ {
+ offset: 0.8,
+ color: "#7052f4",
+ },
+ ],
+ false
+ ),
+ },
+ },
+ data: e.map(v=>v.COLUMN_B),
+ }
+ ],
+ })
+ }
},
- ],
- })
- this.$refs.chart10_2.setData({
- series: [
{
- type: "pie",
- clockWise: false,
- radius: ['60%', '75%'],
- itemStyle: {
- normal: {
- label: {
- show: false,
- },
- labelLine: {
- show: false,
- },
- shadowBlur: 0,
- shadowColor: "#389af4",
- },
- },
- hoverAnimation: false,
- center: ["50%", "50%"],
- data: [
- {
- value: 5.5,
- label: {
- normal: {
- rich: {
- a: {
- color: "#389af4",
- align: "center",
- fontSize: 1.1 * vw,
- fontWeight: "bold",
- },
- b: {
- color: "#fff",
- align: "center",
- fontSize: 0.9 * vw,
+ e: 'data-08',
+ t: 4,
+ f: (e) => {
+ this.$refs.chart10_1.setData({
+ series: [
+ {
+ type: "pie",
+ clockWise: false,
+ radius: ['60%', '75%'],
+ itemStyle: {
+ normal: {
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ shadowBlur: 0,
+ shadowColor: "#ff8c37",
},
},
- formatter: function (params) {
- return (
- "{a|" +
- params.value +
- "}" +
- "\n{b|单台能耗}"
- );
+ hoverAnimation: false,
+ center: ["50%", "50%"],
+ data: [
+ {
+ value: e?.[0]?.COLUMN_B,
+ label: {
+ normal: {
+ rich: {
+ a: {
+ color: "#ff8c37",
+ align: "center",
+ fontSize: 1.1 * vw,
+ fontWeight: "bold",
+ },
+ b: {
+ color: "#fff",
+ align: "center",
+ fontSize: 0.9 * vw,
+ },
+ },
+ formatter: function (params) {
+ return (
+ "{a|" +
+ params.value +
+ "}" +
+ "\n{b|"+ e?.[0]?.COLUMN_A+"}"
+ );
+ },
+ position: "center",
+ show: true,
+ textStyle: {
+ fontSize: "14",
+ fontWeight: "normal",
+ color: "#fff",
+ },
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "#ff8c37",
+ shadowColor: "#ff8c37",
+ shadowBlur: 0,
+ },
+ },
+ },
+ {
+ value: 0,
+ name: "invisible",
+ itemStyle: {
+ normal: {
+ color: "#412a4e",
+ },
+ emphasis: {
+ color: "#412a4e",
+ },
+ },
+ },
+ ],
+ },
+ ],
+ })
+ this.$refs.chart10_2.setData({
+ series: [
+ {
+ type: "pie",
+ clockWise: false,
+ radius: ['60%', '75%'],
+ itemStyle: {
+ normal: {
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ shadowBlur: 0,
+ shadowColor: "#389af4",
+ },
},
- position: "center",
- show: true,
- textStyle: {
- fontSize: "14",
- fontWeight: "normal",
- color: "#fff",
+ hoverAnimation: false,
+ center: ["50%", "50%"],
+ data: [
+ {
+ value: e?.[1]?.COLUMN_B,
+ label: {
+ normal: {
+ rich: {
+ a: {
+ color: "#389af4",
+ align: "center",
+ fontSize: 1.1 * vw,
+ fontWeight: "bold",
+ },
+ b: {
+ color: "#fff",
+ align: "center",
+ fontSize: 0.9 * vw,
+ },
+ },
+ formatter: function (params) {
+ return (
+ "{a|" +
+ params.value +
+ "}" +
+ "\n{b|"+ e?.[1]?.COLUMN_A+"}"
+ );
+ },
+ position: "center",
+ show: true,
+ textStyle: {
+ fontSize: "14",
+ fontWeight: "normal",
+ color: "#fff",
+ },
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "#389af4",
+ shadowColor: "#389af4",
+ shadowBlur: 0,
+ },
+ },
+ },
+ {
+ value: 0,
+ name: "invisible",
+ itemStyle: {
+ normal: {
+ color: "#412a4e",
+ },
+ emphasis: {
+ color: "#412a4e",
+ },
+ },
+ },
+ ],
+ },
+ ],
+ })
+ this.$refs.chart10_3.setData({
+ series: [
+ {
+ type: "pie",
+ clockWise: false,
+ radius: ['60%', '75%'],
+ itemStyle: {
+ normal: {
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ shadowBlur: 0,
+ shadowColor: "#ffc257",
+ },
},
+ hoverAnimation: false,
+ center: ["50%", "50%"],
+ data: [
+ {
+ value: e?.[2]?.COLUMN_B,
+ label: {
+ normal: {
+ rich: {
+ a: {
+ color: "#ffc257",
+ align: "center",
+ fontSize: 1.1 * vw,
+ fontWeight: "bold",
+ },
+ b: {
+ color: "#fff",
+ align: "center",
+ fontSize: 0.9 * vw,
+ },
+ },
+ formatter: function (params) {
+ return (
+ "{a|" +
+ params.value +
+ "%}" +
+ "\n{b|"+ e?.[2]?.COLUMN_A+"}"
+ );
+ },
+ position: "center",
+ show: true,
+ textStyle: {
+ fontSize: "14",
+ fontWeight: "normal",
+ color: "#fff",
+ },
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "#ffc257",
+ shadowColor: "#ffc257",
+ shadowBlur: 0,
+ },
+ },
+ },
+ {
+ value: 0,
+ name: "invisible",
+ itemStyle: {
+ normal: {
+ color: "#412a4e",
+ },
+ emphasis: {
+ color: "#412a4e",
+ },
+ },
+ },
+ ],
},
+ ],
+ })
+ }
+ },
+ {
+ e: 'data-09',
+ t: 4,
+ f: (e) => {
+ this.$refs.chart11.setData({
+ grid: {
+ top: "20%",
+ left: "1%",
+ right: "5%",
+ bottom: "1%",
+ containLabel: true,
},
- itemStyle: {
- normal: {
- color: "#389af4",
- shadowColor: "#389af4",
- shadowBlur: 0,
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ right: '0',
+ data: ['隐患数', '闭环数'],
+ textStyle: {
+ fontSize: 0.75 * vw,
+ color: "#F1F1F3",
},
},
- },
- {
- value: 0,
- name: "invisible",
- itemStyle: {
- normal: {
- color: "#412a4e",
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: {show: false},
+ axisLabel: {
+ rotate: -20,
+ interval: 0,
+ margin: 20,
+ textStyle: {
+ fontSize: 0.75 * vw,
+ color: "#F1F1F3",
+ },
+ },
+ data: e.map(v=>v.COLUMN_A),
+ }
+ ],
+ yAxis: [
+ {
+ axisLabel: {
+ textStyle: {
+ fontSize: 0.75 * vw,
+ color: "#F1F1F3",
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ color: "rgba(255,255,255,0.1)",
+ },
+ },
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: '隐患数',
+ type: 'bar',
+ barGap: 0,
+ emphasis: {
+ focus: 'series'
+ },
+ barWidth: '40%',
+ barMaxWidth: '50px',
+ itemStyle: {
+ //图形样式
+ normal: {
+ color: true ? '#db8151' : "#64BCEC",
+ },
+ },
+ label: {
+ show: true,
+ position: "top",
+ formatter: (e) => {
+ if (e.data === 0) {
+ return ''
+ } else {
+ return e.data
+ }
+ },
+ textStyle: {
+ color: "rgba(255,255,255,0.5)",
+ fontSize: 0.6 * vw
+ },
+ },
+ data: e.map(v=>v.COLUMN_B),
},
- emphasis: {
- color: "#412a4e",
+ {
+ name: '闭环数',
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ barWidth: '40%',
+ barMaxWidth: '50px',
+ barGap: '40%',
+ label: {
+ show: true,
+ position: "top",
+ formatter: (e) => {
+ if (e.data === 0) {
+ return ''
+ } else {
+ return e.data
+ }
+ },
+ textStyle: {
+ color: "rgba(255,255,255,0.5)",
+ fontSize: 0.6 * vw
+ },
+ },
+ itemStyle: {
+ //图形样式
+ normal: {
+ color: true ? '#9ce375' : "#4FD3B9",
+ },
+ },
+ data: e.map(v=>v.COLUMN_C),
},
- },
- },
- ],
+ ]
+ })
+ }
},
- ],
- })
- this.$refs.chart10_3.setData({
- series: [
{
- type: "pie",
- clockWise: false,
- radius: ['60%', '75%'],
- itemStyle: {
- normal: {
- label: {
- show: false,
+ e: 'data-10',
+ t: 4,
+ f: (e) => {
+ this.$refs.chart12.setData({
+ tooltip: {},
+ grid: {
+ top: "25%",
+ left: "5%",
+ right: "1%",
+ bottom: "8%",
+ containLabel: true,
},
- labelLine: {
- show: false,
+ legend: {
+ itemGap: 50,
+ top: "3%",
+ textStyle: {
+ fontSize: 0.6 * vw,
+ color: "#f9f9f9",
+ borderColor: "#fff",
+ },
},
- shadowBlur: 0,
- shadowColor: "#ffc257",
- },
- },
- hoverAnimation: false,
- center: ["50%", "50%"],
- data: [
- {
- value: 78,
- label: {
- normal: {
- rich: {
- a: {
- color: "#ffc257",
- align: "center",
- fontSize: 1.1 * vw,
- fontWeight: "bold",
- },
- b: {
- color: "#fff",
- align: "center",
- fontSize: 0.9 * vw,
+ xAxis: [
+ {
+ type: "category",
+ boundaryGap: true,
+ axisLine: {
+ //坐标轴轴线相关设置。数学上的x轴
+ show: true,
+ lineStyle: {
+ color: "#f9f9f9",
},
},
- formatter: function (params) {
- return (
- "{a|" +
- params.value +
- "%}" +
- "\n{b|产线OEE}"
- );
+ axisLabel: {
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: "#d1e6eb",
+ margin: 15,
+ fontSize: 0.4 * vw,
+ },
},
- position: "center",
- show: true,
- textStyle: {
- fontSize: "14",
- fontWeight: "normal",
- color: "#fff",
+ axisTick: {
+ show: false,
},
+ data: e.map(v=>v.COLUMN_A),
},
- },
- itemStyle: {
- normal: {
- color: "#ffc257",
- shadowColor: "#ffc257",
- shadowBlur: 0,
+ ],
+ yAxis: [
+ {
+ name: '不良率',
+ type: "value",
+ min: 0,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: "#0a3256",
+ },
+ },
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ margin: 5,
+ textStyle: {
+ color: "#d1e6eb",
+ },
+ fontSize: 0.4 * vw,
+ formatter: '{value}%'
+ },
+ axisTick: {
+ show: false,
+ },
},
- },
- },
- {
- value: 0,
- name: "invisible",
- itemStyle: {
- normal: {
- color: "#412a4e",
+ ],
+ series: [
+ {
+ name: "当年市场不良率",
+ type: "line",
+ // smooth: true, //是否平滑曲线显示
+ // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
+ showAllSymbol: true,
+ symbol: "emptyCircle",
+ symbolSize: 6,
+ lineStyle: {
+ normal: {
+ color: "#e8f1ff", // 线条颜色
+ },
+ borderColor: "#28ffb3",
+ },
+ label: {
+ show: true,
+ position: "bottom",
+ fontSize: 0.4 * vw,
+ textStyle: {
+ color: "#fff",
+ },
+ formatter: '{c}%'
+ },
+ itemStyle: {
+ normal: {
+ color: "#28ffb3",
+ },
+ },
+ tooltip: {
+ show: false,
+ },
+ data: e.map(v=>v.COLUMN_B),
},
- emphasis: {
- color: "#412a4e",
+ {
+ name: "目标市场不良率",
+ type: "line",
+ // smooth: true, //是否平滑曲线显示
+ // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
+ showAllSymbol: true,
+ symbol: "emptyCircle",
+ symbolSize: 6,
+ lineStyle: {
+ normal: {
+ color: "#4268aa", // 线条颜色
+ },
+ borderColor: "#ecf3ff",
+ },
+ label: {
+ show: true,
+ position: "top",
+ fontSize: 0.4 * vw,
+ textStyle: {
+ color: "#fff",
+ },
+ formatter: '{c}%'
+ },
+ itemStyle: {
+ normal: {
+ color: "#28ffb3",
+ },
+ },
+ tooltip: {
+ show: false,
+ },
+ data: e.map(v=>v.COLUMN_C),
},
- },
- },
- ],
- },
- ],
- })
- this.$refs.chart11.setData({
- grid: {
- top: "20%",
- left: "1%",
- right: "5%",
- bottom: "1%",
- containLabel: true,
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- legend: {
- right: '0',
- data: ['隐患数', '闭环数'],
- textStyle: {
- fontSize: 0.75 * vw,
- color: "#F1F1F3",
- },
- },
- xAxis: [
- {
- type: 'category',
- axisTick: {show: false},
- axisLabel: {
- rotate: -20,
- interval:0,
- margin: 20,
- textStyle: {
- fontSize: 0.75 * vw,
- color: "#F1F1F3",
- },
- },
- data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
- }
- ],
- yAxis: [
- {
- axisLabel: {
- textStyle: {
- fontSize: 0.75 * vw,
- color: "#F1F1F3",
- },
- },
- splitLine: {
- lineStyle: {
- color: "rgba(255,255,255,0.1)",
- },
- },
- type: 'value'
- }
- ],
- series: [
- {
- name: '隐患数',
- type: 'bar',
- barGap: 0,
- emphasis: {
- focus: 'series'
- },
- barWidth: '40%',
- barMaxWidth: '50px',
- itemStyle: {
- //图形样式
- normal: {
- color: true ? '#db8151' : "#64BCEC",
- },
- },
- label: {
- show: true,
- position: "top",
- formatter: (e)=>{
- if(e.data === 0){
- return ''
- }else{
- return e.data
- }
- },
- textStyle: {
- color: "rgba(255,255,255,0.5)",
- fontSize: 0.6 * vw
- },
- },
- data: [8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
- },
- {
- name: '闭环数',
- type: 'bar',
- emphasis: {
- focus: 'series'
- },
- barWidth: '40%',
- barMaxWidth: '50px',
- barGap: '40%',
- label: {
- show: true,
- position: "top",
- formatter: (e)=>{
- if(e.data === 0){
- return ''
- }else{
- return e.data
- }
- },
- textStyle: {
- color: "rgba(255,255,255,0.5)",
- fontSize: 0.6 * vw
- },
- },
- itemStyle: {
- //图形样式
- normal: {
- color: true ? '#9ce375' : "#4FD3B9",
- },
- },
- data: [8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+ ],
+ })
+ }
},
]
+ }
+ },
+ created() {
+ const getDate = () => {
+ let date = new Date()
+ let YYYY = date.getFullYear()
+ let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
+ let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
+ let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
+ let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
+ let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
+ this.date = `${YYYY} - ${MM} - ${dd}`
+ this.time = `${HH} : ${mm} : ${ss}`
+ }
+ getDate()
+ getDateIntervalFun = setInterval(getDate, 1000)
+ },
+ mounted() {
+
+ this.RequestDataSet.forEach(val => {
+ mixData(val, 2)
})
+ intervalFun = setInterval(() => {
+ this.RequestDataSet.forEach(val => {
+ mixData(val, 2)
+ })
+ }, 1000 * 10)
+
+
+
+ echarts.registerMap('china', chinaMap);
this.$refs.chart12.setData({
tooltip: {},
grid: {
@@ -1651,140 +1958,13 @@ export default {
exitFun() {
this.exit()
},
- chart1Option(data, id) {
- clearInterval(time1)
- if (!data) {
- data = {
-
- yNameOne: ["11244726", "11244725", "11244695", "11244639", "11244635", "11244634", "11244633", "11244632", "11244311", "11244310"],
- yData: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
- xDataName: "达成率",
- status: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
- }
- }
- let bgBar = []
- data.yData.forEach(() => {
- bgBar.push(100)
- })
- let option = {
- grid: {
- // left: "-10%",
- left: "0%",
- right: "15%",
- bottom: "0%",
- top: "0%",
- containLabel: true,
- },
- dataZoom: [],
- xAxis: {
- show: false,
- },
- yAxis: [
- {
- show: true,
- data: data.yNameOne,
- inverse: true,
- axisLine: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- color: "#fff",
- // margin:150,
- fontSize: 0.75 * vw,
- textStyle: {
- textAlign: 'center'
- },
- },
- },
- ],
- series: [
- {
- name: "条",
- type: "bar",
- yAxisIndex: 0,
- data: data.yData,
- barWidth: '80%',
- itemStyle: {
- normal: {
- barBorderRadius: 30,
- color: function (params) {
- return 'green'
- },
- },
- },
- },
- {
- name: "框",
- type: "bar",
- yAxisIndex: 0,
- barGap: "-100%",
- data: bgBar,
- barWidth: '80%',
- label: {
- show: true,
- position: "right",
- textStyle: {
- color: "#fff",
- fontSize: 0.75 * vw
- },
- formatter: function (val, index, e) {
- return data.yData[val.dataIndex] + '%'
- }
- },
- itemStyle: {
- normal: {
- color: "none",
- borderColor: "#00c1de",
- borderWidth: 1,
- barBorderRadius: 15,
- },
- },
- },
- ],
- };
-
- if (data.yNameOne.length > 8) {
- option.dataZoom.push({
- show: false,
- type: 'slider',
- bottom: '0%',
- yAxisIndex: 0,
- height: 12,
- start: 0,
- end: 1 / (data.yNameOne.length / 9) * 100,
- textStyle: {
- fontSize: 0,
- color: 'rgba(0,0,0,0)'
- }
- })
-
- let step = 1 / (data.yNameOne.length / 9) * 100
- time1 = setInterval(() => {
- option.dataZoom[0].end += step
- option.dataZoom[0].start += step
- if (option.dataZoom[0].start >= 100) {
- option.dataZoom[0].start = 0
- option.dataZoom[0].end = step
- }
- if (option.dataZoom[0].end >= 100) {
- option.dataZoom[0].end = 100
- option.dataZoom[0].start = option.dataZoom[0].end - step
- }
- this.$refs.chart1 && this.$refs.chart1.setData(option);
- }, 6000)
- // time()
- }
- return option
- }
},
beforeDestroy() {
getDateIntervalFun = null
+ if (intervalFun) {
+ clearInterval(intervalFun)
+ intervalFun = null
+ }
}
}
