在IDEA里面写vue-cil和echarts结合的例子

1.在index.html里面引入echarts全局对象

<!--引入全局echarts  -->
    <script src="./static/lib/echarts.min.js"> </script>

2.在main.js里面， 将全局的echarts对象挂载到vue的原型对象上

//将全局的echarts对象挂载到vue原型对象上
Vue.prototype.$echarts = window.echarts

3.建立一个组件，这里是left.vue，写echarts

<template>
    <div class="com-container">
       <div class="com-chart" ref="left1_ref"> </div>
    </div>
</template>
<script>
    // import __ from '__' // __是需要手动引入的文件
    export default {
        name: 'left',
        components: {},
        data() {
           return{
             chartInstance : null,
           }
        },
      mounted(){
        this.initChart();
        this.getData();
      },
        methods: {
          //初始化图表
          initChart(){
            this.chartInstance = this.$echarts.init(this.$refs.left1_ref);
          },
          //获取服务器数据
          getData(){
            this.Data1 =  [ "旅游","教育", "游戏", "医疗", "电商", "社交", "金融", "旅游","教育", "游戏"];
            this.Data2 = [200, 300, 300, 600,900, 1200, 1500, 900, 500, 300 ];
            this.updateChart();
          },
          //更新图表
          updateChart(){
            const  value1 =  this.Data1;
            const  value2 =  this.Data2;
            const option = {
              xAxis: {
                type: 'category',
                data: value1,
              },
              yAxis: {
                type: 'value',
              },
              series: [
                {
                  data: value2 ,
                  type: 'bar',
                  smooth: true
                },
              ]
            }
            this.chartInstance.setOption(option);
          }
        }
    }
</script>
<style lang="postcss" scoped>
    /*body {
        background-color: #ff0000;
    }*/
</style>

4.注册路由，在index.js里面

export default new Router({
  routes: [
    {
      path: '/leftpage',
      //name: 'home',
      //components: {leftpage} ,
      component: left,
      //component: resolve => require(['../components/left.vue'],resolve)
    }
  ]
})

5.设置容器的大小，建一个css的文件

.com-chart{
  width: 100%;
  // height:100%;
  height:600px;
  overflow: hidden;
}

6.运行项目