很明显，这个项目是基于老版本的 Vue Echarts 修改的，README 中只字不提也就算了，毕竟 License 没有强制要求。不过最低的要求至少应该满足吧，需要在 LICENSE 中附上原项目 LICENSE 全文（当然也包括原作者的名字），而不是把我的名字改成你自己就 OK 了。

协议要求：

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

Error in nextTick: "Error: Series has not been initialized yet."

我引入
import IEcharts4 from 'vue-echarts-v3/src/full.vue';
import 'echarts/theme/macarons.js';
import '../../assets/data/world.json';

產生

Map world not exists. You can download map file on http://echarts.baidu.com/download-map.html

建议先看一下官方文档吧，结构太混乱了，与标准相差太远，实在是推广不了

当在firefox中打开时，无法正常画图，需要手动点一下echarts上面的还原按钮才能正常绘制图像，是什么原因呢？我没有想到什么合理的解释。

我想在项目中引入echarts-wordCloud,但是好像不成功，请问是什么原因？

Cannot read property 'toString' of undefined

当我使用vue-echarts-v3时，vue总会提示[Vue warn]: "style" is a reserved attribute and cannot be used as component prop。 能不能把IEcharts的props换一个名字呢？

你用了vue2.3.2导致我们无法升级到vue最新版本
就是你不更新到最新，我们升级到vue最新就提示出错

http://echarts.baidu.com/demo.html#candlestick-sh

