|
@@ -27,86 +27,91 @@ export default {
|
|
|
default: "标题",
|
|
|
},
|
|
|
// 值
|
|
|
- value: {
|
|
|
- type: Number,
|
|
|
- default: 90,
|
|
|
+ series: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {},
|
|
|
},
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
id: "",
|
|
|
chart: null,
|
|
|
+ Data: [],
|
|
|
+ label: [],
|
|
|
indicator: [
|
|
|
{
|
|
|
- name: "北",
|
|
|
+ name: "N",
|
|
|
max: 100,
|
|
|
},
|
|
|
{
|
|
|
- name: "北北西",
|
|
|
+ name: "NNE",
|
|
|
max: 100,
|
|
|
},
|
|
|
{
|
|
|
- name: "北西",
|
|
|
+ name: "NE",
|
|
|
max: 100,
|
|
|
},
|
|
|
{
|
|
|
- name: "西北西",
|
|
|
+ name: "ENE",
|
|
|
max: 100,
|
|
|
},
|
|
|
{
|
|
|
- name: "西",
|
|
|
+ name: "E",
|
|
|
max: 100,
|
|
|
},
|
|
|
{
|
|
|
- name: "西南西",
|
|
|
+ name: "ESE",
|
|
|
max: 100,
|
|
|
},
|
|
|
{
|
|
|
- name: "南西",
|
|
|
+ name: "SE",
|
|
|
max: 100,
|
|
|
},
|
|
|
{
|
|
|
- name: "南南西",
|
|
|
+ name: "SSE",
|
|
|
max: 100,
|
|
|
},
|
|
|
{
|
|
|
- name: "南",
|
|
|
+ name: "S",
|
|
|
max: 100,
|
|
|
},
|
|
|
{
|
|
|
- name: "南南东",
|
|
|
+ name: "SSW",
|
|
|
max: 100,
|
|
|
},
|
|
|
{
|
|
|
- name: "东南",
|
|
|
+ name: "SW",
|
|
|
max: 100,
|
|
|
},
|
|
|
{
|
|
|
- name: "东南东",
|
|
|
+ name: "WSW",
|
|
|
max: 100,
|
|
|
},
|
|
|
{
|
|
|
- name: "东",
|
|
|
+ name: "W",
|
|
|
max: 100,
|
|
|
},
|
|
|
{
|
|
|
- name: "东北东",
|
|
|
+ name: "WNW",
|
|
|
max: 100,
|
|
|
},
|
|
|
{
|
|
|
- name: "北东",
|
|
|
+ name: "NW",
|
|
|
max: 100,
|
|
|
},
|
|
|
{
|
|
|
- name: "北北东",
|
|
|
+ name: "NNW",
|
|
|
max: 100,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
- computed: {},
|
|
|
+
|
|
|
methods: {
|
|
|
initChart() {
|
|
|
+ console.log(this.series);
|
|
|
+ let nameList =
|
|
|
+ this.series.name && this.series.name.length ? this.series.name : [];
|
|
|
let option = {
|
|
|
grid: {
|
|
|
left: 40,
|
|
@@ -115,243 +120,358 @@ export default {
|
|
|
top: "40%",
|
|
|
containLabel: false,
|
|
|
},
|
|
|
- radar: [
|
|
|
- // 最低层 80
|
|
|
- {
|
|
|
- radius: "70%",
|
|
|
- center: ["50%", "50%"],
|
|
|
- splitNumber: 1,
|
|
|
- nameGap: "10",
|
|
|
- name: {
|
|
|
- textStyle: {
|
|
|
- color: partten.getColor("gray") + 99,
|
|
|
- fontSize: 12,
|
|
|
- },
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: partten.getColor("gray") + 40,
|
|
|
- },
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- width: 1,
|
|
|
- color: partten.getColor("gray") + 40,
|
|
|
- },
|
|
|
- },
|
|
|
- splitArea: {
|
|
|
- areaStyle: {
|
|
|
- color: "transparent",
|
|
|
- },
|
|
|
- },
|
|
|
- indicator: this.indicator,
|
|
|
+ legend: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ polar: {},
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "cross",
|
|
|
},
|
|
|
- // 次外层 70 - 80
|
|
|
+ },
|
|
|
+ angleAxis: {
|
|
|
+ type: "value",
|
|
|
+ startAngle: 90,
|
|
|
+ min: 0, //最小刻度
|
|
|
+ max: 360, //最大刻度
|
|
|
+ interval: 360 / nameList.length, //间隔刻度 16方位间隔22.5,可改8方位
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ // formatter: function (value, index) {
|
|
|
+ // return nameList.reverse()[index] || "";
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ radiusAxis: {},
|
|
|
+ // series: [
|
|
|
+ // {
|
|
|
+ // // coordinateSystem: "polar",
|
|
|
+ // name: "line",
|
|
|
+ // type: "radar",
|
|
|
+ // data: this.series.data
|
|
|
+ // ? [{ name: "a", value: this.series.data.map((i) => i[0]) }]
|
|
|
+ // : [],
|
|
|
+ // areaStyle: {
|
|
|
+ // color: "rgba(227, 127, 127, 1)",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ series: [
|
|
|
{
|
|
|
- radius: ["60%", "70%"],
|
|
|
- center: ["50%", "50%"],
|
|
|
- startAngle: 90,
|
|
|
- splitNumber: 2,
|
|
|
- name: {
|
|
|
- show: false,
|
|
|
+ type: "radar",
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
},
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: partten.getColor("gray") + 40,
|
|
|
- shadowBlur: 1,
|
|
|
- shadowColor: "#fff",
|
|
|
- shadowOffsetX: 0.5,
|
|
|
- shadowOffsetY: 1,
|
|
|
- },
|
|
|
+ itemStyle: {
|
|
|
+ //此属性的颜色和下面areaStyle属性的颜色都设置成相同色即可实现
|
|
|
+ color: "#087636",
|
|
|
+ borderColor: "#087636",
|
|
|
},
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- width: 1,
|
|
|
- color: partten.getColor("gray") + 40,
|
|
|
- shadowColor: "#fff",
|
|
|
- shadowBlur: 0,
|
|
|
- shadowOffsetX: 0.5,
|
|
|
- shadowOffsetY: 0.5,
|
|
|
- },
|
|
|
+ areaStyle: {
|
|
|
+ color: "#087636",
|
|
|
},
|
|
|
- splitArea: {
|
|
|
- areaStyle: {
|
|
|
- color: "transparent",
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: this.series.data.map((i) => i[0]),
|
|
|
+ name: "风向频率",
|
|
|
},
|
|
|
- },
|
|
|
- indicator: this.indicator,
|
|
|
+ ],
|
|
|
},
|
|
|
- // 渐变层 40 - 70
|
|
|
+ ],
|
|
|
+ radar: [
|
|
|
{
|
|
|
- radius: ["30%", "60%"],
|
|
|
+ indicator: this.indicator,
|
|
|
center: ["50%", "50%"],
|
|
|
- splitNumber: 1,
|
|
|
- name: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: partten.getColor("gray") + 40,
|
|
|
- },
|
|
|
- },
|
|
|
+ radius: "70%",
|
|
|
splitLine: {
|
|
|
+ //配置雷达图的每一圈的网格线颜色
|
|
|
lineStyle: {
|
|
|
- width: 1,
|
|
|
- color: partten.getColor("gray"),
|
|
|
+ color: "#262732",
|
|
|
},
|
|
|
},
|
|
|
splitArea: {
|
|
|
- areaStyle: {
|
|
|
- shadowBlur: 4,
|
|
|
- color: {
|
|
|
- type: "radial",
|
|
|
- x: 0.5,
|
|
|
- y: 0.5,
|
|
|
- r: 0.5,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0.5,
|
|
|
- color: "transparent", // 0% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: this.$store.state.themeName === "dark" ? partten.getColor("green") : partten.getColor("deepblue") + 60, // 100% 处的颜色
|
|
|
- },
|
|
|
- ],
|
|
|
- global: false, // 缺省为 false
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- indicator: this.indicator,
|
|
|
- },
|
|
|
- // 内层 0 - 40
|
|
|
- {
|
|
|
- radius: "30%",
|
|
|
- center: ["50%", "50%"],
|
|
|
- splitNumber: 1,
|
|
|
- name: {
|
|
|
+ //配置雷达图的网格线背景
|
|
|
show: false,
|
|
|
},
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: partten.getColor("gray") + 40,
|
|
|
- },
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- width: 1,
|
|
|
- color: partten.getColor("gray"),
|
|
|
- },
|
|
|
- },
|
|
|
- splitArea: {
|
|
|
- areaStyle: {
|
|
|
- shadowBlur: 4,
|
|
|
- color: "transparent",
|
|
|
+ name: {
|
|
|
+ //配置雷达图的每个指示器的名称颜色
|
|
|
+ textStyle: {
|
|
|
+ color: "#838D9E",
|
|
|
},
|
|
|
},
|
|
|
- indicator: this.indicator,
|
|
|
- },
|
|
|
- ],
|
|
|
- series: [
|
|
|
- // 进度条
|
|
|
- {
|
|
|
- z: 1,
|
|
|
- name: "内部(环形)进度条",
|
|
|
- type: "gauge",
|
|
|
- radius: "70%",
|
|
|
- splitNumber: 5,
|
|
|
axisLine: {
|
|
|
+ //配置雷达图的射线样式颜色
|
|
|
lineStyle: {
|
|
|
- color: [
|
|
|
- [
|
|
|
- this.value / 360,
|
|
|
- new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: this.$store.state.themeName === "dark" ? partten.getColor(this.color) + 10 : partten.getColor("deepblue") + 10,
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: this.$store.state.themeName === "dark" ? partten.getColor(this.color) + 99 : partten.getColor("deepblue") + 99,
|
|
|
- },
|
|
|
- ]),
|
|
|
- ],
|
|
|
- [1, "transparent"],
|
|
|
- ],
|
|
|
- width: 40,
|
|
|
+ color: "#262732",
|
|
|
},
|
|
|
},
|
|
|
- startAngle: 90,
|
|
|
- endAngle: 450,
|
|
|
- clockwise: true,
|
|
|
- axisLabel: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- pointer: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- },
|
|
|
- // 指针
|
|
|
- {
|
|
|
- name: "指针",
|
|
|
- type: "gauge",
|
|
|
- z: 2,
|
|
|
- min: 0,
|
|
|
- max: 360,
|
|
|
- radius: "100%",
|
|
|
- startAngle: 90,
|
|
|
- endAngle: 360 + 90,
|
|
|
- clockwise: false,
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- detail: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- title: {
|
|
|
- //标题
|
|
|
- show: false,
|
|
|
- },
|
|
|
- data: [
|
|
|
- {
|
|
|
- value: this.value,
|
|
|
- },
|
|
|
- ],
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: "#fff",
|
|
|
- },
|
|
|
- },
|
|
|
- pointer: {
|
|
|
- show: true,
|
|
|
- length: "70%",
|
|
|
- radius: "0%",
|
|
|
- width: util.vh(3), //指针粗细
|
|
|
- offsetCenter: ["0%", "0%"],
|
|
|
- },
|
|
|
- animationDuration: 1000,
|
|
|
},
|
|
|
],
|
|
|
+ // radar: [
|
|
|
+ // // 最低层 80
|
|
|
+ // {
|
|
|
+ // radius: "70%",
|
|
|
+ // center: ["50%", "50%"],
|
|
|
+ // splitNumber: 1,
|
|
|
+ // nameGap: "10",
|
|
|
+ // name: {
|
|
|
+ // textStyle: {
|
|
|
+ // color: partten.getColor("gray") + 99,
|
|
|
+ // fontSize: 12,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // axisLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // color: partten.getColor("gray") + 40,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // splitLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // width: 1,
|
|
|
+ // color: partten.getColor("gray") + 40,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // splitArea: {
|
|
|
+ // areaStyle: {
|
|
|
+ // color: "transparent",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // indicator: this.indicator,
|
|
|
+ // },
|
|
|
+ // // 次外层 70 - 80
|
|
|
+ // {
|
|
|
+ // radius: ["60%", "70%"],
|
|
|
+ // center: ["50%", "50%"],
|
|
|
+ // startAngle: 90,
|
|
|
+ // splitNumber: 2,
|
|
|
+ // name: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // axisLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // color: partten.getColor("gray") + 40,
|
|
|
+ // shadowBlur: 1,
|
|
|
+ // shadowColor: "#fff",
|
|
|
+ // shadowOffsetX: 0.5,
|
|
|
+ // shadowOffsetY: 1,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // splitLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // width: 1,
|
|
|
+ // color: partten.getColor("gray") + 40,
|
|
|
+ // shadowColor: "#fff",
|
|
|
+ // shadowBlur: 0,
|
|
|
+ // shadowOffsetX: 0.5,
|
|
|
+ // shadowOffsetY: 0.5,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // splitArea: {
|
|
|
+ // areaStyle: {
|
|
|
+ // color: "transparent",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // indicator: this.indicator,
|
|
|
+ // },
|
|
|
+ // // 渐变层 40 - 70
|
|
|
+ // {
|
|
|
+ // radius: ["30%", "60%"],
|
|
|
+ // center: ["50%", "50%"],
|
|
|
+ // splitNumber: 1,
|
|
|
+ // name: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // axisLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // color: partten.getColor("gray") + 40,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // splitLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // width: 1,
|
|
|
+ // color: partten.getColor("gray"),
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // splitArea: {
|
|
|
+ // areaStyle: {
|
|
|
+ // shadowBlur: 4,
|
|
|
+ // color: {
|
|
|
+ // type: "radial",
|
|
|
+ // x: 0.5,
|
|
|
+ // y: 0.5,
|
|
|
+ // r: 0.5,
|
|
|
+ // colorStops: [
|
|
|
+ // {
|
|
|
+ // offset: 0.5,
|
|
|
+ // color: "transparent", // 0% 处的颜色
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // offset: 1,
|
|
|
+ // color:
|
|
|
+ // this.$store.state.themeName === "dark"
|
|
|
+ // ? partten.getColor("green")
|
|
|
+ // : partten.getColor("deepblue") + 60, // 100% 处的颜色
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // global: false, // 缺省为 false
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // indicator: this.indicator,
|
|
|
+ // },
|
|
|
+ // // 内层 0 - 40
|
|
|
+ // {
|
|
|
+ // radius: "30%",
|
|
|
+ // center: ["50%", "50%"],
|
|
|
+ // splitNumber: 1,
|
|
|
+ // name: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // axisLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // color: partten.getColor("gray") + 40,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // splitLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // width: 1,
|
|
|
+ // color: partten.getColor("gray"),
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // splitArea: {
|
|
|
+ // areaStyle: {
|
|
|
+ // shadowBlur: 4,
|
|
|
+ // color: "transparent",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // indicator: this.indicator,
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // series: [
|
|
|
+ // // 进度条
|
|
|
+ // {
|
|
|
+ // z: 1,
|
|
|
+ // name: "内部(环形)进度条",
|
|
|
+ // type: "gauge",
|
|
|
+ // radius: "70%",
|
|
|
+ // splitNumber: 5,
|
|
|
+ // axisLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // color: [
|
|
|
+ // ...(this.value.data
|
|
|
+ // ? this.value.data.map((item) => {
|
|
|
+ // return [
|
|
|
+ // item.value / 360,
|
|
|
+ // new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
+ // {
|
|
|
+ // offset: 0,
|
|
|
+ // color:
|
|
|
+ // this.$store.state.themeName === "dark"
|
|
|
+ // ? partten.getColor(this.color) + 10
|
|
|
+ // : partten.getColor("deepblue") + 10,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // offset: 1,
|
|
|
+ // color:
|
|
|
+ // this.$store.state.themeName === "dark"
|
|
|
+ // ? partten.getColor(this.color) + 99
|
|
|
+ // : partten.getColor("deepblue") + 99,
|
|
|
+ // },
|
|
|
+ // ]),
|
|
|
+ // ];
|
|
|
+ // })
|
|
|
+ // : [
|
|
|
+ // 0,
|
|
|
+ // new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
+ // {
|
|
|
+ // offset: 0,
|
|
|
+ // color:
|
|
|
+ // this.$store.state.themeName === "dark"
|
|
|
+ // ? partten.getColor(this.color) + 10
|
|
|
+ // : partten.getColor("deepblue") + 10,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // offset: 1,
|
|
|
+ // color:
|
|
|
+ // this.$store.state.themeName === "dark"
|
|
|
+ // ? partten.getColor(this.color) + 99
|
|
|
+ // : partten.getColor("deepblue") + 99,
|
|
|
+ // },
|
|
|
+ // ]),
|
|
|
+ // ]),
|
|
|
+ // [1, "transparent"],
|
|
|
+ // ],
|
|
|
+ // width: 40,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // startAngle: 90,
|
|
|
+ // endAngle: 450,
|
|
|
+ // clockwise: true,
|
|
|
+ // axisLabel: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // axisTick: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // splitLine: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // pointer: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // // 指针
|
|
|
+ // {
|
|
|
+ // name: "指针",
|
|
|
+ // type: "gauge",
|
|
|
+ // z: 2,
|
|
|
+ // min: 0,
|
|
|
+ // max: 360,
|
|
|
+ // radius: "100%",
|
|
|
+ // startAngle: 90,
|
|
|
+ // endAngle: 360 + 90,
|
|
|
+ // clockwise: false,
|
|
|
+ // axisLine: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // tooltip: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // axisLabel: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // axisTick: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // splitLine: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // detail: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // title: {
|
|
|
+ // //标题
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // data: this.value.data,
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // color: "#fff",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // pointer: {
|
|
|
+ // show: true,
|
|
|
+ // length: "70%",
|
|
|
+ // radius: "0%",
|
|
|
+ // width: util.vh(3), //指针粗细
|
|
|
+ // offsetCenter: ["0%", "0%"],
|
|
|
+ // },
|
|
|
+ // animationDuration: 1000,
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
};
|
|
|
-
|
|
|
+ console.log(option);
|
|
|
this.chart.setOption(option);
|
|
|
},
|
|
|
},
|