前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Echart双数值轴极坐标显示格式化 原

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

作者头像
tianyawhl
发布2019-04-04 16:01:22
1.2K0
发布2019-04-04 16:01:22
举报
文章被收录于专栏:前端之攻略

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

下面为完整的option代码

代码语言:javascript
复制
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);

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017/04/07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档