本文共 724 字，大约阅读时间需要 2 分钟。

建议：

前端本地设置多个变量，暂存多个图形echarts的option配置对象，例如:

option1: {

    grid: { // 图标距离容器的边距         left: '10%',         right: '5%',         bottom: '20%',         top: '10%',         scontainLabel: true     },     xAxis: {     type: 'value',     // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],     axisLine: {         lineStyle: {             color: "#fff",             }         },     },     yAxis: {         type: 'category',         data: ['小王', '小李', '小赵', '小刘', '小刚', '小吴'],         axisLine: {             lineStyle: {             color: "#fff",             }         },         nameTextStyle: {             fontSize: 11         },         axisLabel: {             interval: 0,             }     },     series: [{         data: [120, 200, 150, 130, 90, 115],         type: 'bar',         color: '#2C58A6'     }] },

,或者是空对象也行，这个时候形成界面图形与数据一一对应的数据显示模型，然后因为是单页面展示，这个时候可以让后台将这个页面的图形数据放到一个请求接口中提供给你，避免单页面浏览器渲染加载时，请求过多响应慢的问题，若这个页面存在区块图形内有人机交互操作，可再增加功能接口，这样在大屏展示时，可以避免酷炫的界面效果因为数据问题而尴尬的展示----显图无值状态。

转载地址：http://rgii.baihongyu.com/