资讯专栏INFORMATION COLUMN

echarts拆线图和柱状图叠加,双Y轴,动画延时

LeexMuller / 1106人阅读

摘要:需求制作叠加的拆线图,柱状图,双轴工具代码交易日柱状图动画延迟成交价昨收价成交额成交价元成交额万元成交价昨收价成交额效果图关键说明中可以叠加多组数据,要指定中的第二个轴中的表示的位置,表示在最大值处,默认在值一端表示数值序列是否倒置。

需求

制作叠加的拆线图,柱状图,双Y轴

工具

echarts

代码
var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
for (var i = 0; i < 50; i++) {
    xAxisData.push("交易日" + i);
    data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
    data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
    data3.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 15);
}

option = {
    title: {
        text: "柱状图动画延迟"
    },
    legend: {
        data: ["成交价", "昨收价","成交额"],
        align: "left"
    },
    toolbox: {
        // y: "bottom",
        feature: {
            magicType: {
                type: ["stack", "tiled"]
            },
            dataView: {},
            saveAsImage: {
                pixelRatio: 2
            }
        }
    },
    tooltip: {},
    xAxis: {
        data: xAxisData,
        silent: false,
        splitLine: {
            show: false
        }
    },
    yAxis:  [{
            name: "成交价(元)",
            type: "value"
        },
        {
            name: "成交额(万元)",
            nameLocation: "end",
            //max: 2000,
            type: "value",
            //inverse:false
        }],
    series: [{
        name: "成交价",
        type: "line",
        data: data1,
        animationDelayUpdate: function (idx) {
            return idx * 15;
        }
    }, {
        name: "昨收价",
        type: "line",
        data: data2,
        animationDelayUpdate: function (idx) {
            return idx * 15;
        }
    },{
        name:"成交额",
        yAxisIndex:1,
        data: data3,
        type: "bar",
        smooth: true,
        animationDelayUpdate: function (idx) {
            return idx * 15;
        }
    }],
    animationEasing: "elasticOut"
};
效果图

关键说明

1.series中可以叠加多组数据,要指定type
2.yAxis中的第二个Y轴中的nameLocation表示name的位置,end表示在最大值处,默认在0值一端;inverse表示数值序列是否倒置。
3.对应第二个Y轴的series要添加属性yAxisIndex,否则无法关联第二个Y轴

微信小程序适配

微信小程序中的提示tooltip和工具栏toolbox是无效的。可以通过添加事件来实现提示。

chart.on("click",(params)=>{
    wx.showModel({
        content: "clicked index:" + params.dataIndex,
    });
});

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96763.html

相关文章

  • echartsxy的配置

    摘要:最近的项目中用到了的双轴和双轴的设置,特此记录一下鼠标悬停提示内容坐标轴指示器,坐标轴触发有效十字线显示标准保费增长轴轴显示两组数据第个轴两个轴左边轴金额元右边轴增长用于指定图标显示类型第一个柱状图的数据标准保费第一个柱状图的数据第二个柱状 最近的项目中用到了echarts的双x轴和双y轴的设置,特此记录一下; option = { tooltip: { //鼠标悬停提示内容 ...

    Steven 评论0 收藏0
  • HTML5 进阶系列:canvas 动态

    摘要:而可视化图表,则是强大功能的表现之一。效果动画效果图片显示不出来,可以到最下面找地址分析可以这个图表由轴数据条形和标题组成。这里就需要监听事件,当鼠标的位置位于柱状的面积内,触发事件。 前言 canvas 强大的功能让它成为了 HTML5 中非常重要的部分,至于它是什么,这里就不需要我多作介绍了。而可视化图表,则是 canvas 强大功能的表现之一。 现在已经有了很多成熟的图表插件都是...

    sanyang 评论0 收藏0

发表评论

0条评论

LeexMuller

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<