Echart双数值轴极坐标显示格式化

最新推荐文章于 2025-03-31 20:29:26 发布

转载最新推荐文章于 2025-03-31 20:29:26 发布 · 827 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2612473/blog/874977

文章标签：

#javascript #python #ViewUI

本文介绍如何使用ECharts实现极坐标图的时间轴显示，通过格式化角度为时间并调整tooltip显示，最终实现时间与对应压力数值的可视化。

2019独角兽企业重金招聘Python工程师标准>>>

最近需要做个极坐标图，显示时间与对应的压力数值，并且有多个点，查看echart双数值轴中可以做到多个点，但是外围显示的是角度，我们需要把角度格式化成时间，并且tooltip也要对应显示时间与压力

下面为完整的option代码

var option2 = {
    //title: {
    //text: '极坐标双数值轴'
    //},
    legend: {
        data: ['line']
    },
    polar: {},
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function(params) {
            var value1
            var value = (params[0].value[1] / 15 + 8) >= 24 ? params[0].value[1] / 15 + 8 - 24 : params[0].value[1] / 15 + 8;

            if (value % 1 === 0) {
                value1 = value + ":00";
            } else {
                value1 = value.toString().replace(".5", ":30");
            }
            return params[0].value[0] + "<br>" + value1;
        }
    },
    angleAxis: {
        type: 'value',
        min: 0,
        max: 360,
        interval: 15,
        startAngle: 0,
        axisLabel: {
            formatter: function(value, index) {
                var value = value / 15 + 8;
                if (value >= 24) {
                    value = value - 24;
                }
                return value + ":00";

            }
        },
    },
    radiusAxis: {},
    series: [{
        coordinateSystem: 'polar',
        name: 'ok',
        type: 'line',
        //showSymbol:false,
        data: data
    }]
};

//  console.log(option2); 
var myChart = echarts.init(document.getElementById('chart2'), theme);
myChart.setOption(option2);

转载于:https://my.oschina.net/u/2612473/blog/874977