问题:
我在vue项目中使用npm install echarts --save下载echarts时,然后导入的时候发现一致提示如下错误:
在这里插入图片描述
后来在网上找发现时版本问题,当我使用上述命令下载时,下载的echarts版本时5.0的
后来我参考该博主的方法:https://blog.csdn.net/weixin_44874618/article/details/110647652
重新安装就可一正常使用的
效果如下:
在这里插入图片描述
具体代码如下:
1.在main.js中全局引入
在这里插入图片描述
2.随便创建一个要显示echarts图的vue文件
在这里插入图片描述

<template>
  <div>
    list
    <div ref="myechart" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.setChart()
    },
    methods: {
      setChart() {
        var myChart = this.$echarts.init(this.$refs.myechart)
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: "ECharts 入门示例",
          },
          tooltip: {},
          legend: {
            data: ["销量"],
          },
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: [5, 20, 36, 10, 10, 20],
            },
          ],
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      },
    },
  }
</script>

<style lang="" scoped>
</style>

Logo

前往低代码交流专区

更多推荐