全部代码
drawLine() {
let val = this.PMvalue;
let colors = ["#f502f5", "#10a0e1", "#c6b45e", "#d0548c"];
// wind_degreeRander //这个数组是度数
// console.log(wind_speed) //风速，作为展示使用了
// console.log(wind_directionEcharts)//风向就是往哪个风向
var data = echarts.util.map(wind_speed, function (item, index) {
return {
value: wind_speed[index],
symbolRotate: wind_directionEcharts[index],
tooltip: {
position: "inside",
color: 'red',
formatter: function (params) {}
}
};
});
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
color: ["#3398DB"],
tooltip: {
orient: "horizontal",
trigger: "axis",
`formatter这个函数的效果`
`这个函数里是自己定义的,如果没有这种需求可按照官网上的方式方便`
formatter: function(params) {
let str = "";
if (params[0] != undefined && params[0].name != undefined) {
str +=
"<p>时间：" +
params[0].name +
"</p><p>" +
params[0].seriesName +
"：" +
params[0].value +
" μg/m3</p>";
}
if (params[4] != undefined && params[4].value != undefined) {
str +=
'<p style="text-align:left;">实测PM2.5：' +
params[4].value +
" μg/m3</p>";
}
if (params[1] != undefined && params[1].data != undefined) {
str +=
"<p>风速风向：" +
params[1].data.value +
" km/h " +
params[1].data.direction +
"风</p>";
}
if (params[2] != undefined && params[2].value != undefined) {
str += "<p>温度：" + params[2].value + " ℃</p>";
}
if (params[3] != undefined && params[3].value != undefined) {
str += "<p>湿度：" + params[3].value + " %</p>";
}
return str;
},
trigger: "axis",
axisPointer: {
animation: false
}
},
grid: {
left: "3%",
right: "4%",
containLabel: true
},
legend: {
data: [
this.PMozone,
"风速风向",
"风速",
"温度",
"湿度",
"实测" + this.PMozone
],
bottom: 10
},
toolbox: {
right: "10% ",
show: true,
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
dataZoom: [{
type: 'slider', //图表下方的伸缩条
show: true, //是否显示
realtime: true, //拖动时，是否实时更新系列的视图
start: 0, //伸缩条开始位置（1-100），可以随时更改
end: 100, //伸缩条结束位置（1-100），可以随时更改
height: 20,
bottom: 70,
}, {
type: 'inside'
}],
xAxis: [
{
type: "category",
data: this.newarr,
axisTick: {
alignWithLabel: true
}
}
],
//增加y轴上的线
yAxis: [
{
type: "value",
name: "μg/m3",
axisLabel: {
show: true,
textStyle: {
color: "#15c367"
}
},
axisLine: {
lineStyle: {
color: "#15c367"
}
}
},
{
type: "value",
name: "km/h",
min: 0,
max: 50,
position: "right",
axisLine: {
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: "{value}"
},
axisTick: {
//y轴刻度线
show: false
},
splitLine: {
show: false
}
},
{
type: "value",
name: "℃",
min: 0,
max: 50,
position: "right",
offset: 30,
axisLine: {
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: "{value}"
},
axisTick: {
//y轴刻度线
show: false
},
splitLine: {
show: false
}
},
{
type: "value",
name: "%",
min: 0,
max: 100,
position: "right",
offset: 60,
axisLine: {
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: "{value}"
},
axisTick: {
//y轴刻度线
show: false
},
splitLine: {
show: false
}
}
],
series: [
{
name: this.PMozone,
type: "bar",
data: this.Allpmo,
color: "#00ff00",
`这个样式判断,我是根据数据的大小来变换对应的颜色`
itemStyle: {
normal: {
color: function(params) {
let index_color = params.value;
if (val == 1 || val == 2) {
if (index_color <= 100) {
return "#00ff00";
} else if (index_color > 100 && index_color <= 160) {
return "#f5fc13";
} else if (index_color > 160 && index_color <= 215) {
return "#ff8400";
} else if (index_color > 215 && index_color <= 265) {
return "#fc0000";
} else if (index_color > 265 && index_color <= 800) {
return "#9b004f";
} else if (index_color > 800 && index_color < 1800) {
return "#9b004f";
}
} else if (val == 3 || val == 4) {
if (index_color <= 35) {
return "#00ff00";
} else if (index_color > 35 && index_color <= 75) {
return "#f5fc13";
} else if (index_color > 75 && index_color <= 115) {
return "#ff8400";
} else if (index_color > 115 && index_color <= 150) {
return "#fc0000";
} else if (index_color > 150 && index_color <= 250) {
return "#9b004f";
} else if (index_color > 250 && index_color <= 500) {
return "#860023";
}
}
}
}
}
},
{
data: this.windArr,
name: "风速风向",
type: "line",
symbol: "arrow",
symbolSize: "12",
lineStyle: {
// color: colors[3]
color: "#D1548C"
},
itemStyle: {
normal: {
color: "#FF00FF"
}
},
label: {
show: true, // 开启显示
position: "top", // 在上方显示
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
verticalAlign: "middle",
textStyle: {
// 数值样式
color: colors[4],
fontSize: 12
}
},
animation: false,
yAxisIndex: 1
},
{
data: this.temperatureArr,
name: "温度",
type: "line",
top: "10",
animation: false,
yAxisIndex: 2,
lineStyle: {
// color: colors[3]
color: "#10a0e1"
},
itemStyle: {
normal: {
color: "#10a0e1"
}
}
},
{
data: this.humidityArr,
name: "湿度",
type: "line",
top: "10",
animation: false,
yAxisIndex: 3,
color: "#c6b45e"
},
{
name: "实测" + this.PMozone,
data: this.shicedata,
type: "line",
// symbolSize: "12",
color: "red"
// animation: false,
// yAxisIndex: 3
}
]
});
},
formatter这个函数的效果
这个函数里是自己定义的,如果没有这种需求可按照官网上的方式方便
image.png
这是增加滚动条的效果
dataZoom: [{
type: 'slider', //图表下方的伸缩条
show: true, //是否显示
realtime: true, //拖动时，是否实时更新系列的视图
start: 0, //伸缩条开始位置（1-100），可以随时更改
end: 100, //伸缩条结束位置（1-100），可以随时更改
height: 20,
bottom: 70,
}, {
type: 'inside'
}],
image.png
增加y轴上的线
image.png
判断风向八个方位的
var wind_degreeRandernum = []; //新数组
var windDirection = ['北', '东北', '东', '东南', '南', '西南', '西', '西北']
var direction = [0, 45, 90, 135, 180, 225, 270, 315]
// wind_direction 后台获取的风向 根据风向判断是哪个角度
for (var i = 0; i < wind_direction.length; i++) {
if (wind_direction[i] == windDirection[0]) {
wind_degreeRandernum.push(direction[4]);
} else if (wind_direction[i] == windDirection[1]) {
wind_degreeRandernum.push(direction[5]);
} else if (wind_direction[i] == windDirection[2]) {
wind_degreeRandernum.push(direction[6]);
} else if (wind_direction[i] == windDirection[3]) {
wind_degreeRandernum.push(direction[7]);
} else if (wind_direction[i] == windDirection[4]) {
wind_degreeRandernum.push(direction[0]);
} else if (wind_direction[i] == windDirection[5]) {
wind_degreeRandernum.push(direction[1]);
} else if (wind_direction[i] == windDirection[6]) {
wind_degreeRandernum.push(direction[2]);
} else if (wind_direction[i] == windDirection[7]) {
wind_degreeRandernum.push(direction[3]);
}
}
判断16个方位的
var windDirection = [
"北",
"北东北",
"东北",
"东东北",
"东",
"东东南",
"东南",
"南东南",
"南",
"南西南",
"西南",
"西西南",
"西",
"西西北",
"西北",
"北西北"
]; //风向十六方位
for (var i = 0; i < this.windSpeedArr.length; i++) {
var temp = {};
var value = this.windSpeedArr[i];//风速
//风向180-度就是风向的位置
var symbolRotate = 180 - this.wind_direction_degrs[i];
var wind_direction = "";
if (
this.wind_direction_degrs[i] > 348.75 ||
this.wind_direction_degrs[i] <= 11.25
) {
//北
wind_direction = windDirection[0];
} else if (
this.wind_direction_degrs[i] > 11.25 &&
this.wind_direction_degrs[i] <= 33.75
) {
//北东北
wind_direction = windDirection[1];
} else if (
this.wind_direction_degrs[i] > 33.75 &&
this.wind_direction_degrs[i] <= 56.25
) {
//东北
wind_direction = windDirection[2];
} else if (
this.wind_direction_degrs[i] > 56.25 &&
this.wind_direction_degrs[i] <= 78.75
) {
//东东北
wind_direction = windDirection[3];
} else if (
this.wind_direction_degrs[i] > 78.75 &&
this.wind_direction_degrs[i] <= 101.25
) {
//东
wind_direction = windDirection[4];
} else if (
this.wind_direction_degrs[i] > 101.25 &&
this.wind_direction_degrs[i] <= 123.75
) {
//东东南
wind_direction = windDirection[5];
} else if (
this.wind_direction_degrs[i] > 123.75 &&
this.wind_direction_degrs[i] <= 146.25
) {
//东南
wind_direction = windDirection[6];
} else if (
this.wind_direction_degrs[i] > 146.25 &&
this.wind_direction_degrs[i] <= 168.75
) {
//南东南
wind_direction = windDirection[7];
} else if (
this.wind_direction_degrs[i] > 168.75 &&
this.wind_direction_degrs[i] <= 191.25
) {
//南
wind_direction = windDirection[8];
} else if (
this.wind_direction_degrs[i] > 191.25 &&
this.wind_direction_degrs[i] <= 213.75
) {
//南西南
wind_direction = windDirection[9];
} else if (
this.wind_direction_degrs[i] > 213.75 &&
this.wind_direction_degrs[i] <= 236.25
) {
//西南
wind_direction = windDirection[10];
} else if (
this.wind_direction_degrs[i] > 236.25 &&
this.wind_direction_degrs[i] <= 258.75
) {
//西西南
wind_direction = windDirection[11];
} else if (
this.wind_direction_degrs[i] > 258.75 &&
this.wind_direction_degrs[i] <= 281.25
) {
//西
wind_direction = windDirection[12];
} else if (
this.wind_direction_degrs[i] > 281.25 &&
this.wind_direction_degrs[i] <= 303.75
) {
//西西北
wind_direction = windDirection[13];
} else if (
this.wind_direction_degrs[i] > 303.75 &&
this.wind_direction_degrs[i] <= 326.25
) {
//西北
wind_direction = windDirection[14];
} else if (
this.wind_direction_degrs[i] > 326.25 &&
this.wind_direction_degrs[i] <= 348.75
) {
//北西北
wind_direction = windDirection[15];
}
temp.value = value;
temp.direction = wind_direction;
temp.symbolRotate = symbolRotate;
this.direction.push(temp.direction);
this.windArr.push(temp);
}
