动态变化Echart图表信息的处理

最新推荐文章于 2024-06-28 08:46:07 发布

love_shang

最新推荐文章于 2024-06-28 08:46:07 发布

阅读量580

点赞数 1

分类专栏：前端其他文章标签： javascript html

本文链接：https://blog.csdn.net/love_shang/article/details/105415619

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

其他

6 篇文章 0 订阅

订阅专栏

需求

这几天做了一个简单的项目，用于做图表展示的信息，运用到了Echarts处理
(Echarts官网)。要求是可以根据左部菜单进行不停的切换展示的图表信息。简单地说就是做一个二级联动的图表展示。

开发过程中遇到的问题

Echarts使用由于我个人不是很熟练，遇到了一些初学者的坑做一下说明吧
首先是初始化，引用对应的echarts脚本信息开始调用

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom  重点：一定要有宽高，不然不会显示  -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
 <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main')); 
</script>

说明：
重点一定要有宽高，不然不会显示 我被这个地方拦到了一会儿才发现问题（手动笑哭）

接下来就是重点了就是id值唯一的但是想要重复加载图表信息时遇到了问题。
我检查过自己的接口数据，跟踪打印也都是正常的数据获取 也是有变化的但是就是图表没有变化。
从网上找了一些方法但是我测试的是没有效果的 体现不出变化 例如：

<script>
	...
	myChart.setOption(option, true)
</script>

没办法又去继续寻找，终于让我找到了
可以查看脚本信息发现每次从新加载的时候脚本都会弹出一个警告信息
由此进行处理
警告原因：更新图表之前没有将之前的实例dispose销毁掉又重新实例化了图表，所以报警告。
解决办法：
在echarts图表设置内实例化图表之前先将之前的实例dispose销毁掉：
示例：

     /**
     *菜单切换后进行动态变换架构图信息 
     **/
    function ChangeEchart() {
        //先释放旧数据图表信息
        echarts.dispose(document.getElementById('content'));
        //从新初始化
        var myChart = echarts.init(document.getElementById('content'));
        var option = {
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series: [
                {
                    type: 'tree',
                    //数据格式是树状结构的
                    data: [fare],
                    //tree组件离容器左侧的距离
                    left: '2%',
                    //tree组件离容器右侧的距离
                    right: '2%',
                    //tree组件离容器上侧的距离
                    top: '8%',
                    //tree组件离容器下侧的距离。
                    bottom: '20%',
                    //标记的图形。
                    symbol: 'emptyCircle',
                    //树图中 正交布局 的方向  'LR' , 'RL', 'TB', 'BT'
                    orient: 'vertical',
                    //子树折叠和展开的交互  默认打开
                    expandAndCollapse: true,
                    //树图初始展开的层级（深度）
                    initialTreeDepth: 1,
                    label: {
                        //标签的位置
                        position: 'top',
                        //标签旋转  从 -90 度到 90 度。正值是逆时针
                        rotate: -90,
                        //文字垂直对齐方式，默认自动。
                        verticalAlign: 'middle',
                        //文字水平对齐方式
                        align: 'right',
                        //字体大小
                        fontSize: 14
                    },
                    //叶子节点的特殊配置
                    leaves: {
                        label: {
                            position: 'bottom',
                            rotate: -90,
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    },
                    animationDurationUpdate: 750
                }
            ]
        };
        myChart.setOption(option, true)
    }

这样图表的变化就是一目了然的信息了。赞一个。解决了这个问题后就写一下问题记录便于以后查找（手动机智）

尾语

在一些项目的开发中我们偶尔会遇到做联动，或者变化的需求，这个时候需要我们静下心来，打开百度，或者CSDN进行查找有没有朋友之前有遇到过类似的问题。这样有便于大家。（手动滑稽）
经常遇到联动的问题一般情况下都可以使用Ajax方式进行处理。或者是onchange事件进行处理。方法不唯一大家快发散的区思考吧
总之。这次动态切换图表的方式告诉大家了但是怎么使用，在那些地方使用。这些就要看大家了适用于我的可能并不适用于你们哦~~

love_shang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动态变化Echart图表信息的处理

需求这几天做了一个简单的项目，用于做图表展示的信息，运用到了Echarts处理(Echarts官网)。要求是可以根据左部菜单进行不停的切换展示的图表信息。简单地说就是做一个二级联动的图表展示。开发过程中遇到的问题Echarts使用由于我个人不是很熟练，遇到了一些初学者的坑做一下说明吧首先是初始化，引用对应的echarts脚本信息开始调用<body> &lt...
复制链接

扫一扫

专栏目录