Vue中引入Echarts

最新推荐文章于 2024-10-10 09:47:35 发布

洛一一珞

最新推荐文章于 2024-10-10 09:47:35 发布

阅读量458

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/dongjing0813/article/details/111977058

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何通过npm安装Echarts，并在遇到程序报错时，如何降级Echarts版本至4.8.0以解决问题。接着展示了在Vue中引入Echarts，创建柱状图实例的步骤，包括设置图表选项和实现窗口自适应调整大小的功能。

摘要由CSDN通过智能技术生成

1、npm安装Echarts

npm install echarts --save

运行程序报错卸载并降低Echarts版本

npm install echarts@4.8.0 --save

2、应用

<!-- 容器 -->
<div style="width:30%;height:10%" ref="chart"></div>

<script>
let Echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");//按需引入
export default{
    data(){
        return {
              chart:null
        }
    },
    mounted(){
        this.initChart();
        //自适应窗口大小
        window.addEventListener("resize",()=>{
            this.chart.resize();
        })
    },
    methods:{
        initChart(){
            this.chart=Echarts.init(this.$refs.chart);

            let option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };

            this.chart.setOption(option)
        }
    }
}
</script>