Echarts基本使用

Echarts使用

1.安装echarts

//在下载echarts时，可能会遇到安装不成功或者报错的问题，可以重装或者是装之前的版本。
    npm install echarts --save
    npm install echarts@4.8.0 --save
    //卸载命令
    npm uninstall echarts

2.使用时引用echarts

  import * as echarts from 'echarts'

3.创建一个存放echarts的容器，设置宽高

<div id="myCharts" ref="myCharts" style="height:300px;width: 500px" >

4.创建柱状图

getEchart(){
      //获取定义id并通过echarts.init()方法初始化echarts实例
 var Charts = echarts.init(document.getElementById('myCharts')); 
    //图表的配置项和数据
    let option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};
 Charts.setOption(option) // 通过setOption()方法生成图表
}