1、在index.html中，引入v-charts的cdn地址。
因为v-charts 依赖echarts，所有，两者都需要引入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<link rel="stylesheet" type="text/css" href="../../static/styles/css/app.css" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/line.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2、在webpack配置一下： vue-cli 3.x 或4.x版本，找vue.config.js
module.exports = {
configureWebpack: config => {
config[‘externals’] = {
echarts: ‘echarts’,
VCharts: ‘VeIndex’
}
},
需要注意的是，VCharts对应的名字是VeIndex。
通过cdn引入后，vcharts就会在全局window上挂载VeIndex
3、在使用图表组件的页面引入和注册组件。
<template>
<div>
<ve-line :data="chartData"></ve-line>
</div>
</template>
<script>
const VeIndex = window.VeIndex
export default {
name: 'planWorkbench',
components: {
veLine: VeIndex.VeLine
},
data() {
return {
chartData: {
columns: ['日期', '销售额'],
rows: [
{ 日期: '1月1日', 销售额: 123 },
{ 日期: '1月2日', 销售额: 1223 },
{ 日期: '1月3日', 销售额: 2123 },
{ 日期: '1月4日', 销售额: 4123 },
{ 日期: '1月5日', 销售额: 3123 },
{ 日期: '1月6日', 销售额: 7123 }
]
}
}
},
mounted() {}
}
</script>
<style></style>
进阶：
更进一步，我们把cdn配置放置到vue.config.js中，替换indexhtml中的手动配置文件。
index.html中，我们采用根据配置输出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<link rel="stylesheet" type="text/css" href="../../static/styles/css/app.css" />
<title></title>
<!-- cdn css -->
<% for (let i in htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>
<!-- cdn js -->
<% for (let i in htmlWebpackPlugin.options.cdn.js) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
在vue.config.js中修改配置：
// vue.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 配置cdn
const cdn = {
css: ['https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css'],
js: [
'https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js',
'https://cdn.jsdelivr.net/npm/v-charts/lib/line.min.js'
]
}
module.exports = {
publicPath: "./", // 项目部署的基础路径
outputDir: "dist",
configureWebpack: config => {
config.plugins.forEach(val => {
if (val instanceof HtmlWebpackPlugin) {
// 修改HtmlWebpackPlugin，添加env表示生产或开发的环境参数，在index.html使用环境变量
val.options.env = process.env.NODE_ENV
val.options.cdn = cdn // cdn配置
}
})
// cdn配置
config['externals'] = {
echarts: 'echarts',
VCharts: 'VeIndex'
}
},
};
