echarts风向图

2024-06-17 03:23:14

1.template

2.methods

initEcharts() {
this.myChart2 = Echarts.init(document.getElementById(‘myEcharts2’))
this.myChart2.setOption({
title: {
text: ‘测试’,
},
tooltip: {},
angleAxis: {
type: ‘category’,
data: [
‘N’,
‘NNE’,
‘NE’,
‘ENE’,
‘E’,
‘ESE’,
‘SE’,
‘SSE’,
‘S’,
‘SSW’,
‘SW’,
‘WSW’,
‘W’,
‘WNW’,
‘NW’,
‘NWW’,
],
z: 1,
boundaryGap: false,
splitLine: {
show: true,
lineStyle: {
color: ‘#ddd’,
type: ‘solid’,
},
},
axisLine: {
show: true,
lineStyle: {
color: ‘blue’,
type: ‘solid’,
},
},
},
axisTick: {
show: false,
},
radiusAxis: {
center: [‘50%’, ‘50%’],
},
grid: {
x: 140,
x2: 100,
y2: 150,
},
polar: {},
series: [
{
name: ‘0.00m/s’,
type: ‘bar’,
stack: ‘name’,
data: [0, 2.96, 2.53, 1.97, 1.32, 1.58, 1.6, 1.9],
coordinateSystem: ‘polar’,
},
{
name: ‘0.00m/s’,
type: ‘bar’,
stack: ‘name’,
color: ‘#000’,
data: [0.59, 2.96, 2.53, 1.97, 1.32, 1.58, 1.6, 1.9],
coordinateSystem: ‘polar’,
},
{
name: ‘0.00m/s’,
type: ‘bar’,
stack: ‘name’,
color: ‘#ee4’,
data: [0.59, 2.96, 2.53, 1.97, 1.32, 1.58, 1.6, 1.9],
coordinateSystem: ‘polar’,
},
],
})
},

3.效果

echarts风向图相关推荐

Echarts实现自定义图标——风向图
上图用了两种模式表示风向图,第一种是自定义系列,第二种使用了折线图,给折线图添加自定义图标. 两者的区别在于给options.series设置不同的type值,如下图: 那么我们来一步步实现代码,先创 ...
echarts渲染一个风向图
今天给大家说一个用echarts渲染一个风向图,这里图上其实有三个要素,风向,风级和能见度,主要还是讲讲代码里面的坑 1.风向图标方向修改以及设置 var ownData = echarts.util ...
echarts折线风向图（附源码，可直接使用）
这是效果图,可以根据自己需要继续优化这是代码,注释的相当明白了,有问题可以联系我,有用帮忙点下赞: <!DOCTYPE html> <html lang="en" ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
d3.js 教程模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
html5 尾迹特效,如何设置ECharts线图的特效
您可以使用 ECharts 线图的 effect 属性来贵线特效进行配置,可以参考示例模拟迁徙和北京公交路线. 注意: 所有带有尾迹特效的图表需要单独放在一个层,也就是需要单独设置zlevel, ...
echarts折线图默认显示最后一个点的数据
echarts折线图默认显示最后一个点的数据想要达到这种效果图如下: 如果你给折线图设置数据显示,那么要不就全部隐藏,要不就全部显示在折线上.实现指定点的显示就需要你自己去处理这个数据了. 方式有两 ...
Echarts折线图的平移假动画
Echarts折线图的平移假动画 #可视化项目中经常用图表的方式来展示数据,折线图是经常出现的,但是在echarts折线图中正常情况是通过删除数据的第一个,添加一个新数据在数组的末尾来实现动画,此动画 ...

最新文章

热门文章