VUE中如何使用echarts

    技术2025-06-07  20

    第一步:安装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; }

    在运行一次,就显示出来了

    Processed: 0.014, SQL: 9