我想给我的柱状图表加渐变色，于是参照示例用这个方法，我看了你的文档后把new echarts换成IEcharts也会报undefined
itemStyle: { normal: { color: IEcharts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#83bff6'}, {offset: 0.5, color: '#188df0'}, {offset: 1, color: '#188df0'} ] ) } }

I suppose there is a a breaking bug between 1.0.3 and 1.0.4, since my echarts components won't be displayed anymore. Reverting to 1.0.3 resolve the problem.

I'd like to use echarts.graphic.LinearGradient, which module should I import?

import Graphic from 'echarts/src/util/graphic'

client.js?7955:115 [HMR] bundle has errors:
.//echarts/src/util/graphic.js
Module not found: Error: Cannot resolve module 'zrender/core/util' in /opt/workspace/hpc-ui/node_modules/echarts/src/util
@ .//echarts/src/util/graphic.js 5:17-45
.//echarts/src/util/graphic.js
Module not found: Error: Cannot resolve module 'zrender/tool/path' in /opt/workspace/hpc-ui/node_modules/echarts/src/util
@ .//echarts/src/util/graphic.js 7:19-47
.//echarts/src/util/graphic.js
Module not found: Error: Cannot resolve module 'zrender/graphic/Path' in /opt/workspace/hpc-ui/node_modules/echarts/src/util
@ .//echarts/src/util/graphic.js 9:15-46

thanks

My code is list below:
<IEcharts :option="bar @ready="onReady">

As title

按照readme单独做示例ok，放在我项目上就报这个错

Hello. Please tell me how to remove the eharts instance inside the "destoyed()" in the component.
I think that my mistake is connected with the this element still in DOM. Can you help me, please?

I need a way to fire a callback on window.resize -- I'm using an electron app and when I resize the window the chart does not resize itself to fit the window.

试了好几种写法,都不行,希望有人能指望一二.

按照目前的按需加载的使用方式，会报错误

I'm having a problem with the example code, it throws the error "Unknown custom element: - did you register the component correctly?".

In the repository's demo, the tag is named "i-echarts".
Unfortunately, I'm facing a weird problem because none of those are working for me.
I'm using webpack: ^2.2.1, vue: ^2.2.2

Hello i would like to get echarts instance object to call resize to refresh echarts and can i tell me how to do

错误堆栈：

Uncaught ReferenceError: DEV is not defined
at Function.RootClass.extend (eval at (app.js:834), :69:13)
at Function.entity.extend (eval at (app.js:834), :236:56)
at eval (eval at (app.js:4202), :16:30)
at Object. (app.js:4202)
at webpack_require (app.js:556)
at fn (app.js:87)
at eval (eval at (app.js:768), :3:24)
at Object. (app.js:768)
at webpack_require (app.js:556)
at fn (app.js:87)
RootClass.extend @ clazz.js?3e66:69
entity.extend @ clazz.js?3e66:236
(anonymous) @ Ordinal.js?3a6b:16
(anonymous) @ app.js:4202
webpack_require @ app.js:556
fn @ app.js:87
(anonymous) @ axisHelper.js?4730:3
(anonymous) @ app.js:768
webpack_require @ app.js:556
fn @ app.js:87
(anonymous) @ Grid.js?f167:9
(anonymous) @ app.js:1891
webpack_require @ app.js:556
fn @ app.js:87
(anonymous) @ bar.js?931c:5
(anonymous) @ app.js:3619
webpack_require @ app.js:556
fn @ app.js:87
(anonymous) @ echarts.js?ec46:10
(anonymous) @ app.js:2899
webpack_require @ app.js:556
fn @ app.js:87
(anonymous) @ main.js?3479:6
(anonymous) @ app.js:2917
webpack_require @ app.js:556
fn @ app.js:87
(anonymous) @ app.js:587
webpack_require @ app.js:556
(anonymous) @ app.js:579
(anonymous) @ app.js:582

// 引用

import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'

import 'echarts/lib/chart/lines'
import 'echarts/lib/component/grid'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'

import 'echarts/lib/component/title'

import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/visualMap'
import 'echarts/lib/component/toolbox'

https://i.imgur.com/TAihaTy.png

http://echarts.baidu.com/demo.html#dynamic-data2
The function formatter in tooltip does not work.
My code is fellowing:

<div class="echarts"> 
        <IEcharts :option="timeLine" @ready="onReady" @click="onClick"></IEcharts> 
      </div>

    mounted() {
            setInterval(function (){
                for (var i = 0; i < 5; i++) {
                    var now = new Date();
                    this.timeLine.series[0].data.shift();
                    this.timeLine.series[0].data.push( {
                        name: now.toString(),
                        value: [
                            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                            Math.random()*10000
                        ]
                    });
                }
            }.bind(this),2000);
        }

 
   timeLine:{
                    title: {
                        text: 'dynamic data'
                    },
                    tooltip: {
                        trigger: 'axis',
                        **_formatter: function (params) {
                            debugger;
                            params = params[0];
                            var date = new Date(params.name);
                            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                        },_**
                        axisPointer: {
                            animation: false
                        }
                    },
                    xAxis: {
                        type: 'time',
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%'],
                        splitLine: {
                            show: false
                        }
                    },
                    series: [{
                        name: 'data',
                        type: 'line',
                        showSymbol: false,
                        hoverAnimation: false,
                        data: []
                    }]
                }

The Y is changing but no data is shown.

看了另一个哥们#40 提的问题《echarts主题自定义不成功》，根据您的代码来写，设置不了主题，能帮忙看看代码有什么不对吗

Wanted to use built-in Echarts theme 'macarons', but it does not work in component
<IEcharts :option="line" theme="macarons"></IEcharts>

But it works if i define custom theme object and bind it
<IEcharts :option="line" :theme="theme"></IEcharts>

你好，和官网一样的配置，line类型图表无动画效果，而官网的有
已解决

import IEcharts from 'vue-echarts-v3'
import 'echarts/theme/macarons.js'
Vue.component('echarts', IEcharts)

这样导入主题不对，有啥好办法吗？

我知道有:theme 属性，但是不知道该如何操作。。。求大大告知

使用的使用在谷歌和safari使用折线图都没有问题，但是在火狐上，折线图的title,datazoom都能显示，唯一不显示的是具体的图形，并且datazoom里面的小图形也能显示出来

the errors that appear are:
-Uncaught TypeError: Cannot read property 'getWidth' of null
-Uncaught Error: setOption should not be called during main process
I've tried to find a solution to the problem, but everything i found was in Chinese and i wasn't able to figure out what to do to fix these problems.

页面中如果用了if else 那么当为true 的时候 显示出来的 echart 的大小变成初始化的100X100了，这个问题困扰了我好久。

我在官方找到一个解决方法就是使用“style.width和style.height” 但是没法使用100%的样式。有没有什么好的办法呢？

eg:http://echarts.baidu.com/gallery/editor.html?c=calendar-effectscatter

function getVirtulData(year) {
    year = year || '2017';
    var date = +echarts.number.parseDate(year + '-01-01');
    var end = +echarts.number.parseDate((+year + 1) + '-01-01');
    var dayTime = 3600 * 24 * 1000;
    var data = [];
    for (var time = date; time < end; time += dayTime) {
        data.push([
            echarts.format.formatTime('yyyy-MM-dd', time),
            Math.floor(Math.random() * 10000)
        ]);
    }
    return data;
}

或者如何在此项目中使用echarts方法。直接IEcharts无效。

Echarts.vue + Error in mounted hook: "TypeError: Invalid calling object"
TypeError: Invalid calling object
at Animation.prototype._startLoop (eval code:177:13)
at Animation.prototype.start (eval code:188:13)

Any help appreciated!

I just used the code from this link

result :

showMaxLabel:true现在这些选项都是无效的,echarts3.6.2貌似已经修复了,vue-echarts-v3貌似还没修复哦?

运行了readme.md的例子，但是报错说：Can't get dom width or height
图表也不显示。
请问是什么原因?

首先非常感谢您的付出,这个插件用起来很好用.
不过目前我遇到一个问题,就是当柱状图series里面只包含一个对象时(即像您的demo那样), push多一个对象进去柱状图可以正常显示两组数据, 但是此时再去掉其中一个或者清空数组重新加入一个对象之后, 此时series中只有一个对象, 但柱状图中依然显示两组数据,这是为何?有没有什么解决办法呢?

我用vue2.0和vue-echarts-v3的line模块，报错Error: setOption should not be called during main process。 相关代码

`

    <IEcharts :option="charts"></IEcharts>

     import IEcharts from 'vue-echarts-v3/src/lite.vue';
     export default{
     components: {
          IEcharts
     },

    data: function () {
        return {
            net_info: {},
            iface_status: [],
            connections: {},
            charts: {
                title : {
                    text : '网卡流量'
                },

                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        params = params[0];
                        var date = new Date(params.name);
                        return date.getHours()+ ':' + date.getMinutes() + ':' + date.getSeconds() + ' : ' + params.value[1];
                    },
                    axisPointer: {
                        animation: false
                    }
                },

                xAis: {
                    type: 'time',
                    splitLine: {
                        show: false
                    }
                },

                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: false
                    }
                },

                series: [{
                    name: '网卡流量',
                    type: 'line',
                    showSymbol: false,
                    hoverAnimation: false,
                    data: []
                }]

            }
        };
    },

    methods: {
        getNetworkInfo: function () {
            api.network.get().then((response)=>{
                this.net_info = response.data.data;
                //console.log(this.net_info);
                this.iface_status = this.net_info.iface_status;
                this.connections = this.net_info.connections;
                const data_point = this.generateEchartsData(this.iface_status);
                this.charts.series[0].data.push(data_point);

            }, (error)=>{
                // console.log(error);
            });
        },

        generateEchartsData: function (iface_info) {
            let  now = new Date();
            return {
                name: now.toString(),
                value: [
                    [now.getHours(), now.getMinutes() , now.getSeconds()].join(':'),
                    Math.round(iface_info[1].receive_bytes)
                ]
            }
        },

        getIfaceStatus: function () {
            api.iface_status.get().then((response)=>{
                this.iface_status = response.data.data;
                const data_point = this.generateEchartsData(this.iface_status);
                this.charts.series[0].data.push(data_point);
            }, (error)=>{

            });
        },
    },

    mounted: function () {
        this.$log.log('mounted');
        this.getNetworkInfo();

        // set interval
        const interval = 6000; // 1minutes
        setInterval(this.getIfaceStatus, interval);
    }
}

`

hello,

is it possible to get an example on how to resize the chart, i.e how to use the instance method resize??

Thanks in advance !

import IEcharts from 'vue-echarts-v3/src/full.vue'
import 'echarts/lib/chart/pie'

引入组件的页面 该加载那么大的还是那么大 页面加载的大小没有变化

总之 无论是
import IEcharts from 'vue-echarts-v3/src/full.vue'
import 'echarts/lib/chart/pie'
上面这样引入
还是直接
import IEcharts from 'vue-echarts-v3/src/full.vue'
这样引入 都是可以用pie这个图表控件的
不知道两种方式有什么区别 总要的是 上面两种引入方式页面加载的大小是一样的

比如：字符云 wordcloud，如果需要手动整合，该怎么做呢？ 谢谢！

Hi，您好！
请问下能不能给个自定义主题的demo，我这边使用自定义主题不成功，谢谢！

自定义主题导入代码

import 'echarts/theme/xtheme.js'
import IEcharts from 'vue-echarts-v3/src/full.vue'

<IEcharts
          theme="xtheme"
          :option="bar"
          :resizable="true"
></IEcharts>

这边测试没有成功！

你好！如题，你这个项目除了在vue中使用echarts方便一些之外，还有解决其他问题或者基于什么原因封装的？我之前在vue中使用echarts，在IE中init初始化时会出现奇怪报错，chrome正常，查不到原因，接下来想用你这个试试