这种左边、上边、下边都有数据的echarts图表要怎么做呢，我查了下包括配置那块不知道怎么处理，有知道的吗？

AI BotBETA

要创建这种左边、上边和下边都有数据的echarts图表，你需要使用Grid组件和适当的位置来放置数据标签。以下是一个基本的实现步骤：

初始化echarts实例，设置基本配置项，如option和grid。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    ...
};

myChart.setOption(option);

创建用于显示数据的系列（series）。根据你的数据类型，可以选择使用bar、line、pie等不同类型的系列。在系列配置项中，设置label的position属性为'left'、'top'或'bottom'，以将数据标签放置在相应的位置。

var seriesData = [
    {
        name: '系列1',
        type: 'bar',
        data: [220, 182, 191, 234, 290, 330, 310, 123, 442, 321],
        label: {
            show: true,
            position: 'left'
        }
    },
    {
        name: '系列2',
        type: 'line',
        data: [120, 132, 101, 144, 90, 230, 210],
        label: {
            show: true,
            position: 'top'
        }
    },
    {
        name: '系列3',
        type: 'pie',
        data: [{value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'}],
        label: {
            show: true,
            position: 'bottom'
        }
    }
];

seriesData.forEach(function (item) {
    option.series.push(item);
});

在option中添加其他必要的配置项，如title、tooltip等。

var option = {
    title: {
        text: '左边、上边、下边都有数据的图表'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    ...
};

2 个回答

得票最新