在vue项目中使用echarts

一、使用步骤

1.引入库

代码如下（示例）：

npm install echarts --save

注意：
vue和echarts的版本对应关系：
2.x===>3.x,4.x;
3.x===>5.x;

2.写入数据

代码如下（示例）：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="chart-container" style="width: 400px;height: 300px">

    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  mounted(){
    const chart=echarts.init(document.getElementById('chart-container'));
    const option={
      title:{
        text:'柱状图示例'
      },
      tooltip:{
        trigger:'item'
      },
      xAxis:{
        data:['一月','二月','三月','四月']
      },
      yAxis:{

      },
      series:{
        type:'bar',
        data: [300,189,467,222],
        label:{
          show:true,
          position:'top'
        }
      }
    };
    chart.setOption(option);

  },
  data(){
    return{

    }
  },

}
</script>

注意：
导入应该是：
import * as echarts from ‘echarts’
而不是：
import echarts from ‘echarts’
否则报init未定义错误。

---