爬坑echarts单轴散点图

最新推荐文章于 2024-11-02 10:39:21 发布

原创最新推荐文章于 2024-11-02 10:39:21 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

爬坑专栏收录该内容

8 篇文章

订阅专栏

本文详细记录了在Vue项目中使用ECharts实现单轴散点图时遇到的问题及解决过程。作者在引入散点图组件后，尝试使用单轴散点图的option配置，却遭遇报错。通过逐步排查，最终定位到缺少singleAxis模块的引入，解决了问题。

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

vue项目，echarts的/lib/component和/lib/chart按需引入。

已经引入了散点图的部分 import 'echarts/lib/chart/scatter'。

单轴散点图直接使用例子的option居然会报错。然后找原因。

尝试引入4.0.3的min.js的CDN，可以。所以猜测是版本问题，把本地npm包升级到4.0.3，不行。

接着尝试import 'echarts/index.js'。该文件内require了所有模块。发现可以。说明是缺少模块引入。

通过多次测试定位到缺少import 'echarts/lib/component/singleAxis'模块。引入即可。

太坑了API文档里coordinateSystem没有singleAxis的选项，看来这种拓展是不会单独列出来的。

series: [

   {singleAxisIndex: 0,

    coordinateSystem: 'singleAxis',

    singleAxis: [
        {left: 150, 
         type: "category", 
         boundaryGap: false, 
         data: Array(24), 
         top: "5%", …}
    ]}
]