question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error: Component series.force not exists. Load it first.

See original GitHub issue

One-line summary [问题简述]

vue项目里面引用echarts做一个和弦图,报错如下: Error: Component series.force not exists. Load it first.

其他的类型,比如pie,bar,graph等不会上面的错误

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]:
  • Browser version [浏览器类型和版本]:
  • OS Version [操作系统类型和版本]:

win10系统

Google Chrome 版本 61.0.3141.7(正式版本) (64 位)

echarts版本为3.6.2

Expected behaviour [期望结果]

ECharts option [ECharts配置项]

option = {
                  title : {
                    text: '人物关系:乔布斯',
                    subtext: '数据来自人立方',
                    x:'right',
                    y:'bottom'
                  },
                  tooltip : {
                    trigger: 'item',
                    formatter: '{a} : {b}'
                  },
                  toolbox: {
                    show : true,
                    feature : {
                      restore : {show: true},
                      magicType: {show: true, type: ['force', 'chord']},
                      saveAsImage : {show: true}
                    }
                  },
                  
                  legend: {
                    x: 'left',
                    data:['家人','朋友']
                  },
                  series: [
                    {
                      name: "人物关系",
                      type: "force",
                      ribbonType: false,
                      categories : [
                        {
                          name: '人物'
                        },
                        {
                          name: '家人'
                        },
                        {
                          name:'朋友'
                        }
                      ],
                      itemStyle: {
                        normal: {
                          label: {
                            show: true,
                            textStyle: {
                              color: '#333'
                            }
                          },
                          nodeStyle : {
                            brushType : 'both',
                            borderColor : 'rgba(255,215,0,0.4)',
                            borderWidth : 1
                          },
                          linkStyle: {
                            type: 'curve'
                          }
                        },
                        emphasis: {
                          label: {
                            show: false
                            // textStyle: null      // 默认使用全局文本样式,详见TEXTSTYLE
                          },
                          nodeStyle : {
                            //r: 30
                          },
                          linkStyle : {}
                        }
                      },
                      useWorker: false,
                      minRadius : 15,
                      maxRadius : 25,
                      gravity: 1.1,
                      scaling: 1.1,
                      roam: 'move',
                      nodes: [
                        {category:0, name: '乔布斯', value : 10, label: '乔布斯\n(主要)'},
                        {category:1, name: '丽萨-乔布斯',value : 2},
                        {category:1, name: '保罗-乔布斯',value : 3},
                        {category:1, name: '克拉拉-乔布斯',value : 3},
                        {category:1, name: '劳伦-鲍威尔',value : 7},
                        {category:2, name: '史蒂夫-沃兹尼艾克',value : 5},
                        {category:2, name: '奥巴马',value : 8},
                        {category:2, name: '比尔-盖茨',value : 9},
                        {category:2, name: '乔纳森-艾夫',value : 4},
                        {category:2, name: '蒂姆-库克',value : 4},
                        {category:2, name: '龙-韦恩',value : 1},
                      ],
                      links : [
                        {source : '丽萨-乔布斯', target : '乔布斯', weight : 1, name: '女儿'},
                        {source : '保罗-乔布斯', target : '乔布斯', weight : 2, name: '父亲'},
                        {source : '克拉拉-乔布斯', target : '乔布斯', weight : 1, name: '母亲'},
                        {source : '劳伦-鲍威尔', target : '乔布斯', weight : 2},
                        {source : '史蒂夫-沃兹尼艾克', target : '乔布斯', weight : 3, name: '合伙人'},
                        {source : '奥巴马', target : '乔布斯', weight : 1},
                        {source : '比尔-盖茨', target : '乔布斯', weight : 6, name: '竞争对手'},
                        {source : '乔纳森-艾夫', target : '乔布斯', weight : 1, name: '爱将'},
                        {source : '蒂姆-库克', target : '乔布斯', weight : 1},
                        {source : '龙-韦恩', target : '乔布斯', weight : 1},
                        {source : '克拉拉-乔布斯', target : '保罗-乔布斯', weight : 1},
                        {source : '奥巴马', target : '保罗-乔布斯', weight : 1},
                        {source : '奥巴马', target : '克拉拉-乔布斯', weight : 1},
                        {source : '奥巴马', target : '劳伦-鲍威尔', weight : 1},
                        {source : '奥巴马', target : '史蒂夫-沃兹尼艾克', weight : 1},
                        {source : '比尔-盖茨', target : '奥巴马', weight : 6},
                        {source : '比尔-盖茨', target : '克拉拉-乔布斯', weight : 1},
                        {source : '蒂姆-库克', target : '奥巴马', weight : 1}
                      ]
                    }
                  ]
                };

Other comments [其他信息]

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

6reactions
huanglei890714commented, Feb 19, 2019

tmd 实例害人,在图表类型类改成这种写法``` type: ‘graph’, layout: ‘force’,

0reactions
Guanyuhaocommented, Aug 28, 2019

尼玛 示例害人

Read more comments on GitHub >

github_iconTop Results From Across the Web

Uncaught Error: Component series.force not exists. Load it first ...
According to the docs (click on the series node on the left menu to open it and see all types) series has no...
Read more >
Error: Component series. not exists. Load it first. · Issue #5766
i am having an array of days, and inside each day multiple status, so for the cahrt , the x-axis will be date...
Read more >
Component series.line not exists. Load it first." in vue-echarts ...
Coding example for the question "Error: Component series.line not exists. Load it first. ... import 'echarts/lib/component/tooltip' Vue.component('v-chart', ...
Read more >
ECharts 3D React umi 报错:Component series.surface not ...
this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users ......
Read more >
Errors | Node.js v19.3.0 Documentation
When the operation either completes or an error is raised, the callback function is called with the Error object (if any) passed as...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found