Incubator-echarts: echarts模块化方式加载,title、tooltips、legend 出不来,是什么原因

Created on 18 Jul 2016  ·  5Comments  ·  Source: apache/incubator-echarts

问题简述 (One-line summary)

按照官网的文档用require加载src文件夹里面的模块,最总渲染的图没有title,tooltips,legend。换成用script标签的方式引入插件就没有问题。

版本及环境 (Version & Environment)

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

    重现步骤 (Steps to reproduce)

1.
2.

期望结果 (Expected behaviour)

可能哪里有问题 (What went wrong)

ECharts配置项 (ECharts option)

option = {
backgroundColor:'#fff',
                title: {
                    text: "近7日扫码数量及新增粉丝数量",
                    x: "center",
                    textStyle: {
                        color: '#757A9A',
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                        fontFamily: 'Microsoft YaHei',
                        fontSize: 13.33,
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    axisPointer: {
                        type: 'none',
                    }

                },
                legend: {
                    itemGap: 15,
                    itemWidth: 6,
                    textStyle: {
                        color: '#333'
                    },
                    x: '60px',
                    data: ['扫码', '粉丝'],

                },
                toolbox: {
                    show: false,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [{
                    type: 'category',
                    boundaryGap: true,
                    splitLine: {
                        show: false,
                    },
                    data: dayArray,
                    axisLine: {
                        lineStyle: {
                            color: '#E6EAF3'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#4A5B77',
                        }
                    },
                    axisTick: {
                        length: 0,
                    }
                }],
                yAxis: [{
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            color: '#E6EAF3'
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#4A5B77',
                        }
                    },
                    axisTick: {
                        length: 0,
                    }
                }],
                series: [{
                    name: '粉丝',
                    type: 'line',
                    stack: '总量',
                    data: [320, 332, 301, 334, 390, 330, 320],
                    symbol: 'image://img/light_blue.png',
                    symbolSize: 19,
                    lineStyle: {
                        normal: {
                            width: 1,
                            color: '#75CAF1'
                        }
                    },
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: '最大值',
                                symbol: 'image://img/blue.png',
                                symbolSize: 19,
                                itemStyle: {
                                    normal: {
                                        color: '#36B5E8',
                                        label: { position: 'top' }
                                    }
                                },
                            } //蓝色
                        ]
                    },
                }, {
                    name: '扫码',
                    type: 'line',
                    stack: '总量',
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    symbol: 'image://img/light_red.png',
                    symbolSize: 19,
                    lineStyle: {
                        normal: {
                            width: 1,
                            color: '#FF8582'
                        }
                    },
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: '最大值',
                                symbol: 'image://img/red.png',
                                symbolSize: 19,
                                itemStyle: {
                                    normal: {
                                        color: '#FD6769',
                                        label: { position: 'top' }
                                    }
                                }
                            } //红色
                        ]
                    },
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
}

其他信息 (Other comments)

Most helpful comment

Pls try these:

import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'

and for toolbox:

import 'echarts/lib/component/toolbox'

All 5 comments

没加载对应的模块

怎么解决的

label 在哪个模块?

Pls try these:

import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'

and for toolbox:

import 'echarts/lib/component/toolbox'

是否可以在检测到setOption有对应配置,但又没有import相关模块时打印一个日志,提示应该如何import?

这对于新人来说,体验会比较好。

Was this page helpful?
0 / 5 - 0 ratings