bin-charts-next
介绍
bin-charts-next现已更名为附加后缀,以区分vue版本,原版本更新至3.2.0
最新vue3版本的charts依赖echarts5+,之前版本暂不支持
最新版本
安装
通过unpkg.com/bin-charts-next 可以看到 bin-charts-next 最新版本的资源,也可以切换版本选择需要的资源,在页面上引入 js
和 css 文件即可开始使用:
<!-- import Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- import bin-charts-next -->
<script src="https://unpkg.com/[email protected]/lib/index.min.js"></script>
npm 安装
推荐使用npm安装,它能更好地和webpack打包工具配合使用。而且可以更好的和
es6配合使用。并且支持按需引入
npm i bin-charts-next -S
# or
yarn add bin-charts-next
引入
在 main.js 中写入以下内容:
import { createApp } from 'vue'
import Charts from 'bin-charts-next';
import App from './App.vue';
// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表,图表后缀都为 Chart
import {
BarChart,
LineChart,
PieChart,
RadarChart,
ScatterChart,
EffectScatterChart
} from 'echarts/charts'
// 引入提示框,标题,直角坐标系组件,组件后缀都为 Component
import { TitleComponent, TooltipComponent } from 'echarts/components'
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
// 注册必须的组件
echarts.use([
BarChart,
LineChart,
PieChart,
RadarChart,
ScatterChart,
EffectScatterChart,
TitleComponent,
TooltipComponent,
CanvasRenderer
])
const app = createApp(App)
app.component(Charts.name, Charts)
app.mount('#app', true)
注意事项
在webpack模式下,默认会引入源码版本来实现按需加载,可能会遇到默认配置把 node_modules 中的文件排除在 Babel 转译范围以外的问题。请按如下方法修改配置:
// vue.config.js
module.exports = {
transpileDependencies: [
'bin-charts-next'
]
}
Dependencies
Dependencies
@babel/cli: ^7.17.0@babel/core: ^7.17.2@babel/plugin-proposal-class-properties: ^7.16.7@babel/plugin-transform-runtime: ^7.17.0@babel/polyfill: ^7.12.1@babel/preset-env: ^7.16.11@babel/runtime: ^7.17.2@rollup/plugin-babel: ^5.3.0@rollup/plugin-commonjs: ^20.0.0@rollup/plugin-json: ^4.1.0@rollup/plugin-node-resolve: ^13.1.3@rollup/plugin-replace: ^3.0.1@vue/babel-plugin-jsx: ^1.1.1@vue/compiler-sfc: ^3.2.30@vue/shared: ^3.2.30babel-eslint: ^10.1.0babel-loader: ^8.2.3babel-plugin-module-resolver: ^4.1.0babel-plugin-transform-class-properties: ^6.24.1bin-editor-next: ^1.1.0bin-ui-next: ^1.2.0brace: ^0.11.1cross-env: ^7.0.3css-loader: ^6.6.0css-minimizer-webpack-plugin: ^3.4.1echarts: ^5.3.0eslint: ^7.32.0eslint-plugin-vue: ^7.20.0file-loader: ^6.2.0file-save: ^0.2.0gulp: ^4.0.2gulp-autoprefixer: ^8.0.0gulp-cssmin: ^0.2.0gulp-stylus: ^2.7.1highlight.js: ^11.4.0html-webpack-plugin: ^5.5.0markdown-it: ^12.3.2markdown-it-anchor: ^8.4.1markdown-it-chain: ^1.3.0markdown-it-container: ^3.0.0mini-css-extract-plugin: ^2.5.3progress-bar-webpack-plugin: ^2.1.0rimraf: ^3.0.2rollup: ^2.67.1rollup-plugin-css-only: ^3.1.0rollup-plugin-peer-deps-external: ^2.2.4rollup-plugin-stylus: ^1.0.4rollup-plugin-terser: ^7.0.2rollup-plugin-vue: ^6.0.0style-loader: ^3.3.1stylus: ^0.55.0stylus-loader: 6.1.0transliteration: ^2.2.0url-loader: ^4.1.1vue: ^3.2.30vue-loader: 16.5.0vue-router: ^4.0.12webpack: ^5.68.0webpack-bundle-analyzer: ^4.5.0webpack-cli: ^4.9.2webpack-dev-server: ^4.7.4