Vue项目中引入echarts

第一步：安装

npm install echarts --save

第二步：引入插件（在main.js中）

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

第三步：新建个.vue

<template>
  <div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="body">
        <div id="main2" ref="myechart1" style="width: 600px;height:400px;"></div>
        <div id="main1" ref="myechart2" style="width: 600px;height:400px;"></div>
    </div>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.setChart()
    },
    methods: {
      setChart() {
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = this.$echarts.init(this.$refs.myechart1)
        var myChart2 = this.$echarts.init(this.$refs.myechart2)

        // 指定图表的配置项和数据
        var option1 = {
          title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        }
        var option2 = {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: 1048, name: '搜索引擎'},
                        {value: 735, name: '直接访问'},
                        {value: 580, name: '邮件营销'},
                        {value: 484, name: '联盟广告'},
                        {value: 300, name: '视频广告'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
        myChart2.setOption(option2);
      },
    },
  }
</script>

<style scoped>
    button 
    {
        position: absolute;
        right: 300px;
        top: 50px;
        width: 60px;
        height: 30px;
        background: #fc794f;
        border: 0;
        border-radius: 5px;
        color: white;
        font-weight: bold;
    }
    .body 
    {
        position:relative;
        margin: 50px;
        margin-top: 150px;
    }
    #main1 
    {
        float: left;
    }
    #main2 
    {
        float: right;
    }
</style>

效果：

参考：https://blog.csdn.net/weixin_46872121/article/details/111055102