A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/ecomfe/vue-echarts/tree/5.x below:

GitHub - ecomfe/vue-echarts at 5.x

Apache ECharts (incubating) component for Vue.js.

πŸ‡¨πŸ‡³ δΈ­ζ–‡η‰ˆ

Built upon Apache ECharts (incubating) v4.1.0+ and depends on Vue.js v2.2.6+.

$ npm install echarts vue-echarts

Include echarts and vue-echarts in your HTML file like this:

<script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>
ES Modules with npm & Vue Loader (Recommended) 
import Vue from 'vue'
import ECharts from 'vue-echarts' // refers to components/ECharts.vue in webpack

// import ECharts modules manually to reduce bundle size
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'

// If you want to use ECharts extensions, just import the extension package, and it will work
// Taking ECharts-GL as an example:
// You only need to install the package with `npm install --save echarts-gl` and import it as follows
import 'echarts-gl'

// register component to use
Vue.component('v-chart', ECharts)
Importing the source version

Vue-ECharts offers an untranspiled version for webpack by default. If you are using official Vue CLI to create your project, you may encounter the problem that the default configuration will exclude node_modules from files to be transpiled by Babel. You need to modify the configuration as follows:

For Vue CLI 3+, add vue-echarts and resize-detector into transpileDependencies in vue.config.js like this:

// vue.config.js
module.exports = {
  transpileDependencies: [
    'vue-echarts',
    'resize-detector'
  ]
}

For Vue CLI 2 with the webpack template, modify build/webpack.base.conf.js like this:

      {
        test: /\.js$/,
        loader: 'babel-loader',
-       include: [resolve('src'), resolve('test')]
+       include: [
+         resolve('src'),
+         resolve('test'),
+         resolve('node_modules/vue-echarts'),
+         resolve('node_modules/resize-detector')
+       ]
      }

If you are using bare webpack config, just do similar modifications to make it work.

When using Vue-ECharts on the server-side with Nuxt.js, it may not be properly transpiled because Nuxt.js prevents files under node_modules from being bundled into the server bundle with only a few exceptions by default. We need to whitelist vue-echarts manually.

For Nuxt.js v2, modify nuxt.config.js as follows:

module.exports = {
  build: {
    transpile: ['vue-echarts', 'resize-detector']
  }
}

For Nuxt.js v1, modify nuxt.config.js as follows:

// Don't forget to
// npm i --save-dev webpack-node-externals
const nodeExternals = require('webpack-node-externals')

module.exports = {
  // ...
  build: {
    extend (config, { isServer }) {
      // ...
      if (isServer) {
        config.externals = [
          nodeExternals({
            // default value for `whitelist` is
            // [/es6-promise|\.(?!(?:js|json)$).{1,5}$/i]
            whitelist: [/es6-promise|\.(?!(?:js|json)$).{1,5}$/i, /^vue-echarts/]
          })
        ]
      }
    }
  }
}
require.config({
  paths: {
    'vue': 'path/to/vue',
    'echarts': 'path/to/echarts',
    'vue-echarts': 'path/to/vue-echarts'
  }
})

require(['vue', 'vue-echarts'], function (Vue, ECharts) {
  // register component to use...
  Vue.component('v-chart', ECharts)
})

Without any module system, the component is exposed as window.VueECharts.

// register component to use
Vue.component('v-chart', VueECharts)
<template>
<v-chart :options="polar"/>
</template>

<style>
/**
 * The default size is 600pxΓ—400px, for responsive charts
 * you may need to set percentage values as follows (also
 * don't forget to provide a size for the container).
 */
.echarts {
  width: 100%;
  height: 100%;
}
</style>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'

export default {
  components: {
    'v-chart': ECharts
  },
  data () {
    let data = []

    for (let i = 0; i <= 360; i++) {
        let t = i / 180 * Math.PI
        let r = Math.sin(2 * t) * Math.cos(2 * t)
        data.push([r, i])
    }

    return {
      polar: {
        title: {
          text: 'ζžεζ ‡εŒζ•°ε€Όθ½΄'
        },
        legend: {
          data: ['line']
        },
        polar: {
          center: ['50%', '54%']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        angleAxis: {
          type: 'value',
          startAngle: 0
        },
        radiusAxis: {
          min: 0
        },
        series: [
          {
            coordinateSystem: 'polar',
            name: 'line',
            type: 'line',
            showSymbol: false,
            data: data
          }
        ],
        animationDuration: 2000
      }
    }
  }
}
</script>

See more examples here.

Vue-ECharts support the following events:

For further details, see ECharts' API documentation.

Open http://localhost:8080/demo to see the demo.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4