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

Question

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

Answer 1

别被唬住了，
你把它放地上就明白了，
X轴Y轴的问题，无非就是数据对调一下，
Y轴 表述数据的名称，
顶部X轴和底部X轴对应数据
无非就是一组数据对应一边的轴，
和你日常做的没啥差距

Answer 2

看这个demo

Answer 3

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

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

var myChart = echarts.init(document.getElementById('main'));var option = {    grid: {        left: '3%',        right: '4%',        bottom: '3%',        containLabel: true    },    ...};myChart.setOption(option);

2. 创建用于显示数据的系列（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);});

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

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