第一步:安装echarts 在命令行中输入npm install echarts --save 提示版本号表名安装成功 第二步:引入 在main.js文件中,引入echarts
// echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts第三步:使用 在需要展示echarts的页面中,添加下列代码
mounted() { // 基于准备好的dom,初始化echarts实例 var myChart = this.$echarts.init(document.getElementById('echartsExample')) // echartsExample是显示echart的元素id // 绘制图表 myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }) },但是,到这里,页面上并没有显示表格 检查元素后发现其实echarts已经存在了 但是显示的高度为0 那么我再给echartsExample加个高度试试
#echartsExample{ width: 500px; height: 500px; }在运行一次,就显示出来了