echart一轴控制两图表

最新推荐文章于 2024-05-22 10:05:28 发布

chshyuxyz

最新推荐文章于 2024-05-22 10:05:28 发布

阅读量560

点赞数

分类专栏： echarts

本文链接：https://blog.csdn.net/chshyuxyz/article/details/100074533

版权

本文详细探讨了如何使用ECharts库实现一个坐标轴控制两个不同类型的图表（如柱状图与折线图）同步联动的效果，通过实例代码解析配置项设置，帮助读者理解这种数据可视化技巧。

摘要由CSDN通过智能技术生成

option = {
    baseOption: {
        timeline: {
            axisType: 'category',
            //autoPlay: true, 
            playInterval: 1000,
            data: [
                '猫咪', 'dog', '小兔子',
                {
                    value: 'Java',
                    tooltip: {
                        formatter: '{b} GDP达到一个高度'
                    },
                    symbol: 'diamond',
                    symbolSize: 16
                },
                'c#', 'c++'
            ],
        },

        title: {
            subtext: '数据来自木可统计局'
        },
        tooltip: {},
        legend: [{
            left: '30%',
            data: ["银币"]
        }, {
            left: '70%',
            data: ["比", "金币1", "黑笔", "同比"]
        }],
        calculable: true,
        grid: [{
            x: '7%',
            y: '7%',
            height: '80%',
            width: '38%',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true,
                        formatter: function(params) {
                            return params.value.replace('\n', '');
                        }
                    }
                }
            }
        }, {
            x2: '7%',
            y: '7%',
            height: '80%',
            width: '38%',
            tooltip: {
                trigger: 'axis&