214Echarts - 数据区域缩放（Wind Barb）

效果图

源代码


$.getJSON('data/asset/data/wind-barb-hobart.json', function (rawData) {var weatherIcons = {'Showers': './data/asset/img/weather/showers_128.png','Sunny': './data/asset/img/weather/sunny_128.png','Cloudy': './data/asset/img/weather/cloudy_128.png'};var directionMap = {};echarts.util.each(['W', 'WSW', 'SW', 'SSW', 'S', 'SSE', 'SE', 'ESE', 'E', 'ENE', 'NE', 'NNE', 'N', 'NNW', 'NW', 'WNW'],function (name, index) {directionMap[name] = Math.PI / 8 * index;});var data = echarts.util.map(rawData.data, function (entry) {return [entry.time, entry.windSpeed, entry.R, entry.waveHeight];});var weatherData = echarts.util.map(rawData.forecast, function (entry) {return [entry.localDate, 0, weatherIcons[entry.skyIcon], entry.minTemp, entry.maxTemp];});var dims = {time: 0,windSpeed: 1,R: 2,waveHeight: 3,weatherIcon: 2,minTemp: 3,maxTemp: 4};var arrowSize = 18;var weatherIconSize = 45;function renderArrow(param, api) {var point = api.coord([api.value(dims.time),api.value(dims.windSpeed)]);return {type: 'path',shape: {pathData: 'M31 16l-15-15v9h-26v12h26v9z',x: -arrowSize / 2,y: -arrowSize / 2,width: arrowSize,height: arrowSize},rotation: directionMap[api.value(dims.R)],position: point,style: api.style({stroke: '#555',lineWidth: 1})};}function renderWeather(param, api) {var point = api.coord([api.value(dims.time) + 3600 * 24 * 1000 / 2,0]);return {type: 'group',children: [{type: 'image',style: {image: api.value(dims.weatherIcon),x: -weatherIconSize / 2,y: -weatherIconSize / 2,width: weatherIconSize,height: weatherIconSize},position: [point[0], 110]}, {type: 'text',style: {text: api.value(dims.minTemp) + ' - ' + api.value(dims.maxTemp) + '°',textFont: api.font({fontSize: 14}),textAlign: 'center',textVerticalAlign: 'bottom'},position: [point[0], 80]}]};}option = {title: {text: '天气 风向 风速 海浪 预报',subtext: '示例数据源于 www.seabreeze.com.au',left: 'center'},tooltip: {trigger: 'axis',formatter: function (params) {return [echarts.format.formatTime('yyyy-MM-dd', params[0].value[dims.time])+ ' ' + echarts.format.formatTime('hh:mm', params[0].value[dims.time]),'风速：' + params[0].value[dims.windSpeed],'风向：' + params[0].value[dims.R],'浪高：' + params[0].value[dims.waveHeight]].join('<br>');}},grid: {top: 160,bottom: 125},xAxis: {type: 'time',maxInterval: 3600 * 1000 * 24,splitLine: {lineStyle: {color: '#ddd'}}},yAxis: [{name: '风速（节）',nameLocation: 'middle',nameGap: 35,axisLine: {lineStyle: {color: '#666'}},splitLine: {lineStyle: {color: '#ddd'}}}, {name: '浪高（米）',nameLocation: 'middle',nameGap: 35,max: 6,axisLine: {lineStyle: {color: '#015DD5'}},splitLine: {show: false}}, {axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false},splitLine: {show: false}}],visualMap: {type: 'piecewise',// show: false,orient: 'horizontal',left: 'center',bottom: 10,pieces: [{gte: 17,color: '#18BF12',label: '大风（>=17节）'}, {gte: 11,lt: 17,color: '#f4e9a3',label: '中风（11  ~ 17 节）'}, {lt: 11,color: '#D33C3E',label: '微风（小于 11 节）'}],seriesIndex: 1,dimension: 1},dataZoom: [{type: 'inside',xAxisIndex: 0,minSpan: 5}, {type: 'slider',xAxisIndex: 0,minSpan: 5,height: 20,bottom: 50,handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',handleSize: '120%'}],series: [{type: 'line',yAxisIndex: 1,showSymbol: false,hoverAnimation: false,symbolSize: 10,areaStyle: {normal: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'rgba(88,160,253,1)'}, {offset: 0.5, color: 'rgba(88,160,253,0.7)'}, {offset: 1, color: 'rgba(88,160,253,0)'}]}}},lineStyle: {normal: {color: 'rgba(88,160,253,1)'}},itemStyle: {normal: {color: 'rgba(88,160,253,1)'}},encode: {x: dims.time,y: dims.waveHeight},data: data,z: 2}, {type: 'custom',renderItem: renderArrow,encode: {x: dims.time,y: dims.windSpeed},data: data,z: 10}, {type: 'line',symbol: 'none',encode: {x: dims.time,y: dims.windSpeed},lineStyle: {normal: {color: '#aaa',type: 'dotted'}},data: data,z: 1}, {type: 'custom',renderItem: renderWeather,data: weatherData,tooltip: {trigger: 'item',formatter: function (param) {return param.value[dims.time] + ': '+ param.value[dims.minTemp] + ' - ' + param.value[dims.maxTemp] + '°';}},yAxisIndex: 2,z: 11}]};myChart.setOption(option);
});

214Echarts - 数据区域缩放（Wind Barb）相关推荐

echarts 数据区域缩放
echarts 数据区域缩放官方文档:Documentation - Apache ECharts ********************* 配置属性 **************** 内置型组件 ...
Echarts图表设置x轴y轴均随滚轮滚动缩+放区域缩放
文章目录 echarts中设置x轴和y轴均随滚轮进行缩放当数据实时渲染时,也可进行区域缩放 echarts中设置x轴和y轴均随滚轮进行缩放 dataZoom 组件用于区域缩放,从而能自由关注细节的 ...
ECharts 区域缩放组件使用详解
dataZoom 说明:区域缩放组件,用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响. 1 toolbox.show 说明:是否显示区域缩放组件.如果设置为 fal ...
echarts横向滚动_ECharts滑动条型数据区域缩放组件（dataZoomSlider）
dataZoom[i]-slider 滑动条型数据区域缩放组件(dataZoomSlider) dataZoom[i]-slider.type | string [ default: 'sli ...
echart dataZoom区域缩放
微信小程序场景遇到的问题: 使用dataZoom进行区域缩放,echart实例编辑器已编译出数据,但是在微信小程序上的显示,拖动数据区域,数据缺失,仅显示前3条!!!(echart实例编辑器:http ...
Echarts 区域缩放以及设置Y轴显示
一.区域缩放首先在option添加toolbox,也就是右上角的功能图标块 toolbox: {trigger: 'axis',//鼠标经过提示show:true,feature:{dataZoom ...
bug诞生记——const_cast引发只读数据区域写违例
对于C++这种强类型的语言,明确的类型既带来了执行的高效,又让错误的发生提前到编译期.所以像const这类体现设计者意图的关键字,可以隐性的透露给我们它描述的对象的使用边界.它是我们的朋友,我们要学会 ...
Java 运行时数据区域，哪些是线程隔离的？哪些又是公有的？
来自:会点代码的大叔 JVM 运行时数据区域大致可以分为:程序计数器.虚拟机栈.本地方法栈.堆区.元空间.运行时常量池.直接内存等区域:就是下面这个样子的: 其中有些区域,随着 JDK 版本的升级不断 ...
R语言使用Rtsne包进行TSNE分析：通过数据类型筛选数值数据、scale函数进行数据标准化缩放、提取TSNE分析结果合并到原dataframe中（tSNE with Rtsne package）
R语言使用Rtsne包进行TSNE分析:通过数据类型筛选数值数据.scale函数进行数据标准化缩放.提取TSNE分析结果合并到原dataframe中(tSNE with Rtsne package) ...

214Echarts - 数据区域缩放（Wind Barb）

效果图

源代码

214Echarts - 数据区域缩放（Wind Barb）相关推荐

最新文章

热门文章