一个页面实现多个echarts图表

• Z时代
• 2024-02-11
• 分类：IT

下拉多选参数，拿到返回值后渲染各个参数的图表。
请问如何实现多个图表？需要动态生成多个div ，每个div绑定一个图表吗？

回答：

一个div就可以，直接上option

option = {
    title: [
        {
        text:"产量",
        left:"23%"
    },
     {
        text:"仓储",
        left:"23%",
        top:"51%"
    },
    {
        text:"开工率",
        top:"51%",
        right:"23%"
    },
    ],
    dataZoom: [
            {
            xAxisIndex: 0,
            type: 'slider',
            show: true,
            height: 20,
            width:"25%",
            left:"13%",
            top:"42%",
            start: 50,
            end: 100,
            textStyle: {
                color: '#FF0000',
                fontSize: 11,
            }
            },
            {
            xAxisIndex: 1,
            type: 'slider',
            show: true,
            height: 20,
            right: '14%',
            width:"25%",
            start: 50,
            end: 100,
            textStyle: {
                color: '#FF0000',
                fontSize: 11,
            }
            },
            {
          xAxisIndex: 2,
            type: 'slider',
            show: true,
            width:"25%",
            left:"13%",
            height: 20,
            start: 50,
            end: 100,
            textStyle: {
                color: '#FF0000',
                fontSize: 11,
            }
            }, ],
    tooltip: {
            trigger: 'axis'
    },
    grid: [
        {x: '7%', y: '7%', width: '38%', height: '38%'},
        {x2: '7%', y: '58%', width: '38%', height: '38%'},
        {x: '7%', y2: '4%', width: '38%', height: '38%'},
    ],
    legend:{
            type: "scroll",
            orient: "vertical",
            right:"20%",
            top: "6%",
    },
    xAxis: [
        {   gridIndex: 0,
            type: 'category',
            data: ["2018年4月","2018年5月"]
        },
        {   gridIndex: 1,
            type: 'category',
            offset:-120,
            data: ["2018年4月","2018年5月"]
        },
        {   gridIndex: 2,
            type: 'category',
            data: ["2018年4月","2018年5月"]
        },
    ],
    yAxis: [
        {   gridIndex: 0, 
            type: 'value',
            name: "万吨",
        },
        {   gridIndex: 1, 
            type: 'value',
             axisLabel: {
            formatter: "{value} %"
          }
        },
        {   gridIndex: 2, 
            type: 'value',
            name: "万吨"
        },
    ],
    series: [
        {
            name:"济南华阳炭素有限公司",
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data:  [1.2, 1.2],
        },
        {
            name:"济南万瑞炭素有限责任公司",
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data:  [4, 4],
        },
        {
            name:"济南龙山炭素有限公司",
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: [2.4, 2.4],
        },
        {
            name:"德州欧莱恩永兴碳素有限公司",
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: [0.67, 0.5],
        },
        {
            name:"济南华阳炭素有限公司",
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data:[47, 91.67]
        },
        {
            name:"济南万瑞炭素有限责任公司",
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data:[84, 84]
        },
        {
            name:"济南龙山炭素有限公司",
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data:[70, 80]
        },
        {
            name:"德州欧莱恩永兴碳素有限公司",
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data:[90, 90]
        },
        {
            name:"济南华阳炭素有限公司",
            type: 'line',
            xAxisIndex: 2,
            yAxisIndex: 2,
            data:[0.8, 0.8]
        },
        {
            name:"济南万瑞炭素有限责任公司",
            type: 'line',
            xAxisIndex: 2,
            yAxisIndex: 2,
            data:[3.2, 3.2]
        },
        {
            name:"济南龙山炭素有限公司",
            type: 'line',
            xAxisIndex: 2,
            yAxisIndex: 2,
            data:[2.2, 2.2]
        },
        {
            name:"德州欧莱恩永兴碳素有限公司",
            type: 'line',
            xAxisIndex: 2,
            yAxisIndex: 2,
            data:[1.2, 1.2]
        }
    ]
};

回答：

1、多个div，每个div都是一个图表
2、一个div，一个图表，但是分多个grid

回答：

直接使用 echarts 实例的 setOption 方法

https://echarts.apache.org/zh...

大概思路

const echarts = new Echarts(xxx)
//处理数据 1
const option1 = {...}
echarts.setOption(option1,{notMerge:true}) // 此处 notMerge 一定要为 true 即不合并之前的配置项
//处理数据 2
cosnt option2 = {...}
echarts.setOption(option1,{notMerge:true}) // 此处 notMerge 一定要为 true 即不合并之前的配置项

依次类推,每次下拉框变化数据 请求完数据 就处理一遍数据 然后重新 setOption

以上是 一个页面实现多个echarts图表 的全部内容， 来源链接： utcz.com/p/936947.html