Echarts绘图使用经验

最新推荐文章于 2024-09-28 22:45:12 发布

jp_zhou256

最新推荐文章于 2024-09-28 22:45:12 发布

阅读量2.1k

点赞数

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/jp_zhou256/article/details/90167438

版权

本文分享了在Echarts中查找和使用动态数据文件的方法，通过实例解析了如何从官方示例中找到数据文件的相对路径，并转换为实际的绝对路径。此外，还探讨了如何通过字段的同义词或近义词替换来实现图表的绘制，主要涉及data、nodes、links、groups等关键字段的调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

摘要
1.如何查找echarts相对路径中的数据文件(针对动态加载)；
2.他山之石可以攻玉(通过类比echarts其他代码中的相同键值对的书写，做相同字段的静态直接替换，或者对近义词字段直接做替换来绘图)

1.查找echarts相对路径中的数据文件(针对动态加载)
以 https://echarts.baidu.com/echarts2/doc/example/webkit-dep2.html 这个和弦图为例，右键"查看元素">“程序员开发工具(左上角的小箭头)”>选中待查找字段"data/webkit-dep.json">定位到html脚本代码"data/webkit-dep.json">“网络”>过滤器输入栏中输入"data/webkit-dep.json">“刷新页面”>通过"GET"的方式，我们就找到了相对路径的数据，实际请求的绝对路径：https://echarts.baidu.com/echarts2/doc/example/data/webkit-dep.json 。看到这里，以后你就知道你要查找的所有例程，他们的数据文件的前缀都是:https://echarts.baidu.com/echarts2/doc/example/ 。

在这里插入图片描述

2.字段的同义词、近义词替换(静态的直接改写和数据替换)
针对静态数据，主要的部分就是data、nodes、links、groups(==category)等几个字段。

2.1.修改前的代码:

option = {
    title : {
        text: 'webkit内核依赖',
        subtext: '数据来自网络',
        x:'right',
        y:'bottom'
    },
    tooltip : {
        trigger: 'item',
        formatter : "{b}"
    },
    toolbox: {
        show : true,
        feature : {
            restore : {show: true},
            magicType: {
                show: true,
                type: ['force', 'chord'],
                option: {
                    chord: {
                        minRadius : 2,

最低0.47元/天解锁文章