|
|
@@ -1,395 +1,393 @@
|
|
|
<!-- **************************************NO.16 摄像头*************************************** -->
|
|
|
<template>
|
|
|
- <div class="chart-container">
|
|
|
- <!-- <div id="camera1" style="width: 100%; height:25vh; ">
|
|
|
- </div> -->
|
|
|
- <div id="camera2" style="width: 100%; height:85vh; ">
|
|
|
- </div>
|
|
|
- <!-- <div id="camera3" style="width: 100%; height:30vh; ">
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
+ <div class="chart-container">
|
|
|
+ <!-- <div id="camera1" style="width: 100%; height:25vh; ">
|
|
|
+ </div> -->
|
|
|
+ <div id="camera2" style="width: 100%; height:85vh; ">
|
|
|
+ </div>
|
|
|
+ <!-- <div id="camera3" style="width: 100%; height:30vh; ">
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import * as echarts from 'echarts';
|
|
|
+ import * as echarts from 'echarts';
|
|
|
import {getSbfb} from '@/api/bigdata'
|
|
|
- export default {
|
|
|
- name: 'camera',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- count: 0,
|
|
|
- data_sbfb:[]
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- // this.myEcharts1();
|
|
|
- this.sbfb();
|
|
|
- // this.myEcharts3();
|
|
|
|
|
|
- },
|
|
|
+ export default {
|
|
|
+ name: 'camera',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ source: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.myEcharts1();
|
|
|
+ // this.myEcharts2();
|
|
|
+ // this.myEcharts3();
|
|
|
+ this.getSbfb()
|
|
|
+ },
|
|
|
|
|
|
- methods: {
|
|
|
- sbfb(){
|
|
|
- let that = this
|
|
|
- getSbfb().then(resp =>{
|
|
|
- that.data_sbfb = resp.data
|
|
|
+ methods: {
|
|
|
+ getSbfb() {
|
|
|
+ let that = this
|
|
|
+ getSbfb().then(res => {
|
|
|
+ this.source = res.data
|
|
|
that.myEcharts2()
|
|
|
})
|
|
|
},
|
|
|
- // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=TMyJh73uiXkeu3_v
|
|
|
- myEcharts1() {
|
|
|
- var chartDom = document.getElementById('camera1');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var option;
|
|
|
- const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
|
|
|
- option = {
|
|
|
- dataset: {
|
|
|
- dimensions: ['name', '摄像头'],
|
|
|
- source: [{
|
|
|
- name: '双辽市',
|
|
|
- '摄像头': 50
|
|
|
- },
|
|
|
- {
|
|
|
- name: '梨树县',
|
|
|
- '摄像头': 40
|
|
|
- },
|
|
|
- {
|
|
|
- name: '伊通县',
|
|
|
- '摄像头': 30
|
|
|
- },
|
|
|
- {
|
|
|
- name: '铁东区',
|
|
|
- '摄像头': 20
|
|
|
- },
|
|
|
- {
|
|
|
- name: '铁西区',
|
|
|
- '摄像头': 30
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- position: function(point, params, dom, rect, size) {
|
|
|
- const x = point[0];
|
|
|
- const y = point[1];
|
|
|
- const viewWidth = size.viewSize[0];
|
|
|
- const viewHeight = size.viewSize[1];
|
|
|
- const boxWidth = size.contentSize[0];
|
|
|
- const boxHeight = size.contentSize[1];
|
|
|
- let posX = 0;
|
|
|
- let posY = 0;
|
|
|
- if (x < boxWidth) {
|
|
|
- // 左边放不开
|
|
|
- posX = 5;
|
|
|
- } else {
|
|
|
- // 左边放的下
|
|
|
- posX = x - boxWidth;
|
|
|
- }
|
|
|
- if (y < boxHeight) {
|
|
|
- // 上边放不开
|
|
|
- posY = 5;
|
|
|
- } else {
|
|
|
- // 上边放得下
|
|
|
- posY = y - boxHeight;
|
|
|
- }
|
|
|
- return [posX, posY];
|
|
|
- },
|
|
|
- },
|
|
|
- angleAxis: {
|
|
|
- max(value) {
|
|
|
- return value.max * 1.1;
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- startAngle: 270
|
|
|
- },
|
|
|
- radiusAxis: {
|
|
|
- type: 'category',
|
|
|
- minorTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- },
|
|
|
- polar: {
|
|
|
- radius: ['40%', '90%'],
|
|
|
- },
|
|
|
- // angleAxis:{
|
|
|
- // clockwise:false
|
|
|
- // },
|
|
|
- series: [{
|
|
|
- type: 'bar',
|
|
|
- coordinateSystem: 'polar',
|
|
|
- itemStyle: {
|
|
|
- color(params) {
|
|
|
- const idx = params.dataIndex;
|
|
|
- return dfColor[idx];
|
|
|
- },
|
|
|
- },
|
|
|
- barWidth: 5,
|
|
|
- roundCap: true,
|
|
|
- showBackground: true,
|
|
|
- backgroundStyle: {
|
|
|
- color: 'RGBA(0, 69, 117, 0.5)',
|
|
|
- },
|
|
|
- }],
|
|
|
- };
|
|
|
- option && myChart.setOption(option);
|
|
|
- },
|
|
|
-
|
|
|
- // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=pAD_0lcRq_zOGf_k
|
|
|
- myEcharts2() {
|
|
|
- let that = this
|
|
|
- var chartDom = document.getElementById('camera2');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var option;
|
|
|
- const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
|
|
|
- option = {
|
|
|
- dataset: {
|
|
|
- source: that.data_sbfb,
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
+ // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=TMyJh73uiXkeu3_v
|
|
|
+ myEcharts1() {
|
|
|
+ var chartDom = document.getElementById('camera1');
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var option;
|
|
|
+ const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
|
|
|
+ option = {
|
|
|
+ dataset: {
|
|
|
+ dimensions: ['name', '摄像头'],
|
|
|
+ source: [{
|
|
|
+ name: '双辽市',
|
|
|
+ '摄像头': 50
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '梨树县',
|
|
|
+ '摄像头': 40
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '伊通县',
|
|
|
+ '摄像头': 30
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '铁东区',
|
|
|
+ '摄像头': 20
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '铁西区',
|
|
|
+ '摄像头': 30
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ position: function (point, params, dom, rect, size) {
|
|
|
+ const x = point[0];
|
|
|
+ const y = point[1];
|
|
|
+ const viewWidth = size.viewSize[0];
|
|
|
+ const viewHeight = size.viewSize[1];
|
|
|
+ const boxWidth = size.contentSize[0];
|
|
|
+ const boxHeight = size.contentSize[1];
|
|
|
+ let posX = 0;
|
|
|
+ let posY = 0;
|
|
|
+ if (x < boxWidth) {
|
|
|
+ // 左边放不开
|
|
|
+ posX = 5;
|
|
|
+ } else {
|
|
|
+ // 左边放的下
|
|
|
+ posX = x - boxWidth;
|
|
|
+ }
|
|
|
+ if (y < boxHeight) {
|
|
|
+ // 上边放不开
|
|
|
+ posY = 5;
|
|
|
+ } else {
|
|
|
+ // 上边放得下
|
|
|
+ posY = y - boxHeight;
|
|
|
+ }
|
|
|
+ return [posX, posY];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ angleAxis: {
|
|
|
+ max(value) {
|
|
|
+ return value.max * 1.1;
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ startAngle: 270
|
|
|
+ },
|
|
|
+ radiusAxis: {
|
|
|
+ type: 'category',
|
|
|
+ minorTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ polar: {
|
|
|
+ radius: ['40%', '90%'],
|
|
|
+ },
|
|
|
+ // angleAxis:{
|
|
|
+ // clockwise:false
|
|
|
+ // },
|
|
|
+ series: [{
|
|
|
+ type: 'bar',
|
|
|
+ coordinateSystem: 'polar',
|
|
|
+ itemStyle: {
|
|
|
+ color(params) {
|
|
|
+ const idx = params.dataIndex;
|
|
|
+ return dfColor[idx];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ barWidth: 5,
|
|
|
+ roundCap: true,
|
|
|
+ showBackground: true,
|
|
|
+ backgroundStyle: {
|
|
|
+ color: 'RGBA(0, 69, 117, 0.5)',
|
|
|
+ },
|
|
|
+ }],
|
|
|
+ };
|
|
|
+ option && myChart.setOption(option);
|
|
|
+ },
|
|
|
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: "0%",
|
|
|
- left: "6%",
|
|
|
- // right: "4%",
|
|
|
- bottom: "5%",
|
|
|
- width: '75%',
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- show: false,
|
|
|
- type: "value",
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: "category", // 不设置类目轴，抽离的dataset数据展示不出来
|
|
|
- inverse: true,
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: '#5deaff',
|
|
|
- fontSize: '12'
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- },
|
|
|
+ // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=pAD_0lcRq_zOGf_k
|
|
|
+ myEcharts2() {
|
|
|
+ var chartDom = document.getElementById('camera2');
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var option;
|
|
|
+ const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
|
|
|
+ option = {
|
|
|
+ dataset: {
|
|
|
+ source: this.source,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
|
|
|
- series: [{
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: "0%",
|
|
|
+ left: "6%",
|
|
|
+ // right: "4%",
|
|
|
+ bottom: "5%",
|
|
|
+ width: '75%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ show: false,
|
|
|
+ type: "value",
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "category", // 不设置类目轴，抽离的dataset数据展示不出来
|
|
|
+ inverse: true,
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#5deaff',
|
|
|
+ fontSize: '12'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ },
|
|
|
|
|
|
- type: "bar",
|
|
|
- animationCurve: "easeOutBack",
|
|
|
- barWidth: 8,
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: "right",
|
|
|
- offset: [0, 0],
|
|
|
- color: "#88dfd5",
|
|
|
- // fontSize: "12",
|
|
|
- style: {
|
|
|
- fill: "#fff"
|
|
|
- },
|
|
|
- },
|
|
|
- backgroundBar: {
|
|
|
- show: true,
|
|
|
- style: {
|
|
|
- fill: "rgba(97,152,255,0.30)",
|
|
|
- },
|
|
|
- },
|
|
|
- barStyle: {
|
|
|
- stroke: "rgba(41,244,236,1)",
|
|
|
- },
|
|
|
- gradient: {
|
|
|
- color: ["rgba(41,244,236,1)", "rgba(41,244,236,0)"],
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- label: {
|
|
|
- show: true
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
- offset: 0,
|
|
|
- color: "rgba(41,244,236,0)"
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "rgba(41,244,236,1)"
|
|
|
- },
|
|
|
- ]),
|
|
|
- borderColor: "#a2f9f7",
|
|
|
- shadowBlur: 16,
|
|
|
- shadowColor: "#a2f9f7",
|
|
|
- },
|
|
|
- }, ],
|
|
|
- };
|
|
|
- option && myChart.setOption(option);
|
|
|
- },
|
|
|
- // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=ELjN7o3m72tLtmbv
|
|
|
- myEcharts3() {
|
|
|
- var chartDom = document.getElementById('camera3');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var option;
|
|
|
- option = {
|
|
|
- color: ['#3D91F7', '#61BE67'],
|
|
|
- tooltip: {},
|
|
|
- legend: {
|
|
|
- show: true,
|
|
|
- icon: "circle",
|
|
|
- bottom: 30,
|
|
|
- center: 0,
|
|
|
- itemWidth: 14,
|
|
|
- itemHeight: 14,
|
|
|
- itemGap: 21,
|
|
|
- orient: "horizontal",
|
|
|
- data: ['a', 'b'],
|
|
|
- textStyle: {
|
|
|
- color: '#8C8C8C'
|
|
|
- },
|
|
|
- },
|
|
|
+ series: [{
|
|
|
|
|
|
- radar: {
|
|
|
- // shape: 'circle',
|
|
|
- radius: '80%',
|
|
|
- triggerEvent: true,
|
|
|
- name: {
|
|
|
- textStyle: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: '10',
|
|
|
- borderRadius: 3,
|
|
|
- padding: [3, 5]
|
|
|
- }
|
|
|
- },
|
|
|
- nameGap: '2',
|
|
|
- indicator: [{ //[4300, 10000, 28000, 35000, 50000, 19000, 21000]
|
|
|
- name: '型号1',
|
|
|
- max: 6500
|
|
|
- },
|
|
|
- {
|
|
|
- name: '型号2',
|
|
|
- max: 16000
|
|
|
- },
|
|
|
- {
|
|
|
- name: '型号3',
|
|
|
- max: 30000
|
|
|
- },
|
|
|
- {
|
|
|
- name: '型号4',
|
|
|
- max: 38000
|
|
|
- },
|
|
|
- {
|
|
|
- name: '型号5',
|
|
|
- max: 52000
|
|
|
- },
|
|
|
- {
|
|
|
- name: '型号6',
|
|
|
- max: 25000
|
|
|
- },
|
|
|
- {
|
|
|
- name: '型号7',
|
|
|
- max: 25000
|
|
|
- }
|
|
|
- ],
|
|
|
- splitArea: {
|
|
|
- areaStyle: {
|
|
|
- color: [
|
|
|
- 'rgba(222,134,85, 0.1)', 'rgba(222,134,85, 0.2)',
|
|
|
- 'rgba(222,134,85, 0.4)', 'rgba(222,134,85, 0.6)',
|
|
|
- 'rgba(222,134,85, 0.8)', 'rgba(222,134,85, 1)'
|
|
|
- ].reverse()
|
|
|
- }
|
|
|
- },
|
|
|
- // axisLabel:{//展示刻度
|
|
|
- // show: true
|
|
|
- // },
|
|
|
- axisLine: { //指向外圈文本的分隔线样式
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(0,0,0,0)'
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- width: 2,
|
|
|
- color: [
|
|
|
- 'rgba(224,134,82, 0.1)', 'rgba(224,134,82, 0.2)',
|
|
|
- 'rgba(224,134,82, 0.4)', 'rgba(224,134,82, 0.6)',
|
|
|
- 'rgba(224,134,82, 0.8)', 'rgba(224,134,82, 1)'
|
|
|
- ].reverse()
|
|
|
- }
|
|
|
- },
|
|
|
+ type: "bar",
|
|
|
+ animationCurve: "easeOutBack",
|
|
|
+ barWidth: 8,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "right",
|
|
|
+ offset: [0, 0],
|
|
|
+ color: "#88dfd5",
|
|
|
+ // fontSize: "12",
|
|
|
+ style: {
|
|
|
+ fill: "#fff"
|
|
|
+ },
|
|
|
+ },
|
|
|
+ backgroundBar: {
|
|
|
+ show: true,
|
|
|
+ style: {
|
|
|
+ fill: "rgba(97,152,255,0.30)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ barStyle: {
|
|
|
+ stroke: "rgba(41,244,236,1)",
|
|
|
+ },
|
|
|
+ gradient: {
|
|
|
+ color: ["rgba(41,244,236,1)", "rgba(41,244,236,0)"],
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ label: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(41,244,236,0)"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(41,244,236,1)"
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ borderColor: "#a2f9f7",
|
|
|
+ shadowBlur: 16,
|
|
|
+ shadowColor: "#a2f9f7",
|
|
|
+ },
|
|
|
+ },],
|
|
|
+ };
|
|
|
+ option && myChart.setOption(option);
|
|
|
+ },
|
|
|
+ // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=ELjN7o3m72tLtmbv
|
|
|
+ myEcharts3() {
|
|
|
+ var chartDom = document.getElementById('camera3');
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var option;
|
|
|
+ option = {
|
|
|
+ color: ['#3D91F7', '#61BE67'],
|
|
|
+ tooltip: {},
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ icon: "circle",
|
|
|
+ bottom: 30,
|
|
|
+ center: 0,
|
|
|
+ itemWidth: 14,
|
|
|
+ itemHeight: 14,
|
|
|
+ itemGap: 21,
|
|
|
+ orient: "horizontal",
|
|
|
+ data: ['a', 'b'],
|
|
|
+ textStyle: {
|
|
|
+ color: '#8C8C8C'
|
|
|
+ },
|
|
|
+ },
|
|
|
|
|
|
- },
|
|
|
+ radar: {
|
|
|
+ // shape: 'circle',
|
|
|
+ radius: '80%',
|
|
|
+ triggerEvent: true,
|
|
|
+ name: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: '10',
|
|
|
+ borderRadius: 3,
|
|
|
+ padding: [3, 5]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ nameGap: '2',
|
|
|
+ indicator: [{ //[4300, 10000, 28000, 35000, 50000, 19000, 21000]
|
|
|
+ name: '型号1',
|
|
|
+ max: 6500
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '型号2',
|
|
|
+ max: 16000
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '型号3',
|
|
|
+ max: 30000
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '型号4',
|
|
|
+ max: 38000
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '型号5',
|
|
|
+ max: 52000
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '型号6',
|
|
|
+ max: 25000
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '型号7',
|
|
|
+ max: 25000
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ splitArea: {
|
|
|
+ areaStyle: {
|
|
|
+ color: [
|
|
|
+ 'rgba(222,134,85, 0.1)', 'rgba(222,134,85, 0.2)',
|
|
|
+ 'rgba(222,134,85, 0.4)', 'rgba(222,134,85, 0.6)',
|
|
|
+ 'rgba(222,134,85, 0.8)', 'rgba(222,134,85, 1)'
|
|
|
+ ].reverse()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // axisLabel:{//展示刻度
|
|
|
+ // show: true
|
|
|
+ // },
|
|
|
+ axisLine: { //指向外圈文本的分隔线样式
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(0,0,0,0)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ width: 2,
|
|
|
+ color: [
|
|
|
+ 'rgba(224,134,82, 0.1)', 'rgba(224,134,82, 0.2)',
|
|
|
+ 'rgba(224,134,82, 0.4)', 'rgba(224,134,82, 0.6)',
|
|
|
+ 'rgba(224,134,82, 0.8)', 'rgba(224,134,82, 1)'
|
|
|
+ ].reverse()
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- series: [{
|
|
|
- name: '型号统计',
|
|
|
- type: 'radar',
|
|
|
- //areaStyle: {normal: {}},
|
|
|
- areaStyle: {
|
|
|
- normal: {
|
|
|
- color: 'rgba(252,211,3, 0.3)'
|
|
|
- }
|
|
|
- },
|
|
|
- symbolSize: 0,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- color: 'rgba(252,211,3, 1)',
|
|
|
- width: 1
|
|
|
- }
|
|
|
- },
|
|
|
- data: [{
|
|
|
- value: [4300, 10000, 28000, 35000, 50000, 19000, 21000],
|
|
|
- name: '型号统计',
|
|
|
+ },
|
|
|
|
|
|
+ series: [{
|
|
|
+ name: '型号统计',
|
|
|
+ type: 'radar',
|
|
|
+ //areaStyle: {normal: {}},
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'rgba(252,211,3, 0.3)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ symbolSize: 0,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'rgba(252,211,3, 1)',
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [{
|
|
|
+ value: [4300, 10000, 28000, 35000, 50000, 19000, 21000],
|
|
|
+ name: '型号统计',
|
|
|
|
|
|
|
|
|
- }]
|
|
|
- }]
|
|
|
- };
|
|
|
- option && myChart.setOption(option);
|
|
|
- },
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ option && myChart.setOption(option);
|
|
|
+ },
|
|
|
|
|
|
|
|
|
- },
|
|
|
+ },
|
|
|
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
- .chart-container {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- position: relative;
|
|
|
- padding-bottom: 10px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
+ .chart-container {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
</style>
|
