tes2ECharts Gallery

20:11:45图表已生成
代码
var symbolRotateNum = [65.64268816, 329.5022138, 5.19442891, 332.2776158, 186.5569465, 304.7644909, 102.4904057, 339.251805, 28.02450053, 348.9739084, 41.08175114, 82.63643334, 53.10932043, 330.6242346, 351.3346244, 354.761498, 3.07176243, 20.84148948, 357.6403165, 12.51888808, 7.74269725, 1.78273783, 17.95432983, 28.04791691, 29.05711487, 3.92559237, 12.60615413, 14.85358262, 23.09608517, 1.58485439, 33.44692394, 29.04457274, 10.9743827, 34.74390996, 28.28636426, 26.31105002, 61.26933357, 18.89589644, 57.55318889, 41.35340466, 10.44292344, 7.97901509, 24.59742844, 18.61636529, 4.52882424, 25.97079045, 355.6559425, 0.79572355, 55.68836895, 44.82584923, 342.05599, 353.3792239, 311.9516251, 352.0620509, 98.2607788, 321.1322225, 339.8265006, 38.53018001, 50.7927965, 352.7547523, 5.14276456, 357.5784869, 295.9506428, 8.91243497, 8.91784307, 32.05157292, 348.2317111, 327.5938964, 17.73007668, 23.12347591, 358.6719523, 347.9291527, 191.9441772, 308.405485, 17.96641901, 103.2405199, 273.2094863, 272.819106, 63.76806007, 213.2470678, 178.7635924, 342.2013829, 143.9485578, 163.4870071, 349.8358304];
var valueNum = [0.01418886, 0.03670826, 0.0261816, 0.01581542, 0.00973031, 0.02903442, 0.00599371, 0.02953055, 0.01300654, 0.01026354, 0.00397998, 0.01260395, 0.02120769, 0.01332924, 0.24164726, 0.27462853, 0.16595273, 0.26681533, 0.22864215, 0.21603282, 0.21781337, 0.1746512, 0.15079495, 0.14159774, 0.14299834, 0.16660965, 0.14060835, 0.13336269, 0.0986236, 0.11863913, 0.08912263, 0.05043328, 0.04059079, 0.06306159, 0.07137593, 0.04279741, 0.01566366, 0.04277584, 0.05301082, 0.05395334, 0.02401544, 0.02839252, 0.04025941, 0.04993633, 0.00595978, 0.02155949, 0.02601592, 0.01694281, 0.02556666, 0.00684233, 0.02930795, 0.0198974, 0.01407887, 0.02108438, 0.02006109, 0.03290235, 0.03402875, 0.00203026, 0.01486085, 0.01970277, 0.02362451, 0.02438541, 0.01471943, 0.01309933, 0.02306672, 0.03586006, 0.0151418, 0.02184273, 0.04838651, 0.02651234, 0.04695379, 0.01476769, 0.00468977, 0.01448756, 0.04777059, 0.00370454, 0.00974255, 0.00800969, 0.00466194, 0.00978319, 0.0042131, 0.02402491, 0.03182143, 0.01473264, 0.00772733]; // 数值
var timeData = ['6:00', '6:15', '6:30', '6:45', '7:00', '7:15', '7:30', '7:45', '8:00', '8:15', '8:30', '8:45', '9:00', '9:15', '9:30', '9:45', '10:00', '10:15', '10:30', '10:45', '11:00', '11:15', '11:30', '11:45', '12:00', '12:15', '12:30', '12:45', '13:00', '13:15', '13:30', '13:45', '14:00', '14:15', '14:30', '14:45', '15:00', '15:15', '15:30', '15:45', '16:00', '16:15', '16:30', '16:45', '17:00', '17:15', '17:30', '17:45', '18:00', '18:15', '18:30', '18:45', '19:00', '19:15', '19:30', '19:45', '20:00', '20:15', '20:30', '20:45', '21:00', '21:15', '21:30', '21:45', '22:00', '22:15', '22:30', '22:45', '23:00', '23:15', '23:30', '23:45', '0:00', '0:15', '0:30', '0:45', '1:00', '1:15', '1:30', '1:45', '2:00', '2:15', '2:30', '2:45', '3:00']; //时间
var roateData = echarts.util.map(valueNum, function(item, index) {
    return {
        value: valueNum[index],
        time: timeData[index],
        symbolRotate: symbolRotateNum[index]
    };
});

var arrowSize = 18;
var weatherIconSize = 45;

function renderArrow(param, api) {
    var point = api.coord([
        api.value(timeData),
        api.value(valueNum)
    ]);

    return {
        type: 'path',
        shape: {
            pathData: 'M31 16l-15-15v9h-26v12h26v9z',
            x: -arrowSize / 2,
            y: -arrowSize / 2,
            width: arrowSize,
            height: arrowSize
        },
        rotation: roateData,
        position: point,
        style: api.style({
            stroke: '#555',
            lineWidth: 1
        })
    };
}

option = {
    title: {
        text: 'ADCP流速流向图',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function() {
            return [
                '时间：' + roateData[0].time,
                '流速：' + roateData[0].value,
                '流向：' + roateData[0].symbolRotate
            ].join('<br>');
        }
    },
    grid: {
        top: 50,
        bottom: 125
    },
    xAxis: {
        type: 'category',
        name: '时间',
        nameLocation: 'middle',
        nameGap: 35,
        splitLine: {
            lineStyle: {
                color: '#ddd'
            }
        },
        //时间
        data: timeData
    },
    yAxis: {
        type: 'value',
        name: '风速',
        nameLocation: 'middle',
        nameGap: 35,
        axisLine: {
            lineStyle: {
                color: '#666'
            }
        },
        splitLine: {
            lineStyle: {
                color: '#ddd'
            }
        }
    },
    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: [{
        data: roateData,
        x: timeData,
        y: valueNum,
        type: 'line',
        symbol: 'arrow',
        symbolSize: '20'
    }]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
