vue2中使用echarts图表

第一步：安装echarts

在命令行中输入npm install echarts --save

第二步：引入

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

第三步：使用

 

<template>    
   <div>
       <div class="echart" id="mychart"style="width:700px;height:500px></div>
   </div>
</template>
<script>
   import echarts from "echarts";

export default {
    mounted(){
        //可以放到请求回来处理好以后调用
      this.initEcharts();
    },
    methods: {
    initEcharts() {
      // 基本柱状图
      const option = {
        color: ['#4695D1'],
        title:
          {
            text: "区域评价(城区)",
            x: 'center',
            textStyle: {
              color: '#1890ff',
              fontSize: 24
            },
          },
        xAxis: {
          data: this.xData
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData
          }
        ]
      };
      let myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      
    },
    }
}
</script>