在Vue中使用echarts

绝地灬酷狼 2022-12-27 08:49 192阅读 0赞

### 安装echarts依赖 ###

npm install echarts -S
    或者使用淘宝的镜像
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    cnpm install echarts -S

### 创建图表 ###

首先需要全局引入  
在main.js中

// 引入echarts
    import echarts from 'echarts'
    Vue.prototype.$echarts = echarts

在Echarts.vue中

export default {
      name: 'hello',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      mounted(){
        this.drawLine();
      },
      methods: {
        drawLine(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
                title: { text: '在Vue中使用echarts' },
                tooltip: {},
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
        }
      }
    }

注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70]: /images/20221120/366babd1993e45858178e0d08ed28d7e.png

在Vue中使用echarts

发表评论取消回复

还没有评论，来说两句吧...

相关阅读