Coder Social home page Coder Social logo

Comments (13)

xlsdg avatar xlsdg commented on May 18, 2024 
<template>
  <div class="echarts">
    <IEcharts :option="line" @ready="onReady" />
  </div>
</template>

<script>
  import IEcharts from 'vue-echarts-v3/src/full.vue'

  export default {
    name: 'view',
    components: {
      IEcharts
    },
    props: {
    },
    data () {
      const that = this
      return {
        data: [],
        now: +new Date(1997, 9, 3),
        oneDay: 24 * 3600 * 1000,
        value: Math.random() * 1000,
        line: {
          title: {
            text: '动态数据 + 时间坐标轴'
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              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: '模拟数据',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: that.data
          }]
        }
      }
    },
    methods: {
      onReady (instance) {
        const that = this
        that.chart = instance
      },
      randomData () {
        const that = this
        that.now = new Date(+that.now + that.oneDay)
        that.value = that.value + Math.random() * 21 - 10
        return {
          name: that.now.toString(),
          value: [
            [that.now.getFullYear(), that.now.getMonth() + 1, that.now.getDate()].join('/'),
            Math.round(that.value)
          ]
        }
      }
    },
    beforeMount () {
      const that = this
      for (var i = 0; i < 1000; i++) {
        that.data.push(that.randomData())
      }
    },
    mounted () {
      const that = this
      setInterval(function () {
        for (var i = 0; i < 5; i++) {
          that.data.shift()
          that.data.push(that.randomData())
        }

        that.chart && that.chart.setOption({
          series: [{
            data: that.data
          }]
        })
      }, 1000)
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .echarts {
    width: 400px;
    height: 400px;
  }
</style>

from vue-echarts-v3.

xlsdg avatar xlsdg commented on May 18, 2024

package.json:

{
  "name": "echarts-demo",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "xLsDg <[email protected]>",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "lint": "eslint --ext .js,.vue src"
  },
  "dependencies": {
    "vue": "^2.3.3",
    "vue-echarts-v3": "^1.0.4",
    "vue-router": "^2.3.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^3.19.0",
    "eslint-friendly-formatter": "^2.0.7",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^2.0.0",
    "eslint-config-standard": "^6.2.1",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^2.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "webpack-bundle-analyzer": "^2.2.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "ora": "^1.2.0",
    "rimraf": "^2.6.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^12.1.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

from vue-echarts-v3.

qianzhiheilv avatar qianzhiheilv commented on May 18, 2024

thanks,It is ok.

from vue-echarts-v3.

qianzhiheilv avatar qianzhiheilv commented on May 18, 2024

I find formatter is useless,even i delete this function,it works well,and I add debugger to this function,It never break this point

from vue-echarts-v3.

xlsdg avatar xlsdg commented on May 18, 2024

see http://echarts.baidu.com/option.html#tooltip.formatter

from vue-echarts-v3.

qianzhiheilv avatar qianzhiheilv commented on May 18, 2024

tooltip is useless,http://echarts.baidu.com/demo.html#dynamic-data2 the tooltip of this demo is ok,but your code is not ok,when I point the line,I never trigger the formatter.

from vue-echarts-v3.

xlsdg avatar xlsdg commented on May 18, 2024

tooltip is useless?

image

from vue-echarts-v3.

qianzhiheilv avatar qianzhiheilv commented on May 18, 2024

Yes,useless

<template>
    <div class="echarts">
        <IEcharts :option="line" @ready="onReady" />
    </div>
</template>

<script>
    import IEcharts from 'vue-echarts-v3/src/lite.vue';
    import 'echarts/lib/chart/line';

    export default {
        name: 'view',
        components: {
            IEcharts
        },
        props: {
        },
        data () {
            const that = this
            return {
                data: [],
                now: +new Date(1997, 9, 3),
                oneDay: 24 * 3600 * 1000,
                value: Math.random() * 1000,
                line: {
                    title: {
                        text: '动态数据 + 时间坐标轴'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            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: '模拟数据',
                        type: 'line',
                        showSymbol: false,
                        hoverAnimation: false,
                        data: that.data
                    }]
                }
            }
        },
        methods: {
            onReady (instance) {
                const that = this
                that.chart = instance
            },
            randomData () {
                const that = this
                that.now = new Date(+that.now + that.oneDay)
                that.value = that.value + Math.random() * 21 - 10
                return {
                    name: that.now.toString(),
                    value: [
                        [that.now.getFullYear(), that.now.getMonth() + 1, that.now.getDate()].join('/'),
                        Math.round(that.value)
                    ]
                }
            }
        },
        beforeMount () {
            const that = this
            for (var i = 0; i < 1000; i++) {
                that.data.push(that.randomData())
            }
        },
        mounted () {
            const that = this
            setInterval(function () {
                for (var i = 0; i < 5; i++) {
                    that.data.shift()
                    that.data.push(that.randomData())
                }

                that.chart && that.chart.setOption({
                    series: [{
                        data: that.data
                    }]
                })
            }, 1000)
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .echarts {
        width: 400px;
        height: 400px;
    }
</style>

package.json

{
    "name": "my-platform",
    "version": "1.0.0",
    "description": "my platform",
    "author": "Faber Wong",
    "private": true,
    "scripts": {
        "dev": "node build/dev-server.js",
        "build": "node build/build.js",
        "build-server": "node build/build-server.js",
        "unit": "karma start test/unit/karma.conf.js --single-run",
        "test": "npm run unit && npm run e2e"
    },
    "dependencies": {
        "@types/axios": "^0.14.0",
        "axios": "0.16.2",
        "element-ui": "^1.3.6",
        "es6-promise": "^4.1.0",
        "vue": "^2.3.4",
        "vue-axios": "^2.0.2",
        "vue-router": "^2.5.3",
        "vuex": "^2.3.1",
        "vue-i18n" :"5.0.3",
        "whatwg-fetch": "^2.0.3",
        "babel-helper-vue-jsx-merge-props" : "^2.0.2",
        "babel-plugin-syntax-jsx" : "^6.18.0",
        "babel-plugin-transform-vue-jsx" : "^3.4.3",
        "vue2-google-maps": "^0.7.9",
        "vue-echarts-v3":"1.0.4"
    },
    "devDependencies": {
        "autoprefixer": "^7.1.1",
        "babel-core": "^6.0.0",
        "babel-eslint": "^7.2.3",
        "babel-loader": "^6.0.0",
        "babel-plugin-add-module-exports": "^0.2.1",
        "babel-plugin-transform-async-to-generator": "^6.16.0",
        "babel-plugin-transform-runtime": "^6.0.0",
        "babel-polyfill": "^6.23.0",
        "babel-plugin-component": "0.9.1",
        "babel-preset-es2015": "^6.0.0",
        "babel-preset-stage-2": "^6.0.0",
        "babel-preset-stage-3": "^6.17.0",
        "babel-register": "^6.0.0",
        "chai": "^3.5.0",
        "chromedriver": "^2.21.2",
        "connect-history-api-fallback": "^1.1.0",
        "cross-spawn": "^4.0.2",
        "css-loader": "^0.25.0",
        "eventsource-polyfill": "^0.9.6",
        "exports-loader": "^0.6.3",
        "express": "^4.13.3",
        "extract-text-webpack-plugin": "^1.0.1",
        "file-loader": "^0.9.0",
        "function-bind": "^1.0.2",
        "html-webpack-plugin": "^2.8.1",
        "http-proxy-middleware": "^0.17.2",
        "imports-loader": "^0.6.5",
        "inject-loader": "^2.0.1",
        "isparta-loader": "^2.0.0",
        "json-loader": "^0.5.4",
        "karma": "^1.3.0",
        "karma-babel-preprocessor": "^6.0.1",
        "karma-chrome-launcher": "^2.0.0",
        "karma-coverage": "^1.1.1",
        "karma-firefox-launcher": "^1.0.0",
        "karma-mocha": "^1.2.0",
        "karma-phantomjs-launcher": "^1.0.0",
        "karma-sinon-chai": "^1.2.0",
        "karma-sourcemap-loader": "^0.3.7",
        "karma-spec-reporter": "0.0.26",
        "karma-webpack": "^1.7.0",
        "lolex": "^1.4.0",
        "mocha": "^3.1.0",
        "nightwatch": "^0.9.8",
        "node-sass": "^3.10.1",
        "opn": "^4.0.2",
        "optimist": "^0.6.1",
        "ora": "^0.3.0",
        "phantomjs-prebuilt": "^2.1.3",
        "postcss-cssnext": "^2.8.0",
        "sass-loader": "^4.0.2",
        "selenium-server": "2.53.1",
        "shelljs": "^0.7.4",
        "sinon": "^1.17.3",
        "sinon-chai": "^2.8.0",
        "url-loader": "^0.5.7",
        "vue-loader": "^9.4.0",
        "vue-style-loader": "^1.0.0",
        "webpack": "^1.13.2",
        "webpack-dev-middleware": "^1.8.3",
        "webpack-hot-middleware": "^2.12.2",
        "webpack-merge": "^0.14.1"
    }
}

from vue-echarts-v3.

xlsdg avatar xlsdg commented on May 18, 2024

import tooltip:

import IEcharts from 'vue-echarts-v3/src/lite.vue';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';

from vue-echarts-v3.

qianzhiheilv avatar qianzhiheilv commented on May 18, 2024

Thanks,It is ok now.Thank you very much

from vue-echarts-v3.

qianzhiheilv avatar qianzhiheilv commented on May 18, 2024

Hello,I find that when you leave this page ,I will occure some error.I think,when destory dynamic-data of line,something was wrong.
error is fellowing,you can recurrent it by change route or close the dialog which has dynamic-data of line

11111

<template>
    <div class="echarts">
        <IEcharts :option="line" @ready="onReady" />
    </div>
</template>

<script>
    import IEcharts from 'vue-echarts-v3/src/lite.vue';
    import 'echarts/lib/chart/line';
    import 'echarts/lib/component/tooltip';

    export default {
        name: 'view',
        components: {
            IEcharts
        },
        props: {
        },
        data () {
            const that = this
            return {
                data: [],
                now: +new Date(1997, 9, 3),
                oneDay: 24 * 3600 * 1000,
                value: Math.random() * 1000,
                line: {
                    title: {
                        text: '动态数据 + 时间坐标轴'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            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: '模拟数据',
                        type: 'line',
                        showSymbol: false,
                        hoverAnimation: false,
                        data: that.data
                    }]
                }
            }
        },
        methods: {
            onReady (instance) {
                const that = this
                that.chart = instance
            },
            randomData () {
                const that = this
                that.now = new Date(+that.now + that.oneDay)
                that.value = that.value + Math.random() * 21 - 10
                return {
                    name: that.now.toString(),
                    value: [
                        [that.now.getFullYear(), that.now.getMonth() + 1, that.now.getDate()].join('/'),
                        Math.round(that.value)
                    ]
                }
            }
        },
        beforeMount () {
            const that = this
            for (var i = 0; i < 1000; i++) {
                that.data.push(that.randomData())
            }
        },
        mounted () {
            const that = this
            setInterval(function () {
                for (var i = 0; i < 5; i++) {
                    that.data.shift()
                    that.data.push(that.randomData())
                }

                that.chart && that.chart.setOption({
                    series: [{
                        data: that.data
                    }]
                })
            }, 1000)
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .echarts {
        width: 400px;
        height: 400px;
    }
</style>

from vue-echarts-v3.

xlsdg avatar xlsdg commented on May 18, 2024

add timer:

<template>
  <div class="echarts">
    <IEcharts :option="line" @ready="onReady" />
  </div>
</template>

<script>
  import IEcharts from 'vue-echarts-v3/src/full.vue'

  export default {
    name: 'view',
    components: {
      IEcharts
    },
    props: {
    },
    data () {
      const that = this
      return {
        data: [],
        timer: null,
        now: +new Date(1997, 9, 3),
        oneDay: 24 * 3600 * 1000,
        value: Math.random() * 1000,
        line: {
          title: {
            text: '动态数据 + 时间坐标轴'
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              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: '模拟数据',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: that.data
          }]
        }
      }
    },
    methods: {
      onReady (instance) {
        const that = this
        that.chart = instance
      },
      randomData () {
        const that = this
        that.now = new Date(+that.now + that.oneDay)
        that.value = that.value + Math.random() * 21 - 10
        return {
          name: that.now.toString(),
          value: [
            [that.now.getFullYear(), that.now.getMonth() + 1, that.now.getDate()].join('/'),
            Math.round(that.value)
          ]
        }
      }
    },
    beforeMount () {
      const that = this
      for (var i = 0; i < 1000; i++) {
        that.data.push(that.randomData())
      }
    },
    mounted () {
      const that = this
      if (that.timer) {
        clearInterval(that.timer)
        that.timer = null
      }
      that.timer = setInterval(function () {
        for (var i = 0; i < 5; i++) {
          that.data.shift()
          that.data.push(that.randomData())
        }

        that.chart && that.chart.setOption({
          series: [{
            data: that.data
          }]
        })
      }, 1000)
    },
    beforeDestroy () {
      const that = this
      if (that.timer) {
        clearInterval(that.timer)
        that.timer = null
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .echarts {
    width: 400px;
    height: 400px;
  }
</style>

from vue-echarts-v3.

qianzhiheilv avatar qianzhiheilv commented on May 18, 2024

It ok.Thank you very much for your help

from vue-echarts-v3.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.