vue项目导入echarts

1.vue2项目npm下载echarts(引入5.0以上版本会报错,这里推荐4.8.0)
npm install [email protected] -S
2.项目的main.js全局绑定(这里是vue2的引入vue3略有不同)
import echarts from ‘echarts’
Vue.prototype.$echarts = echarts
3.页面代码

<template>
  <div class="chart" id="chart" style="width: 600px; height: 400px"></div>
</template>
<script>
export default {
      
      
    mounted() {
      
      
        // 创建echarts实例
        var myChart = this.$echarts.init(document.getElementById("chart"));
        var option = {
      
      
                        title: {
      
      
                        text: '月销量'
                        },
                        // 提示框
                        tooltip: {
      
      },
                        // 图例
                        legend: {
      
      
                        data: ['销量']
                        },
                        // 表示x轴坐标
                        xAxis: {
      
      
                        data: ['oppo', 'vivo', 'iphone', '小米', '三星', '魅族']
                        },
                        // 表示y轴坐标
                        yAxis: {
      
      },
                        // 
                        series: [
                        {
      
      
                            name: '销量',
                            type: 'bar',
                            data: [3500, 2200, 4500, 6500, 200, 3000]
                        }
                        ]
                    };
        myChart.setOption(option);
    },
	methods: {
      
      },
}
</script>
<style>
</style>

猜你喜欢

转载自blog.csdn.net/woshiabc111/article/details/129496850