> 文档中心 > vue项目中ECharts图表库图表引入不显示问题

vue项目中ECharts图表库图表引入不显示问题


vue项目中ECharts图表库引入不显示问题

很多小伙伴在vue项目中引入 ECharts图表库不显示非常的苦恼,

在项目中引入 Apache ECharts问题:

Handbook - Apache ECharts    <==官方文档


个人简化版本:

1.在vue项目中安装echarts依赖包

npm install echarts --save

2. 在项目的main.js中放入:

import * as echarts from "echarts" //引入echarts

Vue.prototype.$echarts = echarts //注册组件

import * as echarts from "echarts" //引入echartsVue.prototype.$echarts = echarts //注册组件

2.在需要展示图表的页面xxx.vue中

以下是简单的示例:

 

  
// import * as echarts from 'echarts';export default { name: "eCharts", data() { return { }; }, mounted() { this.drawLine(); }, methods: { drawLine() { // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getElementById("myChart")); // 绘制图表 myChart.setOption({ title: { text: "在Vue中使用echarts" }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], }, yAxis: {}, series: [ { name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20], }, ], }); }, },};

注意点:一定要设置宽高