vue中echarts调用接口_vue中使用echarts

  • Post author:
  • Post category:vue


1、首先下载echart依赖,这里采用的npm包管理工具,在项目中运行命令

npm install vue-echarts

2、在main.js里引入/注册echart::

//引入echart:

import echarts from ‘echarts’

//注册

Vue.prototype.$echarts = echarts

3、使用

代码:

export default {

mounted(){

this.drawLine();

},

methods: {

drawLine(){

// 基于准备好的dom,初始化echarts实例

let myChart = this.$echarts.init(document.getElementById(‘myChart’))

// 绘制图表

myChart.setOption({

title: { text: ‘冬季销量统计’ },

tooltip: {},

xAxis: {

data: [“衬衫”,”羊毛衫”,”雪纺衫”,”裤子”,”高跟鞋”,”袜子”,’毛衣’,’秋裤’,’外套’,’短袖’,’手套’,’帽子’,’卫衣’,’棒球服’]

},

yAxis: {},

series: [{

name: ‘销量’,

type: ‘bar’,

data: [5, 20, 36, 10, 10, 20,15,22,33,8,6,21,22,39]

}]

});

}

}

}



版权声明:本文为weixin_35565522原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。