前言
本文将介绍如何在vue project中引入echarts，在引入echarts之前首先需要添加echarts的依赖包。
vue2.0框架添加方法。 npm install echarts复制代码 vue3.0框架添加方法。 npm add echarts复制代码 全局引入在全局引入，需要在main.js文件中，引入echarts。
全部引入 import echarts from 'echartsVue.prototype.$echarts = echarts复制代码 按需引入 // echarts 按需引入let echarts2 = require('echarts/lib/echarts')// 引入折线图等组件require('echarts/lib/chart/line')require('echarts/lib/chart/bar')require('echarts/lib/chart/radar')// 引入提示框和title组件，图例require('echarts/lib/component/tooltip')require('echarts/lib/component/title')require('echarts/lib/component/legend')Vue.prototype.$echarts2 = echarts2复制代码 局部引入局部引入echarts就是在单个vue文件中，引入echarts进行使用。
全部引入 import echarts from "echarts";复制代码 按需引入 // echarts 按需引入let echarts2 = require("echarts/lib/echarts");// 引入折线图等组件require("echarts/lib/chart/line");require("echarts/lib/chart/bar");require("echarts/lib/chart/radar");// 引入提示框和title组件，图例require("echarts/lib/component/tooltip");require("echarts/lib/component/title");require("echarts/lib/component/legend");复制代码 代码示例 <template><div class="container"><div id="main1" class="box"></div><div id="main2" class="box"></div><div id="main3" class="box"></div><div id="main4" class="box"></div></div></template><script>import echarts from "echarts";// echarts 按需引入let echarts2 = require("echarts/lib/echarts");// 引入折线图等组件require("echarts/lib/chart/line");require("echarts/lib/chart/bar");require("echarts/lib/chart/radar");// 引入提示框和title组件，图例require("echarts/lib/component/tooltip");require("echarts/lib/component/title");require("echarts/lib/component/legend");export default {name: "",components: {},mounted() {this.initChart();},data() {return {};},methods: {initChart() {let myChart1 = this.$echarts.init(document.getElementById('main1'));let myChart2 = this.$echarts2.init(document.getElementById('main2'));let myChart3 = echarts.init(document.getElementById('main3'));let myChart4 = echarts2.init(document.getElementById('main4'));// 绘制图表myChart1.setOption(this.setOption('全局全部引入'));myChart2.setOption(this.setOption('全局按需引入'));myChart3.setOption(this.setOption('局部全部引入'));myChart4.setOption(this.setOption('局部按需引入'));},setOption(title) {let option = {title: { text: title },tooltip: {},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {},series: [{name: "销量",type: "bar",data: [5, 20, 36, 10, 10, 20]}]};return option;}}};</script><style scoped>.container {position: relative;margin: 0;padding: 0;display: flex;justify-content: space-around;}.box {width: 300px;height: 300px;border: 2px solid #000;}</style>复制代码 GitHub项目 vue_echarts转载于:https://juejin.im/post/5ce9f8cc51882550d4173ed7
免责声明：文章源自网络，版权归原作者所有，如有侵犯联系删除。