vue-apexcharts ApexChartsvue-apexcharts-ApexCharts的Vue.js组件。-Vue

  • C8_640954
    了解作者
  • 157KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-04-02 02:26
    上传日期
用于ApexCharts的Vue.js包装器可在vue中构建交互式可视化。 下载和安装通过npm安装npm install --save apexcharts n用于ApexCharts的Vue.js包装器在vue中构建交互式可视化。 下载和安装通过npm安装npm install --save apexcharts npm install --save vue-apexcharts用法从'vue-apexcharts'导入VueApexCharts Vue.use(VueApexCharts)Vue.component('apexchart',VueApexCharts)创建基本栏具有最小配置的图表,编写如下:
vue-apexcharts-master.zip
内容介绍
<p align="center"><img src="https://apexcharts.com/media/vue-apexcharts.png"></p> <p align="center"> <a href="https://github.com/apexcharts/vue-apexcharts/blob/master/LICENSE" rel='nofollow' onclick='return false;'><img src="https://img.shields.io/badge/License-MIT-brightgreen.svg" alt="License"></a> <a href="https://travis-ci.com/apexcharts/vue-apexcharts" rel='nofollow' onclick='return false;'><img src="https://api.travis-ci.com/apexcharts/vue-apexcharts.svg?branch=master" alt="build" /></a> <a href="https://www.npmjs.com/package/vue-apexcharts" rel='nofollow' onclick='return false;'><img src="https://img.shields.io/npm/v/vue-apexcharts.svg" alt="ver"></a> </p> <p align="center"> <a href="https://twitter.com/intent/tweet?text=Vue-ApexCharts%20A%20Vue.js%20Chart%20library%20built%20on%20ApexCharts.js&url=https://www.apexcharts.com&hashtags=javascript,charts,vue.js,vue,apexcharts" rel='nofollow' onclick='return false;'><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"> </a> </p> <p align="center">Vue.js wrapper for <a href="https://github.com/apexcharts/apexcharts.js" rel='nofollow' onclick='return false;'>ApexCharts</a> to build interactive visualizations in vue.</p> <p align="center"><a href="https://apexcharts.com/vue-chart-demos/" rel='nofollow' onclick='return false;'><img src="https://apexcharts.com/media/apexcharts-banner.png"></a></p> ## Download and Installation ##### Installing via npm ```bash npm install --save apexcharts npm install --save vue-apexcharts ``` ## Usage ```js import VueApexCharts from 'vue-apexcharts' Vue.use(VueApexCharts) Vue.component('apexchart', VueApexCharts) ``` To create a basic bar chart with minimal configuration, write as follows: ```vue <template> <div> <apexchart width="500" type="bar" :options="chartOptions" :series="series" rel='nofollow' onclick='return false;'></apexchart> </div> </template> ``` ```js export default { data: function() { return { chartOptions: { chart: { id: 'vuechart-example' }, xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998] } }, series: [{ name: 'series-1', data: [30, 40, 35, 50, 49, 60, 70, 91] }] } }, }; ``` This will render the following chart <p><a href="https://apexcharts.com/javascript-chart-demos/column-charts/" rel='nofollow' onclick='return false;'><img src="https://apexcharts.com/media/first-bar-chart.svg"></a></p> ### How do I update the chart? Simple! Just change the `series` or any `option` and it will automatically re-render the chart. <br/> Click on the below example to see this in action <p><a href="https://codesandbox.io/s/voyy36o7y" rel='nofollow' onclick='return false;'><img src="https://apexcharts.com/media/vue-chart-updation.gif"></a></p> ```vue <template> <div class="app"> <apexchart width="550" type="bar" :options="chartOptions" :series="series" rel='nofollow' onclick='return false;'></apexchart> <div> <button @click="updateChart">Update!</button> </div> </div> </template> ``` ```js export default { data: function() { return { chartOptions: { chart: { id: 'vuechart-example', }, xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998], }, }, series: [{ name: 'series-1', data: [30, 40, 45, 50, 49, 60, 70, 81] }] } }, methods: { updateChart() { const max = 90; const min = 20; const newData = this.series[0].data.map(() => { return Math.floor(Math.random() * (max - min + 1)) + min }) const colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0'] // Make sure to update the whole options config and not just a single property to allow the Vue watch catch the change. this.chartOptions = { colors: [colors[Math.floor(Math.random()*colors.length)]] }; // In the same way, update the series option this.series = [{ data: newData }] } } }; ``` **Important:** While updating the options, make sure to update the outermost property even when you need to update the nested property. ✅ Do this ```javascript this.chartOptions = {...this.chartOptions, ...{ xaxis: { labels: { style: { colors: ['red'] } } } }} ``` ❌ Not this ```javascript this.chartOptions.xaxis = { labels: { style: { colors: ['red'] } } }} ``` ## Props | Prop | Type | Description | | ------------- |-------------| -----| | **series***| Array | The series is an array which accepts an object in the following format. To know more about the format of dataSeries, checkout [Series](https://apexcharts.com/docs/series/) docs on the website. | | **type*** | String | `line`, `area`, `bar`, `pie`, `donut`, `scatter`, `bubble`, `heatmap`, `radialBar`, `candlestick` | | **width** | Number/String | Possible values for width can be `100%` or `400px` or `400` | | **height** | Number/String | Possible values for height can be `100%` or `300px` or `300` | | **options** | Object | The configuration object, see options on [API (Reference)](https://apexcharts.com/docs/options/chart/type/) | ## Methods You don't actually need to call updateSeries() or updateOptions() manually. Changing the props will automatically update the chart. You only need to call these methods to update the chart forcefully. | Method | Description | | ------------- | -----| | <a href="https://apexcharts.com/docs/methods/#updateSeries" rel='nofollow' onclick='return false;'>updateSeries</a> | Allows you to update the series array overriding the existing one | | <a href="https://apexcharts.com/docs/methods/#updateOptions" rel='nofollow' onclick='return false;'>updateOptions</a> | Allows you to update the configuration object | | <a href="https://apexcharts.com/docs/methods/#toggleSeries" rel='nofollow' onclick='return false;'>toggleSeries</a> | Allows you to toggle the visibility of series programatically. Useful when you have custom legend. | | <a href="https://apexcharts.com/docs/methods/#appendData" rel='nofollow' onclick='return false;'>appendData</a> | Allows you to append new data to the series array. | | <a href="https://apexcharts.com/docs/methods/#addtext" rel='nofollow' onclick='return false;'>addText</a> | The addText() method can be used to draw text after chart is rendered. | | <a href="https://apexcharts.com/docs/methods/#addxaxisannotation" rel='nofollow' onclick='return false;'>addXaxisAnnotation</a> | Draw x-axis annotations after chart is rendered. | | <a href="https://apexcharts.com/docs/methods/#addyaxisannotation" rel='nofollow' onclick='return false;'>addYaxisAnnotation</a> | Draw y-axis annotations after chart is rendered. | | <a href="https://apexcharts.com/docs/methods/#addpointannotation" rel='nofollow' onclick='return false;'>addPointAnnotation</a> | Draw point (xy) annotations after chart is rendered. | How to call the methods mentioned above? ```html <template> <div class="example"> <apexchart ref="demoChart" width="500" :options="chartOptions" :series="series" rel='nofollow' onclick='return false;'></apexchart> </div> </template> <script> functionName: function() { this.$refs.demoChart.updateOptions({ colors: newColors }) }, </script> ``` ## How to call methods of ApexCharts without referencing the chart element? Sometimes, you may want to call methods of the core ApexCharts library from some other place, and you can do so on `this.$apexcharts` global variable directly. You need to target the chart by <code>chart.id</code> while calling this method Example ```js this.$apexcharts.exec('vuechart-example', 'updateSeries', [{ data: [40, 55, 65, 11, 23, 44, 54, 33] }]) ``` In the above method, `vuechart-example` is the ID of chart, `updateSeries` is the name of the method you want to call and the third parameter is the new Series you want to update. More info on the `.exec()` method can be found <a href="https://apexcharts.com/docs/methods/#exec" rel='nofollow' onclick='return false;'>here</a> All other methods of ApexCharts can be called the same way. ## What's included The repository includes the following files and directories. ``` vue-apexcharts/ ├── dist/ │ └── vue-apexcharts.js └── src/ ├── ApexCharts.component.js ├── Utils.js └── index.js ``` ## Running the examples Basic Examples are included to show how to get started using ApexCharts with Vue easily.
评论
    相关推荐
    • drum-demo-react:实现了simple-beats-npm包的简单音乐应用程序
      交互式监视模式下启动测试运行器。 有关更多信息,请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且...
    • pwr:npm的(被欺骗的)交互式CLI
      :high_voltage: npm的(被欺骗的)交互式CLI :call_me_hand: 如果您喜欢此项目,请在上对我进行ping操作 因为社区建设很棒 :sparkles: 我们每天使用的东西。 但是记住他们时髦的名字(和参数)并不容易。 安装与...
    • npm-api-react-sample-project
      交互式监视模式下启动测试运行器。 有关更多信息,请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 最小化内部版本,文件名...
    • npm:GitHub与npm交互的动作
      NPM的GitHub操作 此动作可使用npm命令行客户端启用任意动作,包括测试程序包和发布到注册表。 用法 生成,测试npm程序包并将其发布到默认公共注册表的工作流程示例如下: workflow " Build, Test, and Publish " { ...
    • node-snap-ci:非官方的npm模块与snap-ci进行交互
      非常基本的非官方npm模块,用于与 API进行交互。 安装 npm install node-snap-ci ##用法 ### Authentication您可以将凭据传递到api构造函数中: var snap = require('node-snap-ci')({ apiKey: 'my-api-key', ...
    • vueasie:NPM模块,提供与easiedata功能交互的界面
      通过NPM安装vueasie npm install vueasie --save 在您的代码中导入或要求Vue和Vueasie: import Vue from 'vue' import Vueasie from 'vueasie' Vue . use ( Vueasie ) 或使用单个组件: import Vue from 'vue'...
    • 交互式注册页面
      注册页面 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
    • curemap:临床数据的交互式地图
      固化图 临床数据的交互式地图 设置 确保安装了和 root (npm i roots@pre -g) 克隆这个 repo 并cd到文件夹中 运行npm install 运行roots watch
    • gvsig-geocode:Uso de npm gei
      交互式监视模式下启动测试运行器。 有关更多信息,请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且...
    • npm-wrapper:API的Discord Bots Group NPM包装器
      与discordbots.group API进行交互的简单库。 入门 只需导航到您的项目目录,然后运行npm i discord-bots-group/npm-wrapper 。 文献资料 例子 const Client = require ( 'discordbots.group' ) ; const client = ...